段落を整えて表示する−その⑧

えー 前回 AMP テストを試みた処 見事に 50KB オーバーでした ;;

AMP 対応も目指したいので 対策を講じます

check
  • カスタマイズは自己責任でお願いします。
  • wp-cocoon.comサイトのサポート対象外となります。
スポンサーリンク

AMP 対応を目指して

まず大前提として このスキンで容量制限に引っかかっている主犯格はカラム間マージンの記述です 膨大ですしね

んで 次の前提 AMP ページではカラムは wrap 表示される これが WordPress の挙動なのか Cocoon の挙動なのかは分かりませんが ので そもそもカラム間マージンの記述は必要ない

てことは AMP と通常とで記述を分ければ良さそうです

scss の分割

プランはこうです

  • AMPページでもサイトの印象が変わらぬ様、配色や装飾に必要なミニマムなcss(仮にamp.cssとする)を作る。
  • amp.cssに容量的な余裕があれば、カラム外(単段落)のベタ組みを記述する。
  • 通常css(style.css)に残りを記述する。

AMP 用の scss

amp.scss

 // compileExpanded: ../$1.css 
 /* 
   Skin Name: thx 
   Description: thx.jp にて scss 勉強用に作成
   Skin URI: https:// 
   Author:  がっきぃ
   Author URI: https://thx.jp 
   Screenshot URI: https:// 
   Version: 0.3.6 
   Priority: 0 
 */ 
 /* 以下にスタイルシートを記入してください */ 

 $thx_ruriiro: hsla(217, 68%, 37%, 1.0); 
 $thx_amairo: hsla(199, 75%, 52%, 1.0); 
 $thx_mizuiro: hsla(188, 48%, 82%, 1.0); 

 $white: #fff; 
 $sub_menu_hover_bg_color: #333; 
 $border_color: #ccc; 

 $key_color: $thx_ruriiro; 
 $key_sub_color: $thx_amairo; 
 $bg_color: change-color($key_color, $lightness: 95%); 
 $key_color_thin: fade-out($key_color, 0.95); 
 $h_bk_color: lighten($key_color, 40%); 

 // 基本要素
 @import "base"; 
 // グローバルナビ
 @import "navi"; 
 // 見出し
 @import "h"; 
 // 追加
 @import "add"; 
 // 勉強用
 @import "thx"; 
 @import "adjustment"; 
 @import "ios_betagumi/amp_ios_betagumi"; 
 //  オーバーライド
 //@import "override"; 

style.scss を複製し ミニマムなスタイルを記述します

まずは単段落ベタ組みのスタイル 後述する amp_ios_betagumi も取り込み 50KB に収まるかを様子見します

_amp_ios_betagumi.scss

変数
 @import "var_ios_betagumi"; 

_var_ios_betagumi.scss にまとめて記述された変数を取り込みます

mixin
 //mixin 設定
 @mixin thx-beta-body { 
   font-family: $thx_font_family; 
   font-weight: $thx_font_weight; 
 } 

 @mixin thx-beta-p { 
   text-align: justify; 
 } 

 @mixin thx-default-text-align { 
   text-align: start; 
 } 

 @mixin thx-column-margin( 
   $contents_width: $thx_main_column_contents_width, 
   $font_width: $thx_site_font_width, 
   $column_count: $thx_beta_column_count, 
   $column_margin: $thx_beta_column_margin 
 ) { 
   $columns_margin_total: $column_margin * ($column_count - 1); 
   $text_width: $contents_width - $columns_margin_total; 
   $text_count: $text_width / $font_width; 
   $text_width_rem: $text_count % $column_count; 
   $text_width_rem: $text_width_rem * $font_width; 
   $columns_margin_total: $columns_margin_total + $text_width_rem; 
   $column_margin: $columns_margin_total / ($column_count - 1); 
   margin-right: $column_margin; 
 } 

 @mixin secondary-box($font_width: $thx_site_font_width) { 
   padding: $font_width; 
 } 

 @mixin blank-box($font_width: $thx_site_font_width) { 
   margin-left: 0; 
   margin-right: 0; 
   border-width: 2px; 
   padding-left: ($font_width - 2px); 
   padding-right: ($font_width - 2px); 
 } 

 @mixin blank-box-sticky($font_width: $thx_site_font_width) { 
   border-width: 0 0 0 ($font_width * 2); 
   padding-left: $font_width; 
   padding-right: $font_width; 
 } 

 @mixin common-icon-box($font_width: $thx_site_font_width) { 
   border-width: 1px; 
   padding-left: ($font_width * 4) - 1px; 
   padding-right: $font_width - 1px; 
 } 

 @mixin toggle-checkbox($font_width: $thx_site_font_width) { 
   border-width: 1px; 
   padding-left: ($font_width - 1px); 
   padding-right: ($font_width - 1px); 
 } 

各種 mixin を設定します 内容は以前の _ios_betagumi.scss のままになります

メディアクエリ
 //@import "iphone_portrait"; 
 @import "amp_iphone_landscape"; 
 @import "amp_ipad_portrait"; 
 @import "amp_ipad_landscape"; 
 //@import "4-6columns"; 

単段落用のメディアクエリを読み込みます

単段落用メディアクエリ

設定内容は重複しますので amp_ipad_landscape.scss を例題とします

 /*_/_/_/_/_/_/_/*/ 
 /* iPad   横向き  */ 
 /* amp  共通設定  */ 
 /*_/_/_/_/_/_/_/*/ 
 @media screen and 
   (min-width: 1024px) and 
   (orientation: landscape) 
 { 
   $font_width: $thx_ipad_font_width; 
   .page-body { 
     font-size: $font_width; 
     font-weight: $thx_font_weight; 
   } 

   /*  案内ボックス  */ 
   .secondary-box { 
     @include secondary-box($font_width); 
   } 

   /*  白抜きボックス  */ 
   .blank-box { 
     @include blank-box($font_width); 
   } 

   /*  付箋風ボックス  */ 
   .blank-box.sticky { 
     @include blank-box-sticky($font_width); 
   } 

   /*  アイコンボックス  */ 
   .common-icon-box { 
     @include common-icon-box($font_width); 
   } 

   /*  トグルボックス  */ 
   .toggle-checkbox:checked~.toggle-content { 
     @include toggle-checkbox($font_width) 
   } 
 } 

 /***************/ 
 /* iPad  横向き  */ 
 /*  amp  個別設定  */ 
 /***************/ 
 @each $size in $ipad_sizes_l { 
   $font_width: $thx_ipad_font_size; 
   $column_margin: $font_width * 2; 
   $contents_padding: 30px; 
   $contents_width: $size * 1px * 0.67 - $contents_padding * 2; 

   // $contents_width を文字幅の整数倍に
   $contents_width: 
     $contents_width 
     - ( 
       $contents_width 
       % $font_width 
     ) 
   ; 

   @media screen and 
     (width: #{$size}px) and 
     (orientation: landscape) 
   { 
     body { 
       @include thx-beta-body; 
     } 
     p { 
       @include thx-beta-p; 
     } 
     .no-scrollable-main .main { 
       width: $contents_width + $contents_padding * 2; 
       margin-left: auto; 
       margin-right: auto; 
       padding-left: $contents_padding - 1; 
       padding-right: $contents_padding - 1; 
     } 
   } 
 } 

以前の ipad_landscape.scss より カラムーループ部を除きます

通常用の scss

style.scss

 // compileExpanded: ../$1.css 

 //AMP でも反映するスタイル
 @import "amp"; 

 @import "ios_betagumi/ios_betagumi"; 

 //  オーバーライド
 @import "override"; 

ミニマムな amp.scss 追加要素の _ios_betagumi.scss override.scss を読み込みます

_ios_betagumi.scss

 @import "iphone_portrait"; 
 @import "iphone_landscape"; 
 @import "ipad_portrait"; 
 @import "ipad_landscape"; 
 @import "4-6columns"; 

変数や mixin _amp_ios_betagumi.scss で設定されているので カラム間マージンを設定するメディアクエリを読み込むのみになります

カラム間マージン用メディアクエリ

こちらも設定内容は重複しますので ipad_landscape.scss を例題とします

 /*_/_/_/_/_/_/_/*/ 
 /* iPad   横向き  */ 
 /*      共通設定  */ 
 /*_/_/_/_/_/_/_/*/ 
 @media screen and 
   (min-width: 1024px) and 
   (orientation: landscape) 
 { 
   $font_width: $thx_ipad_font_width; 
 } 

 /***************/ 
 /* iPad  横向き  */ 
 /*       個別設定  */ 
 /***************/ 
 @each $size in $ipad_sizes_l { 
   $font_width: $thx_ipad_font_size; 
   $column_margin: $font_width * 2; 
   $contents_padding: 30px; 
   $contents_width: $size * 1px * 0.67 - $contents_padding * 2; 

   // $contents_width を文字幅の整数倍に
   $contents_width: 
     $contents_width 
     - ( 
       $contents_width 
       % $font_width 
     ) 
   ; 

   @media screen and 
     (width: #{$size}px) and 
     (orientation: landscape) 
   { 
     @if $thx_beta_column_loop != 6 { 
       @for $i from ($thx_beta_column_loop + 1) through 6 { 
         .wp-block-columns.has-#{$i}-columns{ 
           .wp-block-column{ 
             @include thx-default-text-align; 
           } 
         } 
       } 
     } 

     // Cocoon ブロック内カラムブロック間マージン設定
     @each $class, $count in $cocoon_block_class { 
       .#{$class} { 
         $columns_width: $contents_width - $font_width * $count; 
         @for $i from 2 through $thx_beta_column_loop { 
           .has-#{$i}-columns{ 
             .wp-block-column{ 
               @include thx-column-margin( 
                 $columns_width, 
                 $font_width, 
                 $i, 
                 $column_margin 
               ); 
             } 
           } 
         } 
       } 
     } 
   } 
 } 

以前の ipad_landscape.scss より カラムーループ部のみを残します

Cocoon の挙動

amp.css

Cocoon の子テーマである Cocoon Child には Cocoon Child: amp.css なるものが準備されています

って事は?スキンフォルダに amp.css を作ったら AMP ページではこちらを読み込んでくれるのでは??

いそいそとファイルを作成し スタイルを記述します すると、、、

読み込んでくれました

しかし!

style.css も読み込むので容量オーバーです

ん〜 期待した挙動とは違ったなぁ、、、

ちょいと調べてみると 以前は amp.css のみを読み込んでいたのが 不具合だった模様

って事は style.css が共通スタイルで amp.css AMP 用の追加スタイルって仕様ですね

AMP 設定

そうなると こちらが想定していた事が出来ないので 他の方法を取る事に

調べてみると スキン 子テーマ それぞれで AMP への適用が可能との事 そこで本来とは異なる利用法だと思うのですが

AMP設定
  • 「スキンのスタイルを有効にする」のチェックを外してスキンの style.css に通常用の css を記述。
  • 「子テーマのスタイルを有効にする」にチェックを入れて子テーマの style.css にAMP用の css を記述。

で回避してみました、、、 ん〜、、、 これってスキン内で完結してないんでスキン作成とは言えなくなってますね、、、

まぁ とりあえずテストって事で進めます

結果と問題点と次回予告

結果

問題なし 容量オーバーなし スクショもなし アッサリ

問題点

スキン内で完結できていない のでやはりスマートではありませんね 別の手法で css を削減する必要があります

ただ AMP 用にミニマムな css を作っておくという手法は css の整理がしやすいので このままとします

次回予告

calc()、、、 だと

お前は scss の一味だったハズ、、、

コメント