grace-create

ブログのタイトルが長くなってしまった場合に語尾に三点リーダー(…)を付ける方法

ブログなどのタイトルが長くなってしまい、設定している枠内に文字数が収まりきれなくなる場合があります。
そんな時には、語尾に三点リーダー(…)を付けると『あ、まだ続きがあるんだ…。』ということが読者に伝わります。

CSSの場合

スタイルシートで三点リーダーを付けるには『text-overflow:ellipsis;』を使います。

<h2>じゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつくうねるところにすむところやぶらこうじのぶらこうじぱいぽぱいぽぱいぽのしゅーりんがんしゅーりんがんのぐーりんだいぐーりんだいのぽんぽこぴーのぽんぽこなーのちょうきゅうめいのちょうすけ</h2>
h2 {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

すると、以下のようになります。

じゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつくうねるところにすむところやぶらこうじのぶらこうじぱいぽぱいぽぱいぽのしゅーりんがんしゅーりんがんのぐーりんだいぐーりんだいのぽんぽこぴーのぽんぽこなーのちょうきゅうめいのちょうすけ

残念ながらこの方法には、複数行では対応しきれないという弱点があります。
1行での表現で事足りるのならば、簡単で便利な方法だと思います。

PHP(ワードプレス)の場合

PHPを使えば、行数に関係なく三点リーダーを付けることができます。

<?php
  // 文字数が78文字より多いならば三点リーダーを付ける 
  if( mb_strlen( $post->post_title, 'UTF-8' ) > 78) {
    $title = mb_substr( $post->post_title, 0, 78, 'UTF-8' );
    echo $title.…;

  // 文字数が78文字以下ならば三点リーダーは付けない
  } else {
    echo $post->post_title;
  }
?>

以下のようになると思います。※以下のサンプルでは、実際には制御していません。

じゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつくうねるところにすむところやぶらこうじのぶらこうじぱいぽぱいぽぱ…

jQuery

複数行にも対応しているとのことで、以下のプラグインを使えば簡単そうです。

CSS ellipsis で複数行を省略するjQueryプラグイン

まとめ

WordPressのテーマを作る場合なんかでも、タイトルが長くなることを想定して作らなければいけません。
細かいことなので、つい見落としてしまいがちですが、大切なことなんじゃないかなあ…と、思っています。