ここ2,3日の間、ブログ内のコメント周辺を色々イジくってました。現在のデザインに落ち着いてからほとんど触った事がなく初期のまま放置していたので、さすがに手抜き過ぎるだろうと。コーディングしてる時にいくつか困った事があったので、今後のメンテの際の備忘録も兼ねて紹介しておきます。MT4のコメント入力欄の表示法でお困りの人もいるかもしんないし。

MT4でコメント入力欄を常に表示

まず最初に、MT4の変な仕様で早速つまづき。MT4ではサインインしてない状態でのコメントを許可し、その上サインインも許可している状態では、コメント入力フォームが出ないようになってます。フォームを出すには「匿名でコメントすることもできます。」というリンクをクリックして初めて出現します。今までコメントしてくれてた人はこれに気づいてたと思うけど、なんか親切じゃないなーと前から思っておりました。なので最初からフォームが出てる状態にしたかったんだけど、解決策がなかなか分からない。色々ググっていたところ、小粋空間 – コメント投稿フォームをデフォルトで表示する＆「匿名でコメントすることもできます。」の文言を修正するという記事を発見。記事内で紹介されている通りにJSファイルの1行をコメントアウトする事で解決できました。

入力欄をクリックすると消える文字列

2008/01/24修正

次に行ったのが、入力欄内に文字を記述して、クリックしたら消えるという仕組み。たまに見かけますよね。これが思ってたより簡単・・・と思ってたら意外な落とし穴が。「ウマくいかねーYO！」と言われて別のスクリプトを用意しました。以下がその内容。

Javascript

function ShowFormGuide(obj,GuideSentence) {
// 入力案内を表示
if( obj.value == ” ) {
obj.value = GuideSentence;
obj.style.color = ‘#808080’;
}
}
function HideFormGuide(obj,GuideSentence) {
// 入力案内を消す
if( obj.value == GuideSentence ) {
obj.value=”;
obj.style.color = ‘#000000’;
}
}

HTML

<textarea id="comment-text" name="text" rows="15" cols="40" onfocus="HideFormGuide(this,’コメントをどうぞ’);" onblur="ShowFormGuide(this,’コメントをどうぞ’);" class="comment-text-form">コメントをどうぞ</textarea>

参考にしたのはAll Aboutのこちらの記事。この内容を少し変更してあります。MT4ではデフォルトでJSファイルが独立しているので、「テンプレート＞JavaScript」内に上記記述を追記。HTMLの方はclass指定を追加してありますが、ここはまぁお好みで。これでクリックすると消えて、その後フォーム内からフォーカスが外れた時にも記入内容が消えないようにはできたんだけど、もうひとつの問題が解決できませんでした。コメントする側が「投稿」ボタンを押した場合はオッケーなんだけど、「確認」ボタンを押してプレビューした時に「コメントをどうぞ」の文字列が消えないという症状はそのまま。むーんどうしたもんか。

投稿されたコメントの表示を変更

んで最後に投稿されたコメント類が見やすいようにレイアウト調整。前までのものはMT3.2から引き継いだコードを流用していたため、なぜか投稿者名が２つ表示されてたりしたけど、修正後はそれなりに見やすくなったと思います。まだまだ細かい所があちこち気になったままなんだけど、とりあえずこれで一段落。CMSベースのサイトのデザインいじくるのって、なんつーか色々大変スね。

小粋空間 – コメント投稿フォームをデフォルトで表示する＆「匿名でコメントすることもできます。」の文言を修正する >>