Blogger:コメント入力欄を初期状態では非表示にしておき、「コメントを投稿」をクリックしたら表示するようにする

2014年5月19日月曜日

Blogger:コメント入力欄を初期状態では非表示にしておき、「コメントを投稿」をクリックしたら表示するようにする

イントロダクション

Blogger のコメント入力欄ですが、初期状態では非表示にしておき、「コメントを投稿」をクリックしたら、コメント入力欄を表示するようにしてみました。

なぜそのようなことをしたかというと、基本的にコメントを投稿してくれるような人は閲覧者全体からするとごく少数であり、ほとんどの人にとっては無駄な情報となっているからです。

コメント入力欄

方法

コード

<head>内

テンプレート→HTMLの編集にて、以下のコードを<head>タグ内に記載します。

    <!-- コメント投稿欄表示非表示 START -->
    <script type='text/javascript'>
      //<![CDATA[
      <!--
    function comment_onClick() {

        var obj = document.getElementById("comment-editor");
        if (obj.style.display == "inline") {
            obj.style.display = "none";
        } else {
            obj.style.display = "inline";
        }
    }
      //-->
      //]]>
    </script>
    <!-- コメント投稿欄表示非表示 END -->

このコードは要素がクリックされたときに、コメント入力欄の表示・非表示を切り替えるものです。

なお、コメント入力欄はページのスタイルシートにて display を none にしているので、obj.style.display の初期値は "" です。その点を考慮して条件式を記載しています。

<body>内

<h4 id='comment-post-message'>に対して、onclickイベントを追加します。

<h4 id='comment-post-message' onclick='comment_onClick()'>

テンプレート内には上記の箇所が 2 箇所ありますが、<b:if cond='data:mobile'>の下には追加せず、<b:else/> の下の方にのみ追加しました。
（モバイル版は今回のコードを追加しなくても、標準で今回目的とする動作をしているため。）

スタイルシート

テンプレート→カスタマイズ→上級者向け→CSSを追加　にて以下のスタイルシートを追加します。

/* コメント入力欄の初期値は非表示 */
#comment-editor {
display:none;
}

/* コメント入力欄表示用要素はカーソルを指にする */
#comment-post-message {
cursor:pointer;
}

結果

以下のように、初期状態でコメント入力欄非表示となっており、コメントを投稿をクリックすると、コメント入力欄が表示されるようになりました。

コメント入力欄 - 初期状態

↓

コメント入力欄 - 表示後

これで、ページ表示直後に無駄な情報（コメント入力欄）が表示されるのを防ぐことが出来ました。

コメントを投稿

コメント投稿機能について

Dr.ウーパのコンピュータ備忘録

2014年5月19日月曜日