コメント注意書き追加のCSSカスタマイズ

gooブログのコメント投稿フォームで「<」や「>」のような特殊文字をそのまま使うと、「<」と「>」で括られた部分（「<」よりも後ろの部分）が「タグ」として解釈されて、コメント投稿時には削除されてしまうので、投稿者が意図しない内容のコメントになってしまうことがあります。また、誤ってコメントを二重に投稿してしまった場合にブログオーナがどういう対処をするかなど、そのブログとしてのコメントに関する注意書きをコメント投稿フォームの付近に書いておきたいところです。

ということで、「コメント投稿時の注意書き」を追加してみましょう。 カスタムマークの付いているテンプレート（シンプル系18種、カスタム系3種）を使っていればやり方は簡単で、テンプレート編集で「{$comment_module}」のモジュールの近くに「注意書き」を追加するだけです。

ん？テンプレートのHTML編集はgooブログアドバンスじゃないとできないって？でも大丈夫、gooブログ（無料版）でもテンプレートのCSS編集で注意書きの画像を表示する^※ことくらいはできるんです。CSSの変更（追加）箇所は、以下の通りです。

/* コメント、トラックバック背景（エントリー下） */
#comment-trackback {
  margin: 0px 0px 20px 0px;
}

↓

/* コメント、トラックバック背景（エントリー下） */
#comment-trackback {
  margin: 0px 0px 20px 0px;
}

/* エントリー下「コメントを投稿する」の注意書き(追加) */
/* 別ウィンドウ「コメント」「コメントを投稿する」の注意書き(追加) */
#comment-trackback TABLE TABLE .cmText,
TABLE TABLE TABLE .cmText {
  /* 追加する注意書き画像の横幅＋αと高さ＋αの余白を指定する */
  padding: 0px 320px 56px 0px;
  background-image: url("注意書き画像のURL");
  /* 位置は、左から10ピクセル・下寄せ */
  background-position: 10px bottom;
  /* 繰り返しは、繰り返しなし */
  background-repeat: no-repeat;
}

当ブログ（このサンプル）では、（横幅：310px、高さ：52px）とか、もっと簡単なといった注意書き画像を使用しています。

あなたのブログにあわせて適当な注意書き画像を作り、gooブログの「画像フォルダ」にアップロードしたら、その画像のURLを"注意書き画像のURL"の部分に指定してください。また、余白のサイズ（右：320px、下：56px）や指定した位置（ピクセル数やbottom）はあくまでサンプルです。実際に使用される画像の縦横サイズや見栄えを考慮した値を指定してください。

なお、#comment-trackback にも別の注意書きの画像（例えば）を追加することもできますし、#comment-trackback TABLE TABLE .cmText （エントリー下「コメントを投稿する」の注意書き）と TABLE TABLE TABLE .cmText （別ウィンドウ「コメント」「コメントを投稿する」の注意書き）に、別の注意書き画像を指定することもできます。

この方法で変更できるテンプレート（対象テンプレート）は、以下の通り。

• カスタムブルー　同メタル　同フリー
• クリアオレンジ左右　同左　同右
• クリアグレー左右　同左　同右
• クリアパープル左右　同左　同右
• クリアピンク左右　同左　同右
• クリアブルー左右　同左　同右
• クリアホワイト左右　同左　同右
• クリアミント左右　同左　同右（わは）

コメント投稿時の入力方法に気をつけなければならない特殊文字については、「特殊文字のサンプル」の記事をご覧ください。

---

^※ 注意書き画像を表示する
背景画像として注意書き画像を指定するため、ブラウザで画像を表示しないと代替テキストを含めて文字が表示されません。
それでも、多くのブラウザでは注意書き画像が表示されますし、HTML編集ができない「別ウィンドウのコメント投稿フォーム」にも注意書き画像が表示されるというメリットもあります。

ブログ > ブログとは > モジュール一覧 - gooブログ
トラックバック注意書き追加のCSSカスタマイズ 2005年12月22日01:15
特殊文字のサンプル 2005年12月20日23:49
画像URLのコピー 2005年05月12日19:00