2006年4月 6日

最近のコメントのツールチップにコメント内容を表示する

April 6,2006 2:00 AM
Tag:[, ]
Permalink

当サイトではサイドバーの「Recent Comments(最近のコメント)」の各コメントにマウスをポイントすると、コメントの内容を表示するようにしています(下のスクリーンショット)。エントリー・アーカイブにジャンプせずに頂いたコメントの内容を確認したいためで、かなり重宝しています。

trimj2_to追加

ということで、以下カスタマイズ方法です。

1.アンカータグの title 属性に MTCommentBody を付与

公開テンプレートの「最近のコメント」を例に設定例を示します。

<!-- 最近のコメント開始 -->
<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 属性を、下記のように青色の内容に変更します。

title="<$MTCommentBody remove_html="1" encode_html="1" strip_linefeeds="1" trimj2_to="100"$>"

MTCommentBody にはいくつかの属性を付与しています(その内のいくつかは必須です)。それらの属性がどのような効果があるかを、以下のコメントを例に順を追って説明します。

Movable Type 3.2のリリースに伴い、当サイトでも3.2対応のテンプレートを公開致します。
 
今回はこれまでに公開してきた<a href="http://www.koikikukan.com/template.php">テンプレート</a>を元に、3.2のデフォルトテンプレートの構造を一部取り入れて全面的に修正致しました。CSSも見直しを行い、これまでの経験(といっても1年)を活かして多少スッキリしたものになったと思います。
デザインはこれまでのものと変わりませんが、3.2のデフォルトテンプレートに合わせて全体の配色を濃くしました。

2.<$MTCommentBody$> だけの場合

MTCommentBody に属性を付与しない場合、再構築で生成される title 属性の内容は下記のようになります。

title="<p>Movable Type 3.2のリリースに伴い、当サイトでも3.2対応のテンプレートを公開致します。</p>
 
<p>今回はこれまでに公開してきた<a href="http://www.koikikukan.com/template.php" rel="nofollow">テンプレート</a>を元に、3.2のデフォルトテンプレートの構造を一部取り入れて全面的に修正致しました。CSSも見直しを行い、これまでの経験(といっても1年)を活かして多少スッキリしたものになったと思います。<br />
デザインはこれまでのものと変わりませんが、3.2のデフォルトテンプレートに合わせて全体の配色を濃くしました。<br />
</p>"
属性なしの場合これがHTMLとしてページに表示されると、スクリーンショットのように全く期待しない結果となります。コメントの内容がツールチップとして表示されないのは、コメント内に記述されたアンカータグが干渉してしまっているためです。

3.remove_html="1" を追加

ということで、まずコメントに記述された html タグを取り除く必要があります。これには remove_html="1" を使用します。この属性を用いることでHTMLタグは全て除去されます。
これで下のスクリーンショットのように改善され、ツールチップとして表示されるようになりました。

remove_html追加

4.strip_linefeeds="1" を追加

ツールチップには(私にとっては)不要な改行や空行が含まれています。これを除去するために strip_linefeeds="1" を追加します。この属性を用いることで、テキストから改行コード(キャリッジ・リターンおよびライン・フィード)が除去されます。
これで下のスクリーンショットのように全ての内容がまとまって表示されるようになります。

strip_linefeeds追加

5.encode_html="1" を追加

サンプルのコメントには現れていませんが、例えばコメントに「&」が含まれている場合、valid な HTML になりませんのでHTMLエンコードを行って「&amp;」に変換する必要があります。そのために encode_html="1" を与えます。また「<」や「>」もエンコードしてくれます(HTMLタグについては先の remove_html 属性で除去しているのでここでは対象外となりますが、それ以外で用いられている「<」や「>」をエンコードします。

6.trimj2_to="xxx" を追加

最後に、必要に応じて表示する文字数を決定します。ここでは表示文字数を制限するプラグインを利用しています(下記のいずれか)。

いずれかのエントリーで公開されているスクリプトをコピーし、mt-trimj.pl 等の名称で保存します。そしてそれを plugins ディレクトリにアップロードすれば trimj_to または trimj2_to 属性が使えるようになります。サンプルでは 100 文字でトリミングしました。
全ての設定を終えると冒頭のスクリーンショットと同じな表示になります。

trimj2_to追加
Comments [18] | Trackbacks [5]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3