MT4.2でコメントスパム対策機能の一つ、CAPTHA認証ON設定で、文字列画像がでないという相談。
ただし、IE以外のブラウザでは表示されている。
Internet Exsplorerだけが表示されない。
IEのバージョン6、7で確認したところ、確かに表示されていない。
しかし、画像の部分が「×」になっているわけではなく、CAPTHA認証部分がすっぽり抜けおちている。
なので、IEでコメントした人は、「コメントの投稿に失敗しました」とメッセージがでてくるが、原因がわからないままなのだ。
この部分は、Javascriptで吐き出されているため、HTMLソース表示にしても簡単にはわからない。
で、Javascriptの解析ということになるのであるが、ブラウザ依存ということなので、やはりCSSが原因でしょう！？
ということで、いろいろ調べると、「ホームページ運営中の青年の覚書ブログ」さんのMT4.22＋mt.Vicuna 2.2.0でのCAPTCHA認証の不具合を発見。
原因
その１：デフォルトテンプレートではなく、Movable Type 対応テンプレートmt.Vicunaを利用（←このテンプレートなかなかいいですよ、後半に詳細)
その２：CAPTHA認証を行うか判断するJavascript呼び出し 「id="comments-open-captcha"」 の使い方
デフォルトは、このJavascriptを呼び出す際、
<div id="comments-open-captcha"></div>
となっており、divタグを使用。
しかし、このVicunaテンプレートでは、
<p id="comments-open-captcha"></p>
pタグを使用。
この囲みのなかに、JavascriptはCAPTHA認証の画像を表示させるためのHTMLを吐き出すのであるが、このdivとpの違いだけで、IEでは表示しなくなる。
<p><div>・・・・</div></p>
pタグの入れ子で、divタグを囲むとIEは、認識してくれない。
そもそもpタグには、インライン要素、文字のみしか入れることができないのだから、文法？上おかしいのである。
インライン要素の中にブロック要素は記述できない。
IEの方がアバウトなブラウザなのに、なぜか？IEだけが忠実にこの文法を守って無効にしているようだ。
今回は、HTMLとJavascriptの連動ということで判りにくかったこと、HTMLチェックツールでも判別困難な特異な例。
MTでのJavascriptが関係しているテンプレート、「ブログ記事」テンプレート。
コメント周りのカスタマイズには、要注意！
ということで、このタグ周りを改善することで、IEのみ表示されなかった認証文字画像は表示されるようになった。
さて、このMT対応テンプレート、mt.Vicuna。
いろいろなテンプレートが出回っているが、このテンプレートはとてもシンプル。
ここのスゴイところは、MTだけでなく、いろいろなCMSに対応した共通テンプレートをもっているということ。
vicuna.jpでは、さまざまなCMSのパブリッシュするXHTMLソースを、各ツールの特性を保ったまま1つに統一し、製作するWebサイトに合わせてCMSを選択できるようにすることを目指しています。
とのことで、Wordpressなどの対応しているCMSに共通のデザインが設定できる。
さてさて、CAPTHA認証の一件の詳細は、いつもデザインでお世話になっている高橋さんのTAKAHASHI-DESIGN/BLOGからのヘルプネタ、そしてmt.Vicunaテンプレートの情報提供をいただきました(^^)
