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

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

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

スポンサーリンク

原因は <p> padding

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

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

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

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

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

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

そこで <p> の親要素をスタイル変更します

.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 は文字幅の整数倍になりましたので 単一段落では何の調整をせずともベタ組みが可能です

カラムブロックの場合

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

今回は <p> 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; 
   } 
 } 

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

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

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

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

4つの引数を持つ 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 
       ); 
     } 
   } 
 } 

各メディアクエリ先で設定された変数を元に マージン量を計算します

まとめ

比較的 少量の変更で済んだのですが 苦労した padding 計算が無用になったのは物悲しいですね

次回こそ Cocoon 謹製ボックスでのベタ組み でのベタ組みに 挑戦 調整をしてみたいと思います

見本やソース

コメント