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

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

check

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

４〜６カラム
1. ループ処理
2. justify の打ち消し
クラス名が長い
結果とまとめ
1. 結果
2. まとめ

４〜６カラム

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

使用頻度はかなり低いと思われるので、大勢に影響なく、カラム部分の 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 {}

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

結果とまとめ

結果

 .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; 
 }