コメント機能とスタイルシートで遊んでみる｜Materializing [マテリアライジング]

今回は息抜きエントリー。
(特に私は)毎回と言って良い程、何かをしたら何かが悪くなる、というMTデフレスパイラルのような塊で出来てる感じなので、たまにはこう・・・
「やってもなにもおこらないよ！」
みたいな”安心できる”ことをやってみよと思います。

MTIfNonZero

MTには、「それがゼロ(0)かそうでないか」を判断するために「MTIｆNonZero」タグというものがあります。その性質を使ってたまに見掛けるものはこれ。

<MTIfNonZero tag="MTEntryCommentCount">
<MTComments>
<div id="comment-<$MTCommentID$>"">
<$MTCommentBody$>
</div>

<div class="posted">
Posted by <$MTCommentAuthorLink default_name="名無し" spam_protect="1" show_email="0"$> <MTCommentAuthorIdentity> : <$MTCommentDate$>
</div>
</MTComments>

<MTElse>コメントはまだありません</MTElse>
</MTIfNonZero>

上記では『エントリーのコメント数がゼロの時は、「<MTElse>～</MTElse>の箇所を表示」させる』というものです。このサイトでも使ってます。コメントが投稿されたら、「コメントはまだありません」の表記は消えてしまいます。

文字だけ替えるというのもなんなので

上記の性質を用いて画像置換する事にします。とりあえず置換イメージのイメージは左。

これは、見出しHTMLタグであるh2に背景画像を加えてるだけです。便宜上ID割り振ってます。

<h2 id="comments-before">Comments List</h2>

で、そのスタイルシートを、置換前と置換後の2つを用意します。

h2#comments-before {
	background: url(コメントゼロの時に表示させる画像までのパス) no-repeat;
	text-indent: -9999px;
}

h2#comments {
	background: url(コメントがついた時の画像までのパス) no-repeat;
	text-indent: -9999px;
}

それから、先に出した h2 のコードを以下にします。

<h2 id="comments<MTIfNonZero tag="MTEntryCommentCount"><MTElse>-before</MTElse></MTIfNonZero>">Comments List</h2>

これで、コメントがゼロの時はidに「-before」が割り当てられ、そっちのスタイルシートが適用され、コメントがついたら「-before」が無くなって、そのスタイルシートが適用されるようになります。なので、画像置換が行われます。

MTIfNonZeroタグは、他にもトラックバック判定にも使えるので、同様の事は可能です。

あとがき

今回は本当にお遊び変更みたいなものです。それで、私はボヘボヘと弄ってたんですが、終ったあとに致命的な欠陥がある事に気付きました。
それは、このサイトではエントリーの右段上に、コメント欄への移動リンクをつけてるのですが、これが実に、なんと上記で変更した id 指定で飛ぶようにしてたんですね。つまり、この箇所までNonZeroタグをつけなくてはならなくなってしまったというワケです。おまけに、過去のエントリーは「動作が逆」になってしまってます（笑

そして、冒頭で述べた「やってもなにもおこらないよ！」と見事に真逆です。
「やってもやっぱりなにもおこらないワケがなかったよ！」

以上で、本日の「反面教師にしたいあとさきを考えない変更」はおしまいです。
本当にありがとうございました。
_(．．)_