コメント欄の設定を明示する

ココログやブログ人などのTypepad系ブログでは、コメントを書くとき、メールアドレスは必須なのか、タグは使えるのかといった設定がわからなくて不便です。そこで、このブログでは、設定を明示するようにしてみました。

ただし、ここはココログのベーシックコースで、プロコースのようにテンプレートをいじることができないので、いつものようにjavascriptで作ってみました。javascriptなのでOFFの閲覧者には効果がありませんが、ないよりはマシだろうということで。

Firefox 1.0+, InternetExplorer 5.0+, Opera 8.0+で動作確認。

# 古いInternet Explorerなどでは動かないかもしれません。アドバイスいただければ幸いです。

▼設置方法

※ 2006年5月現在、ブログ人ではこのスクリプトは動かないようです。白い猪亭の秋津羽さんがブログ人用スクリプトを公開されていますので、ブログ人の方はそちらからどうぞ。
→白い猪亭　真実のリチャードを探して: ブログ人カスタマイズ7B：コメントの注意書きを表示（変更）

●まず、メモタイプのマイリスト（私リスト）のメモ欄に、以下のコードをコピペしてください。

<script type="text/javascript">
<!--
commentNotice('<div>↓コメント本文でタグの入力はできませんが、改行は自動的に反映されます。また、http://で始まる文はリンクに変換されます。</div><br /><div>※重複トラックバックに対する削除依頼や謝罪は不要ですので、お気遣いなく(^^)</div>');
//
function commentNotice(html) {
  if (!document.getElementById('right')) {
    var tmp = window.onload;
    window.onload = function () {
      write(html);
      if (typeof tmp == 'function') tmp();
    }
  } else {
    write(html);
  }
  function write (html) {
    if (!document.comments_form) return;
    var ref = document.getElementById('comment-regist') ||
                  document.getElementById('bakecookie').parentNode.parentNode;
    if (!ref) return;
    var e= document.createElement('div');
    e.id='comment-notice';
    e.innerHTML = html;
    if (ref.id) {
      ref.appendChild(e);
    } else {
      ref.parentNode.insertBefore(e, ref.nextSibling);
    }
  }
}
//-->
</script>
<style type="text/css">
<!--
#comment-notice {
margin: 5px;
padding: 5px;
line-height:1.2em;
color: red;
font-size: smaller;
}
-->
</style>

●次に、最初の行にある、表示する注釈にあたる部分（commentNotice('〜');の〜の部分）を適当に変更してください。HTMLです。（〜の部分に改行を含むと動作しないようなので、一行で書いてください。）

●あとは、保存して反映させれば終了です。

上手く設置できれば、「コメントを書く」という見出しと「コメント本文」の間の右側に注意書きが表示されるはずです。（このブログのコメント入力欄をご覧下さい）

# 注釈が長い時などは、他の位置の方がいいかもしれませんね。スクリプトをちょこっと変更すれば、他の位置に書き出すことも可能ですので、ご希望の方はお気軽にご要望ください(^^)

▼カスタマイズ

スタイルを変更するには、上記のstyle要素内を編集してください((コメントの注釈部分全体は、"comment-notice"というidが付いたdiv要素で作られます))。

# 例では、マージンが５ピクセル(margin: 5px)、パディングが５ピクセル(padding: 5px)、、行の高さが1.2em（line-height: 1.2em;)文字色が赤(color: green;)、フォントがかなり小さめ(font-size: x-small;)となっています。

☆サイドバーのコンテンツが多い場合、注意書きが表示されるのが遅く感じられるときがあるかもしれません。その場合は、右サイドのできるだけ上部にマイリストを設置してみてください。

▼著作権など

このコードは、適当に編集していただいて結構です。ご自由にお使いください。

----

以上。

▼更新履歴

2007-09-04 7月のバージョンアップに伴うココログの仕様変更に合わせ、注釈部分の例文を変更しました。

2007-04-04 コメントを受け付けないようにしている記事のページでエラーが発生する不具合を修正。

----

▼（余）

以下は、2004-11-28に公開したときの設置方法です。 [deprecated]

※こちらの方法は、左サイドバーでは使えません。

スクリプト本体→commentNotice01a.js

右サイドバーのマイリスト（私リスト）の、テキスト表示にあらかじめ設定してあるメモ欄に、以下のコードを書いて、上記のスクリプト本体を呼び出す形で使用しています。

<script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/commentNotice01a.js"></script>
<script type="text/javascript"><!--
commentNotice('<div style="color:red;font-size:x-small;margin:0px;padding 0px;line-height:1.2em;"><div>←メールアドレスおよびURL欄への記入は任意です（両方もしくはURLだけ記入するとURLだけが公開されます。メアドだけ記入するとメアドが公開されてしまいますので御注意下さい）</div><br /><div>↓コメント本文でタグの入力はできませんが、改行は自動的に反映されます。http://で始まる文はリンクに変換されます。</div></div>');
//--></script>

# ココログでは、上記コードをそのままコピー＆ペーストだけでOKかと思います。他のTypepad系ブログもコピー＆ペーストだけで動作すると思いますが、スクリプト本体をダウンロード＆アップロードした方がココログの状況に左右されなくてよいかもしれません。ダウンロード＆アップロードする場合は、上記コード内の src="〜" の部分も書き換えてください。