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

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

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

カラムブロック

まずは2カラムから

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

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

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

32pxずつ

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

パラメータの変数化

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

前回の追記となります

新たに $thx_beta_column_margin を1文字分にします

カラム間マージンの設定

 .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 の左右に1文字分のマージンを設定します

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

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

続いて 本命の 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 の両端から詰めるので 間延びしてしまう幅二分します


この様な結果となります

3〜6カラムをループ処理で

2カラムでのベタ組みが成功したので 残りの3〜6カラムの処理を行います

マージンの設定

 .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 も読みづらくなってしまったので この様にしました

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

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

こちらはループ処理になります

1-1-4 n を変数にしただけですね

結果はこちらになります

今回のまとめ

scss のループ処理

scss の便利なトコ ならではの内容となりました

詰まる処 コンテンツ幅と文字サイズさえ判明すれば 処理は可能です

それを踏まえ 次回は コンテンツ幅は 800px の縛りを解き スマホ画面幅での処理を行います

コメント