このブログのデザインはSimplicityをベースに独自に手を入れています。

Simplicity
http://wp-simplicity.com/

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

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

art-article-title-before

うーん、残念ですね。

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

修正後の表示はこちら!

art-article-title-long

1行表示+簡単なアニメーションです。
動けば少しは素敵かな。。。

カスタマイズ方法

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

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

art-wordpress-in-cloud9

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

コード

<?php if ( is_single() ): ?>
<script>
(function($) {
    // 1. 「改行が発生しない」とみなすheightを設定
    var maxHeight = 50; // px
    // 2. フォントサイズの調整
    // 8ptになっても改行するようなら1行表示を諦める
    var fontPt    = 24;
    var minFontPt = 8;

    // 3. 子要素をappendしてタイトル文を差し込みなおす
    var $title    = $('h1.entry-title');
    var titleText = $title.text();

    $title.text("");
    $title.append('<div>'+ titleText+ '</div>');

    var $inner = $title.find('div');

    // 4. divにCSSを設定し、いったん非表示
    $inner
        .hide()
        .css({
            "width"    : "100%",
            "font-size": fontPt + "pt"
        });

    // 5. ループ内でフォントサイズを小さくして、改行が発生しているかどうかを調べる
    while ($inner.height() > maxHeight ) {
      fontPt--;
      $inner.css("font-size", fontPt + "pt");
      if (fontPt <= minFontPt) {
        break;
      }
    }

    // 6. アニメーションさせるための設定
    $inner.css({
      "font-size": "1pt",
      "opacity"  : 0.0,
    }).show();

    // 7. 1秒かけて文字を出現させる
    $inner.animate({
      "font-size": fontPt + "pt",
      "opacity": 1.0,
    }, 1000, "swing");

})(jQuery);
</script>
<?php endif; ?>

解説

  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で環境構築を簡単に
クラウド上で開発できるCloud9が便利過ぎて感激しましたのでご紹介いたします。 Cloud9 Cloud9を使う...

この記事はtomita@atuwebがおとどけしました。



2015年12月28日:タイトルを「[WordPress][Simplicity]記事タイトルを改行せずに美しく表示する」から変更、文章を少し修正
2015年12月26日:全然動かなかったためコードを修正

スポンサーリンク
ad_336
ad_336
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存