最近のコメントのツールチップにコメント内容を表示する
毎度おなじみ「小粋空間」さまのところで紹介されていた小技をひとつ紹介します。
最近のコメントの投稿者にカーソルを合わせるとコメント内容をツールチップ表示するというものです。
以前、タイトル下の横型カレンダーの日付にカーソルを合わせるとその日の記事一覧をツールチップ表示させるというのがあったと思いますが、その応用です。
以前の記事には図を載せてなかったので分かりづらかったと思いますが、カレンダーのツールチップ表示はこんな感じになります。
これを最近のコメントに同じように適用すると以下のようになります。
MovableTypeで小粋空間さま公開テンプレートを使用している場合のカスタマイズ方法です。
<!-- 最近のコメント開始 --> <div class="sidetitle"> Recent Comments </div>
<div class="side"> <MTEntries recently_commented_on="5"> <a href="<$MTEntryLink$>"><MTEntryTitle></a> <br /> <MTComments lastn="5"> └ <a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>"> <MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br /> </MTComments> </MTEntries> </div> <!-- 最近のコメント終了 -->
上記の赤字の部分を以下のように変更します。
title="<$MTCommentBody remove_html="1" encode_html="1" strip_linefeeds="1"$>"
この時、概要全文では長過ぎる場合は指定文字数までで切り取る事も出来ます。
これには、プラグインが必要（MT3.2jaなら、標準のトリミング関数trim_toも使えそうでした）で人生迷い箸さまの「日本語トリミングフィルタ（Encodeモジュール版）」をプラグインモジュールとして入れて、以下のように指定します。
title="<$MTCommentBody remove_html="1" encode_html="1" strip_linefeeds="1" trimj_to="280"$>"
280の部分をトリミングしたい文字数（半角文字単位）で指定すればよいです。
細かな関数の意味については、元記事の方で詳細に解説されていますのでご参照願います。
以上は、MovableTypeでのやり方なのですが、要するにコメントへのリンク文(a href=)のtitleにコメント内容を割り当てているだけなので他のブログサービスなどでも応用できると思います。
実際、小粋空間さまでFC2ブログ用テンプレートを公開されていますが、このカスタマイズは既に入っています。他のブログサービスでも参考になればと思います。
