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

大勢に影響ないと思っていた事が、予想以上に気になってしまった、、、

今回は「Cocoon 謹製ボックスでのベタ組み」の予定を変更し、前回の修正となります。

原因は の padding
他のオブジェクトも凹まそう
1. .main
カラムブロックの場合
1. thx_betagumi.scss
2. 各メディアクエリ先
まとめ
1. 見本やソース

原因は の padding

前回の記事作成を終え、 Cocoon 謹製ボックス内のベタ組みに取り組むべく、段落やコードなどを配置していた処、、、なんかズレてる、、、

考えれば当たり前なのですが、 のみに padding を当てているので他のオブジェクトと左右の面つらが合わない、、、 のみ凹んでる、、、返かえす返がえす当たり前なのですが、ここまで気になるとは思ってませんでした。

そこで、前回の内容を早速と訂正する事にします。

check

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

他のオブジェクトも凹まそう

原因は のみに padding を適用している事なので、解決方法としては padding を適用せずに文章の幅を文字幅の整数倍にすれば良さそうです。

そこで、 の親要素をスタイル変更します。

.main

まずはメインコンテンツの大本、「.main」を文字幅の整数倍にします。

 // コンテンツ幅を文字幅の整数倍に
 $thx_main_column_contents_width: 
   $thx_main_column_contents_width 
   - ($thx_main_column_contents_width % $thx_site_font_width) 
 ;

現状のコンテンツ幅から、文字幅で割った余りを予あらかじめ引いておきます。

打ち消し順の優先順位ではちょっと悩みました。まずはフツーに

 .main { 
   width: $thx_main_column_contents_width + 60; 
 }

とした処、「#cocoon-skin-style-inline-css」のインライン css （？）に負けてしまいます。そこで、

 .no-scrollable-main .main { 
   width: $thx_main_column_contents_width + 60; 
 }

とクラスを付加すると、「#cocoon-skin-style-inline-css」には勝ちますが、勝ちすぎてしまい、

 @media screen and (max-width: 1242px) { 
   .main { 
     width: 67%; 
   } 
 }

をも打ち消してしまいます。

そこでメディアクエリを追加して、

 @media screen and (min-width: 1243px) { 
   .no-scrollable-main .main { 
   width: $thx_main_column_contents_width + 60; 
   } 
 }

とする事で、漸ようやく思った挙動になりました。

これで「.main」は文字幅の整数倍になりましたので、単一段落では何の調整をせずともベタ組みが可能です。

カラムブロックの場合

前回はカラムの間に２文字分のマージンを取り、残ったスペース（フォント幅の整数倍にならない余剰の px）を padding で調整していました。

今回は の padding 禁止なので、すべて「.wp-block-column」のマージンを用いて処理を行います。

thx_betagumi.scss

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

各カラムの左マージンを０とし、後述する右マージンのみで処理／表示を行います。

最後の子要素（コラム）には右マージンは必要ないので０とします。

続いて、右マージンの計算方法になります。

 @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 として作成します。

 $contents_width: $thx_main_column_contents_width,

コンテンツ幅の px 数を mixin に渡します。

 $font_width: $thx_site_font_width,

フォント幅の px 数を mixin に渡します。

 $column_count: $thx_beta_column_count,

カラムの数を mixin に渡します。

 $column_margin: $thx_beta_column_margin

カラム間マージンの px 数を mixin に渡します。

呼び出される各メディアクエリ先で、これらの引数を元に計算を行います。計算の順序は次の様になります。

 $columns_margin_total: $column_margin * ($column_count - 1);

カラム間マージンとカラム間の個数を掛け、総マージンに必要な px 数を計算します。

 $text_width: $contents_width - $columns_margin_total;

コンテンツ幅から総マージン量を引き、文章に使用できる px 数を計算します。

 $text_count: $text_width / $font_width;

文章に使用できる px 数をフォント幅で割り、文章に使用できる文字数に変換します。

 $text_width_rem: $text_count % $column_count;

各カラムの文字数を均等にするため、文章に使用できる文字数をカラム数で割り、割り切れない余りの文字数を求めます。

 $text_width_rem: $text_width_rem * $font_width;

余りの文字数を px 数に変換します。

割り切れない余りの文字数文の px 数は、各マージン間に振り分ける事で対処します。結果、予定したカラム間マージンよりも広くなってしまう場合があります。

 $columns_margin_total: $columns_margin_total + $text_width_rem;

マージンに必要な px 数に余りの px 数を加えます。

 $column_margin: $columns_margin_total / ($column_count - 1);

カラム間 1 ヶ所あたりのマージンを求めます。

各メディアクエリ先

 /*  カラムブロック間マージン設定  */ 
 @for $i from 2 through 6 { 
   .wp-block-columns.has-#{$i}-columns{ 
     .wp-block-column{ 
       @include thx-column-margin( 
         $thx_main_column_contents_width, 
         $thx_site_font_width, 
         $i, 
         $thx_beta_column_margin 
       ); 
     } 
   } 
 }