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

前回 css セレクタをまとめることに効果が無いばかりか悪影響を生じていたので css を削減するべく 次の二点に取り組みます

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

4〜6カラム

機能制限的な事は出来るだけ避けたかったのですが 4〜6カラムのベタ組みを取り止めます

使用頻度はかなり低いと思われるので 大勢に影響なく カラム部分の css 記述を 60% 削減可能となります

ループ処理

 @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{  以下略

変数 $thx_beta_column_loop にて最大ループ数が設定されているので これを 3 に変更します

justify の打ち消し

 @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{ 
         p { 
           @include thx-default-text-align; 
         } 
       } 
     } 
   } 
 } 

変数 $thx_beta_column_loop 6 ではない場合に ループ外のカラム内 <p> justify 打ち消しの mixin を取り込みます

クラス名が長い

css セレクタのクラス名が長いので短縮します 現状はこんな感じですね

 .wp-block-columns.has-2-columns .wp-block-column, 
 .blank-box .wp-block-columns.has-2-columns .wp-block-column {} 

WordPress が指定しているカラム部分の css は詳細度で表記すると 0,3,0 っぽいのでこの様に変更します

 .entry-content .has-2-columns .wp-block-column, 
 .blank-box .has-2-columns .wp-block-column {} 

この変更により 今までは Cocoon ブロックの内外で分けていたループ処理を一つにするという副次効果もありました

更なる短縮化で

 .entry-content .has-2-columns > div, 
 .blank-box .has-2-columns > div {} 

との表記も考えましたが 予期せぬ適用の可能性が0ではないので今回は見送ります

結果とまとめ

結果

 .blank-box .wp-block-columns.has-2-columns .wp-block-column { 
	 margin-right: 36px; 
 } 
 .blank-box .wp-block-columns.has-3-columns .wp-block-column { 
	 margin-right: 45px; 
 } 
 .blank-box .wp-block-columns.has-4-columns .wp-block-column { 
	 margin-right: 48px; 
 } 
 .blank-box .wp-block-columns.has-5-columns .wp-block-column { 
	 margin-right: 54px; 
 } 
 .blank-box .wp-block-columns.has-6-columns .wp-block-column { 
	 margin-right: 50.4px; 
 } 
 .sticky .wp-block-columns.has-2-columns .wp-block-column { 
	 margin-right: 36px; 
 } 
 .sticky .wp-block-columns.has-3-columns .wp-block-column { 
	 margin-right: 54px; 
 } 
 .sticky .wp-block-columns.has-4-columns .wp-block-column { 
	 margin-right: 36px; 
 } 
 .sticky .wp-block-columns.has-5-columns .wp-block-column { 
	 margin-right: 45px; 
 } 
 .sticky .wp-block-columns.has-6-columns .wp-block-column { 
	 margin-right: 43.2px; 
 } 

以前は上記の様だった記述内容が

 .blank-box .has-2-columns .wp-block-column { 
	 margin-right: 36px; 
 } 
 .blank-box .has-3-columns .wp-block-column { 
	 margin-right: 45px; 
 } 
 .sticky .has-2-columns .wp-block-column { 
	 margin-right: 36px; 
 } 
 .sticky .has-3-columns .wp-block-column { 
	 margin-right: 54px; 
 } 

ここまでスリムになりました

まとめ

その⑩までき てしまっ たこのテーマですが 今回で一応の完結とします

padding の計算から始まり 無駄になり カラム間の計算を行い css をまとめてみたものの 無駄になり 未熟者ならではのトライ&エラーとなりました

しかし 勉強になることも多くとても楽しい取り組みでした

現状の css では記事の内容によって AMP に通ったり通らなかったりなので テーマ内で完結できる様に今後も工夫していきたいと思います

コメント