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

えー、 前回。 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 に重複してスタイルを書いている場合は重複部分の削除をおすすめします
子テーマの style.css と amp.css でスタイルが重複している場合はコードの削除をおすすめします。
wp-cocoon.com

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

AMP 設定

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

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

AMP ページで CSS が 50,000Byte （約 50KB） を超える 「無効な CSS エラー」 が出た場合の対処方法
スキンスタイルの無効機能と子テーマスタイルの無効機能の説明です。
wp-cocoon.com
AMP設定
  • 「スキンのスタイルを有効にする」のチェックを外してスキンの style.css に通常用の css を記述。
  • 「子テーマのスタイルを有効にする」にチェックを入れて子テーマの style.css にAMP用の css を記述。

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

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

結果と問題点と次回予告

結果

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

問題点

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

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

次回予告

calc()、、、 だと ⁉

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

スポンサーリンク

コメント