このブログのデザインはSimplicityをベースに独自に手を入れています。
( 2017年9月まで、現在は刷新 )

Simplicity
http://wp-simplicity.com/

最近は文字サイズや余白を多くとったデザインのWebサイトが増加しており、いいなと思っていましたので、当ブログも記事タイトルに大きな余白を入れて目立つようにしています。

ところが、タイトルが短く収まらなかった場合に、タイトル表示に改行が発生し残念な感じになっていました。

タイトルが複数行になってしまった残念なケース
タイトルが複数行になってしまった残念なケース

うーん、残念ですね。

前からこれを1行で表示してカッコよく見せたいと思っており、先日ようやく実装しました。
修正後の表示はこちら!

タイトルがを 1 に納めたケース
タイトルがを 1 に納めたケース

1 行表示+簡単なアニメーションです。

カスタマイズ方法

Simplicityを使用している前提です。

WordPressの管理ツールにログインし、外観 > テーマの編集に遷移しfooter-insert.phpを開いて修正します。

WordPress テーマの編集画面
WordPress テーマの編集画面

footer-insert.phpは親テーマ、子テーマSimplicity childの両方に用意されていますが、カスタマイズするならぜひ子テーマを使ってください。

コード

 1<?php if ( is_single() ): ?>
 2<script>
 3(function($) {
 4    // 1. 「改行が発生しない」とみなすheightを設定
 5    var maxHeight = 50; // px
 6    // 2. フォントサイズの調整
 7    // 8ptになっても改行するようなら1行表示を諦める
 8    var fontPt    = 24;
 9    var minFontPt = 8;
10
11    // 3. 子要素をappendしてタイトル文を差し込みなおす
12    var $title    = $('h1.entry-title');
13    var titleText = $title.text();
14
15    $title.text("");
16    $title.append('<div>'+ titleText+ '</div>');
17
18    var $inner = $title.find('div');
19
20    // 4. divにCSSを設定し、いったん非表示
21    $inner
22        .hide()
23        .css({
24            "width"    : "100%",
25            "font-size": fontPt + "pt"
26        });
27
28    // 5. ループ内でフォントサイズを小さくして、改行が発生しているかどうかを調べる
29    while ($inner.height() > maxHeight ) {
30      fontPt--;
31      $inner.css("font-size", fontPt + "pt");
32      if (fontPt <= minFontPt) {
33        break;
34      }
35    }
36
37    // 6. アニメーションさせるための設定
38    $inner.css({
39      "font-size": "1pt",
40      "opacity"  : 0.0,
41    }).show();
42
43    // 7. 1秒かけて文字を出現させる
44    $inner.animate({
45      "font-size": fontPt + "pt",
46      "opacity": 1.0,
47    }, 1000, "swing");
48
49})(jQuery);
50</script>
51<?php endif; ?>
52

解説

  1. maxHeightとして、改行が発生しないheightを設定します。これは直打ちで、、、
  2. fontPtに、最も大きなフォントサイズを設定
  3. h1タグからタイトル文を抜き出して小要素divに差し込みなおす
  4. divに追加のCSSを設定
  5. whileループで、maxHeightをこえない(改行が発生しない)とみられる大きさになるまで、フォントサイズを小さくしてきます
  6. アニメーションのための設定として、要素そのものはshow()して可視化するが、「透明、フォントサイズ1」を指定して画面上で見えない状態とする
  7. アニメーションの実施、animateで1秒かけてフォントサイズと透明度を下げて文字が飛び出る演出を行う

当ブログの実装とちょっとだけ異なり、上記のサンプルは「 修正ファイルは1つだけ 」「 すべてjQueryでやる 」というちょっとだけ無理なりなコードです。
そのため子要素を追加したりと、無駄なことをしていることはご容赦ください。

また、コードの見直しにはCloud9を用いました。
クラウド上で簡単に開発環境を用意できて、使わなくなったら簡単に破棄できます。
改めて使い勝手の良さを感じました。

[IDE]Cloud9で環境構築を簡単に
新さっぽろ IT キャリア研究室

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

西畑一馬
出版社:KADOKAWA/アスキー・メディアワークス  発売日:2013-03-07

Amazonで詳細を見る

jQueryクックブック

jQuery Community Experts
出版社:オライリージャパン  発売日:2010-08-18

Amazonで詳細を見る

この記事の著者 Webrow (うぇぶろう)
Web アプリ開発、 Web 顧問 エンジニア、WordPress サポートいたします。