コメントの投稿欄を開閉式にする

コメントの投稿欄をJavascriptで開閉式にしてみました。BloggerとWordPressで動作確認しました。おそらくJavascriptが許可されているブログならどこでも設置可能だと思います。まずはJavascript部分です。

<script language="JavaScript">
<!--
function open_menu(){
var open_key = document.getElementById('open').style.display;
if (open_key == 'none') {
document.getElementById('open').style.display = 'block';
} else {
document.getElementById('open').style.display = 'none';
}
}
// -->
</script>

Bloggerの場合は、サイドバーのガジェットに入れてください。私の使っているテンプレートだと他の場所に書くとクリックイベントが発生しませんでした。WordPressの場合はどこでもよいみたいです。headタグの最後のほうに挿入しました。

次はコメント欄あたりの変更です。

<a href="#" onclick="open_menu();return false;">コメント記入欄（クリックすると開閉します)</a>   
  <div id="open" style="display:none">   
  <!-- ここにコメント投稿欄（コメントフォーム）を書く -->   
  </div>   
<noscript>   
  <div id="open" style="display:block">   
  <!-- ここにコメント投稿欄（コメントフォーム）を書く -->   
  </div>   
</noscript>

このような感じで書くます。最初は閉じた状態で表示されます。Javascriptに対応していない端末ではコメント投稿欄を開くことができませんので、noscriptタグを使って対応します。こうすると開いたコメント投稿欄が表示されます。Javascriptに対応してなくてnoscriptタグをサポートしてない場合は何も表示されないので注意が必要です。

コメント投稿（コメントフォーム）部分ですがBloggerの場合は以下のような部分がそうです。

<div class="comment-form"><a name='comment-form'/>   
    <h3 id="respond_title"><data:postcommentmsg></data:postcommentmsg></h3><p><data:blogcommentmessage></data:blogcommentmessage></p><data:blogteamblogmessage>   
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>   
    <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>   
    <data:post.iframecolorizer>   
</data:post.iframecolorizer></data:blogteamblogmessage></div>

WordPressの場合

WordPressの場合は、テンプレートにもよりますがcomments.phpというファイルの中に含まれてると思います。コメント投稿欄を見極めてはさんでください。

WordPress オリジナルテーマの作り方 | Webクリエイターボックスなどをみればたぶんわかると思います。


【注意】
Javascript対応のブラウザでも、上記のJavascriptが想定どおりに動かない場合はコメント投稿欄を開くことができません。その場合は、コメントを書きたいと思っても書けない状況になります。