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

前回の記事で単一段落のベタ組ができたので、続いてはカラムブロック（Cocoon のカラムレイアウトではなく、ブロックエディタである Gutenberg のカラムブロック）内の段落を処理します。

check

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

カラムブロック
1. まずは２カラムから
2. ３〜６カラムをループ処理で
  1. マージンの設定
  2. ２カラムをベースに変数式化
今回のまとめ
1. scss のループ処理

カラムブロック

まずは２カラムから

早速と手を加えて行きたいところですが、まずその前に。

以前から気になっていたのですが、 Gutenberg のカラムブロックは、カラム間マージンが広すぎると感じていたので、併せてカスタマイズしていこうと思います。

カラム間マージンの見直し

調べてみると片側に 32px ずつ、合わせて 64px のマージンが取られています。これを片側１文字、合わせて２文字くらいになる様に変更します。

パラメータの変数化

 $thx_site_font_size: 18px; 
 $thx_main_column_contents_width: 800px; 
 $thx_beta_column_margin: $thx_site_font_size * 1;

前回の追記となります。

新たに「$thx_beta_column_margin」を１文字分にします。

カラム間マージンの設定

 .wp-block-columns.has-2-columns { 
   .wp-block-column { 
     margin-left: $thx_beta_column_margin; 
     margin-right: $thx_beta_column_margin; 
     &:first-child { 
       margin-left: $thx_beta_column_margin * 0; 
     } 
     &:last-child { 
       margin-right: $thx_beta_column_margin * 0; 
     } 
   } 
 }

カラム内（.has-2-columns）の全ての子要素（.wp-block-column）の左右に１文字分のマージンを設定します。

続いて、最初の子要素の左マージンを０に、最後の子要素の右マージンを０に上書きします。

結果、この様に変更されました。

32px
１文字

続いて、本命の padding 処理になります。

また計算式

 .has-2-columns{ 
   .wp-block-column{ 
     p { 
       $thx_beta_padding: 
         ($thx_main_column_contents_width 
         - ($thx_beta_column_margin * ((2 * 2) - 2)) 
         - ($thx_beta_border_width * (2 * 2)) 
         ) / 2 
         % $thx_site_font_size / 2; 
       padding-left: $thx_beta_padding; 
       padding-right: $thx_beta_padding; 
     } 
   } 
 }

カラムの個数を n とします。

$thx_main_column_contents_width: コンテンツ幅から
- ($thx_beta_column_margin * ((2 * 2) - 2)): カラム間マージンの個数（2n-2）を引きます。
- ($thx_beta_border_width * (2 * 2)): さらに <p> タグに付加される border 幅の個数（2n）を引きます。これが全 <p> タグに収まる文章の幅になります。
/ 2: 文章の幅をカラム数（n）で割り、一つのカラム当たりの文章の幅を求めます。
% $thx_site_font_size: 上で求めた文章の幅をフォントサイズで割った余り（余剰）を求めます。これが「text-align: justify;」で間延びしてしまう幅になります。
/ 2: padding-left 、 padding-right の両端から詰めるので、間延びしてしまう幅を二分します。

この様な結果となります。

padding 処理前
padding 処理後

３〜６カラムをループ処理で

２カラムでのベタ組みが成功したので、残りの３〜６カラムの処理を行います。

マージンの設定

 .wp-block-columns.has-2-columns, 
 .wp-block-columns.has-3-columns, 
 .wp-block-columns.has-4-columns, 
 .wp-block-columns.has-5-columns, 
 .wp-block-columns.has-6-columns { 
   .wp-block-column { 
     margin-left: $thx_beta_column_margin; 
     margin-right: $thx_beta_column_margin; 
     &:first-child { 
       margin-left: $thx_beta_column_margin * 0; 
     } 
     &:last-child { 
       margin-right: $thx_beta_column_margin * 0; 
     } 
   } 
 }

クラス名を追加したのみで、ループ処理は行っていません。

 @for $i from 2 through 6 { 
   .wp-block-columns.has-#{$i}-columns{ 
     .wp-block-column { 
       ... 
     } 
   } 
 }

といった記述も可能ですが、ループ記述による省力化の恩恵が少なく、また書き出される css も読みづらくなってしまったので、この様にしました。

２カラムをベースに変数式化

 @for $i from 2 through 6 { 
   .has-#{$i}-columns{ 
     .wp-block-column{ 
       p { 
         $thx_beta_padding: 
           ($thx_main_column_contents_width 
           - ($thx_beta_column_margin * ((2 * $i) - 2)) 
           - ($thx_beta_border_width * (2 * $i)) 
           ) / $i 
           % $thx_site_font_size / 2; 
         padding-left: $thx_beta_padding; 
         padding-right: $thx_beta_padding; 
       } 
     } 
   } 
 }