指定した文字数以降をカットして「...」をつける方法

Movable Type でブログ記事の上にパンくずリストを表示させるとき、ブログ記事のタイトルが長いと少しうっとうしい気がします。

上の画像は、現在制作中のオリジナルテンプレートのタイトル部分です。デザインセンスが無いせいもありますが、かなりうっとうしいですね。

そこで、指定した文字数以降をカットして「...」をつけるようにカスタマイズしてみました。

ちなみに、8/13現在で使用している vicuna CMS のテンプレートはいじっていないのでご注意を。

このカスタマイズの方法としては、MT のプログラム側にちょこっと手を入れる方法もあるようですが（参考：MT4で、trim_toの制限文字数超えたときだけ"..."を付ける方法。 | 京の路）、今回はテンプレートで実現してみました。しかも簡単です。

今回は、パンくずリストのブログ記事タイトルの「20文字」以降をカットして「...」にしますので、パンくずリスト内のブログ記事タイトルを表示するMTタグの部分をカスタマイズします。

[ブログ記事タイトルを表示するMTタグ]
<$mt:EntryTitle$>

このMTタグで出力される文字列の指定文字数以降をカットするには、グローバルモディファイアである trim_to モディファイアを使用します。

<$mt:EntryTitle trim_to="20"$>

これで「20」文字以降はカットされます。

このままだとただ単にカットされるだけなので、この後ろに「...」を付けます。

<$mt:EntryTitle trim_to="20"$>...

さて、これだと20文字以下の場合でも「...」が表示されてしまうので、20文字を境に条件分岐します。

まず、グローバルモディファイア count_characters を使い、ブログ記事タイトルの文字数をカウントし、それを変数 charaCount に代入します。

<$mt:EntryTitle count_characters="1"$>

この変数 charaCount が20文字を超えるか、20文字以下かで条件分岐します。

<$mt:EntryTitle count_characters="1"$>

 <$mt:EntryTitle trim_to="20"$>...

 <$mt:EntryTitle$>

好みの差はあれど、けっこうすっきりしましたね。

20文字以下の場合はそのまま表示されます。

以上です。

【2008-08-14 追記】

家に帰って『Movable Type 4.2 パーフェクトガイド』を見てたら、もろにこのカスタマイズが載っていました。