WordPressテーマの作り方 » 見出し行数をカウントするスクリプトを書いてみた

サイトの見出しに画像を使うことってありますよね。でも、見出しが１行のときと、２行以上のときとで行の高さlineheight値を切り替えたいことがあります。

例えば、次のようなケースです。

header_sample_2x

見出しが１行のときは、lineheight=ねこの高さ（文字とねこを高さ中央に揃えるため）
見出しが２行以上のときは、lineheightを詰める（↑の例だと1.2emまで詰めた）

という風にしたい場合に、CSS設定を行数に応じて変えたいところですよね。

そこで、次のようなスクリプトを書いてみました。

mylineheight.js/style.css

$(function($) { // 投稿用スクリプト. 見出しにぬこクラス追加 $(".post-content h3").addClass("cat-header1").wrapInner("<span></span>"); // 行数カウントして、ライン幅を補正する function main() { // ぬこクラス $("div.post-content .cat-header1 span").css("line-height", "1em"); $('div.post-content .cat-header1 span').each(function(index) { var header_height = $(this)[0].offsetHeight; var font_size_str = $(".cat-header1 span").css("font-size"); var rep = parseInt(font_size_str); var font_size = 25; if ( rep && rep !== 0 ) font_size = rep; if ( header_height > font_size+8 ) { //値はCSS設定に合わせる(padding-top+bottom) $(this).css("line-height", "1.2em"); } else { $(this).css("line-height", "50px"); } }); } // windowサイズが変わったらmain()実行 $( window ).resize(function(){ main(); }); // Page表示時にmain()実行 main(); });.cat-header1 span { display: block; background: url(img/cat_stand_1x.png) right bottom no-repeat; background: -webkit-image-set( url(img/cat_stand_1x.png) 1x, url(img/cat_stand_2x.png) 2x ) right bottom no-repeat; padding-right: 50px; padding-bottom: 8px; font-size: 25px; color: #555; } .cat-header1 { background: url(img/green_bar_1x.png) no-repeat bottom left; background: -webkit-image-set( url(img/green_bar_1x.png) 1x, url(img/green_bar_2x.png) 2x ) no-repeat bottom left; background-size: 100% 6px; }

ねこさんと緑のbarの画像を表示するために、spanタグを挿入するなどの余計なコードも入っています（スミマセン）

ポイントとしては、行数計算する前に一旦lineheightを1emに指定してから、offsetHeightで要素の高さを求めます。offsetHeightにはpaddingの値も含まれるので、見出しに指定したpaddingを減算します。すなわち、

element.offsetHeight - (padding-top + padding-bottom) = font-size * line_number

という計算式から、line_number（行数）を求めるという仕組みです。

windowサイズが変わると行数も変わるので、上の処理を再実行するようにしています。

如何でしょうか？もっと良い方法があれば教えてください♪

mylineheight.js/style.css

「WordPress Tips」の記事