前回は line-height と margin との対立で、 <p> タグにネガティブマージンを与える事で決着しました。 終わりの方でも述べましたが、 <p>+<p> などはマージンが０になってしまうので別ルールが必要になります。
が、 かなり地味な作業で面白くないので後回しにして、 今回は line-height とは余り関係のない話をします。
画像などの行取り
投稿に使用する画像のサイズは様々なので、 フツーに貼り付け → 表示しただけでは行取りにはなりません。 確率的には 1/32 くらいです。 （個人の感想です。）
ですので、 貼り付ける際に行取りを意識するか、 表示する際に行取りを意識する必要があります。
では、 どの様な （行取り） サイズに、 どの様な （画像などの） 高さを設定すればよいのかを決めておきます。
行取りの計算方法
改めて、 行取りの計算方法です。
行取りは、 最初の一行は文字サイズの高さのみです。 つまり font-size になります。
そこから一行増える毎に、 行間サイズと文字サイズが追加されます。 つまり line-height が追加されます。
よって行取りの計算式は
行取り ＝ （line-height× 整数） ＋font-size
となります。
高さの定義
行取りは行間のアキを margin で確保します。 よって、 border は行取りの 「内部」 になります。
こうする事で border をどれだけ太らせても行間を確保出来ます。
設定方法
- カスタマイズは自己責任でお願いします。
- 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-size・line-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 倍してから小数部分を四捨五入した後に２倍にします。
そして、 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>は難敵
- 予期せぬ緊急不具合修正
コメント