WordPressでInDesignの様な文字組−その③

前回は line-height margin との対立で <p> タグにネガティブマージンを与える事で決着しました 終わりの方でも述べましたが <p>+<p> などはマージンが0になってしまうので別ルールが必要になります

かなり地味な作業で面白くないPV数の見込めない記事になってしまうので後回しにして 今回は line-height とは余り関係のない話をします

スポンサーリンク

画像などの行取り

投稿に使用する画像のサイズは様々なので フツーに貼り付け 表示しただけでは行取りにはなりません 確率的には 1/32 くらいです 個人の感想です。)

ですので 貼り付ける際に行取りを意識するか 表示する際に行取りを意識する必要があります

では どの様な 行取り サイズに どの様な 画像などの 高さを設定すればよいのかを決めておきます

行取りの計算方法

改めて 行取りの計算方法です
行取りは 最初の一行は文字サイズの高さのみです つまり font-size になります
そこから一行増える毎に 行間サイズと文字サイズが追加されます つまり line-height が追加されます

よって行取りの計算式は

行取りの計算式

行取り line-height× 整数 +font-size

となります

高さの定義

行取りは行間のアキを margin で確保します よって border は行取りの 内部 になります

こうする事で border をどれだけ太らせても行間を確保出来ます

設定方法

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

貼り付け時に出来ること

例えば この様な scss を作成すると

 @for $i from 2 through 10 { 
   .lu_#{$i} { 
     height: $line_height_px * ($i - 1) + $font_size; 
   } 
 } 

行取りの高さが取れる css が作成されます

 .lu_2 { 
   height: 50px; 
 } 
 .lu_3 { 
   height: 82px; 
 } 
 .lu_4 { 
   height: 114px; 
 } 
 .lu_5 { 
   height: 146px; 
 } 
 .lu_6 { 
   height: 178px; 
 } 
 .lu_7 { 
   height: 210px; 
 } 
 .lu_8 { 
   height: 242px; 
 } 
 .lu_9 { 
   height: 274px; 
 } 
 .lu_10 { 
   height: 306px; 
 } 

あとは使用する画像の高さに近いクラスを適用すれば行取りは可能です

うん メンドクサイですね

それに レスポンシビリティ的にもよろしくないです

表示する際に出来ること

となると 表示する際に行取りするのがラクで美しいので jQuery の出番です

 /*  行取り  */ 
 jQuery(function(){ 
   var wh = jQuery(window).height(); 
   var fz = parseInt(jQuery('body').css('font-size')); 
   var lh = parseInt(jQuery('body').css('line-height')); 
   var ls = lh - fz; 
   var lineUpOnce = jQuery(` 
     .blogcard-content, 
     .wp-block-spacer, 
     blockquote, 
     pre 
   `); 
   var lineUp = jQuery(` 
     .ad-area, 
     .wp-block-image, 
     .wp-block-gallery, 
     .blogcard-thumbnail, 
     table 
   `); 

   jQuery(window).on('load', function (){ 
     lineUpOnce.each(function () { 
       var oh = jQuery(this).outerHeight(); 
       oh = oh - fz; 
       oh = Math.ceil(oh / lh) * lh; 
       oh = oh + fz; 

       jQuery(this).outerHeight(oh); 
     }); 
   }); 

   jQuery(window).on('scroll', function (){ 
     lineUp.each(function () { 
       var scrollPos = jQuery(window).scrollTop(); 
       var elemOffset = jQuery(this).offset().top; 
       var oh = jQuery(this).outerHeight(); 
       oh = oh - fz; 
       if((oh % lh) != 0){ 
         oh = Math.ceil(oh / lh) * lh; 
         oh = oh + fz; 

         if(scrollPos > elemOffset - wh + (wh * 0 / 1) ){ 
           jQuery(this).outerHeight(oh); 
         } 
       } 
     }); 
   }); 
 }); 

えー 順に見ていきます

サイズなど数値の変数化

 var wh = jQuery(window).height(); 
 var fz = parseInt(jQuery('body').css('font-size')); 
 var lh = parseInt(jQuery('body').css('line-height')); 
 var ls = lh - fz; 

画面サイズ font-sizeline-height 行間サイズを変数化します

ページ読み込み時に処理する要素

 var lineUpOnce = jQuery(` 
   .blogcard-content, 
   .wp-block-spacer, 
   blockquote, 
   pre 
 `); 

行取り対象とする要素を変数化します

こちらの要素はページ読み込みが完了した時点で行取りされます

スクロール時に処理する要素

 var lineUp = jQuery(` 
   .ad-area, 
   .wp-block-image, 
   .wp-block-gallery, 
   .blogcard-thumbnail, 
   table 
 `); 

同じく 行取り対象要素の変数化です

こちらは画面のスクロール時 画面に描画される際に行取りされます

LazyLoad 用ですね

ページ読み込み時の処理

 jQuery(window).on('load', function (){ 
   lineUpOnce.each(function () { 
     var oh = jQuery(this).outerHeight(); 
     oh = oh - fz; 
     oh = Math.ceil(oh / lh) * lh; 
     oh = oh + fz; 

     jQuery(this).outerHeight(oh); 
   }); 
 }); 

ページ読み込み時の行取りです

jQuery(this).outerHeight() で対象要素の outerHeight border まで含めた高さ を取得し これを oh とします

まずは oh から font-size を引きます

この引いた結果が line-height の整数倍になればよいので line-height で割った数値の小数点以下を繰り上げて整数に変換し 改めて line-height を掛けます

最後に font-size を足して 行取り =line-height× 整数 +font-size の完成です

スクロール時の処理

 jQuery(window).on('scroll', function (){ 
   lineUp.each(function () { 
     var scrollPos = jQuery(window).scrollTop(); 
     var elemOffset = jQuery(this).offset().top; 
     var oh = jQuery(this).outerHeight(); 
     oh = oh - fz; 
     if((oh % lh) != 0){ 
       oh = Math.ceil(oh / lh) * lh; 
       oh = oh + fz; 

       if(scrollPos > elemOffset - wh + (wh * 0 / 1) ){ 
         jQuery(this).outerHeight(oh); 
       } 
     } 
   }); 
 }); 

続いては先程の処理に加えてスクロール処理が必要になります

こちらの記事を参考にさせて頂きました

この処理はスクロールの度に発生してしまうので 少しでも処理数を軽減するために行取りが完了した要素 line-height× 整数 +font-size の高さになっている要素 は処理対象外としています

ブログカードに応用

タグやクラスが単一的なものは上記の方法で可能なので 複合物であるブログカードの行取りを行います

ブログカードのタグ構成

Cocoon から出力されるブログカードのタグ構成は 作り方によってラッパーが

ブログカードを包み込む者たち
  • <div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">
  • <figure class="wp-block-embed is-type-rich is-provider-thx-jp>
    • <div class="wp-block-embed__wrapper">
  • <figure class="wp-block-embed">
    • <div class="wp-block-embed__wrapper">

などと変わったりします 中には WordPress が勝手に付けているのもあるかもしれない 本体のタグ構成はこんな感じです

 <a class="blogcard-wrap"> 
   <div class="blogcard"> 
     <figure class="blogcard-thumbnail"><img></figure> 
     <div class="blogcard-content"> 
       <div class="blogcard-title"></div> 
       <div class="blogcard-snipet"></div> 
     </div> 
     <div class="blogcard-footer"> 
       <div class="blogcard-site"> 
         <div class="blogcard-favicon"><img></div> 
         <div class="blogcard-domain"></div> 
       </div> 
       <div class="blogcard-date"><div class="blogcard-post-date"></div></div> 
     </div> 
   </div> 
 </a> 

そして これをもっと整理してしまうとこうなります

 <a class="blogcard-wrap"> 
   <div class="blogcard"> 
     <figure class="blogcard-thumbnail"></figure> 
     <div class="blogcard-content"></div> 
     <div class="blogcard-footer"></div> 
   </div> 
 </a> 

ここで .blogcard-thumbnail .blogcard-content は行取りがされているので 残ったコンテンツの .blogcard-footer と容れ物である .blogcard の高さを line-height の整数倍に調整すれば ブログカード全体が行取りされます

スタイル指定

.blogcard-footer

 $footer_size: round($font_size * 0.4) * 2; 

 .blogcard-footer { 
   margin-top: $line_height_px - $footer_size; 
   padding: 0px; 
   font-size: $footer_size; 
   line-height: 1; 
 } 
 .blogcard-favicon { 
   height: $footer_size; 
   margin-top: 0px; 
   margin-right: $footer_size / 2; 
 } 

まずはフッター部の font-size を設定します

使用しているフォントサイズの 0.8 倍くらいを指定しますが ここも 整数はもちろん 偶数の方が都合が良いので 0.4 倍してから小数部分を四捨五入した後に2倍にします

そして line-height からフッター部のフォントサイズを引いた値を行間として margin-top に指定します

また 併せてファビコン部にも height 指定を行い 高さを揃えます ファビコンのサイズは 16×16px なのでそれよりも小さな height 指定になる場合もありますが 大勢に影響ないと思われます

.blogcard

 .blogcard { 
   padding: $line_height_px / 2 - 1px; 
   padding-top: $line_height_px / 2 - 1px + 3px; 
   padding-bottom: $line_height_px / 2 - 1px - 3px; 
   &::before { 
     top: - $font_size / 2; 
     z-index: 1; 
   } 
 } 
 .blogcard-thumbnail { 
   margin-top: 0px; 
   margin-bottom: $line_height_px - $footer_size; 
 } 

中身は既に行取りが出来ている ハズな ので 容れ物には line-height の半分ずつを padding します その際 border 幅分を引いておきます

top bottom とで 3px 分ずつの足し引きをしていますが ラベル用のスペース確保のためと フッター部の空白部分が目立ってしまうのを緩和するために上下で融通しています

併せて 行取りがされているハズだったサムネイル部に margin-top が設定されているので打ち消します margin-bottom はフッター部の margin-top と相殺されるので必要なさそうですが この指定がないと <figure class="blogcard-thumbnail"> を通り抜けて中身の <img> との margin になる場合があるので指定しておきます

まとめ

今回の様に line-height が余り絡まない案件はスムーズに進みます やっぱ line-height は強敵っすね 響きがラインハルト様っぽいし

今後の予定はこんな感じです

今後の対戦予定
  • カラムやCocoonブロックなどの容れ物勢
  • 強敵line-height勢
    • 中でも<rubyルビ>は難敵なんてき
  • 予期せぬ緊急不具合修正

コメント