Cocoon コメント欄のデザインをカスタマイズする方法（枠、色、文字の変更）と、デザインサンプル

Cocoonのコメント欄（ボタンと入力欄）のデザインをカスタマイズする方法と、デザインサンプルを紹介します。

コメント送信ボタン・コメント入力欄の色や文字サイズを変更することができます。

編集するのは、スタイルシート（CSS）のみです。

Cocoonのコメント欄のデザインをカスタマイズする方法

デフォルトのコメント欄

私はCocoonのコメントタイプ「シンプルスレッド」を利用しています。
コメントタイプはWordpress管理画面左側の[Cocoon設定]-[Cocoon設定]-[コメント]タブで変更できます。

コメント欄はコメント入力欄とコメント送信ボタンの2つのパーツで構成されています。
以下でそれぞれのカスタマイズ方法について説明します。

コメント入力欄をカスタマイズする

コメント入力欄をカスタマイズする場合は、主に「#commentform .comment-form-comment #comment」というセレクタを用います。

▷背景色

#commentform .comment-form-comment #comment{
 background-color:#ddd;
}

「background-color」で色を指定すると、入力欄の背景色を変更することができます。

▷枠線

#commentform .comment-form-comment #comment{
 border:none
}

「border」で枠線の設定をすることができます。

コメント送信ボタンをカスタマイズする

コメント送信ボタンをカスタマイズする場合は、主に「#commentform .form-submit input[type=’submit’]」というセレクタを用います。

▷枠線

#commentform .form-submit input[type='submit']{
 border:none
}

「border」で枠線の設定をすることができます。

▷背景色

#commentform .form-submit input[type='submit']{
 background-color:#ece8d0;
}

「background-color」で色を指定すると、コメント送信ボタンの背景色を変更することができます。

▷フォント

#commentform .form-submit input[type='submit']{
 font-family:serif;
}

「font-family」でフォントを指定すると、コメント送信ボタンのフォントを変更することができます。

▷文字色：color
▷文字サイズ：font-size
▷文字の太さ：font-weight

コメント欄のデザインサンプル

デザインサンプルです。
コピペOKなのでぜひ使ってみてください。どれもシンプルなので、ブログに合わせて色を変えるだけで雰囲気が変わると思います。

コメント送信ボタンはマウスホバー時に薄くなるようにしてあります。

１．枠なしグレー

#commentform .comment-form-comment #comment{
 background-color:#f9f9f9;
 border:none;
}
#commentform .form-submit input[type='submit']{
 border:none;
 background-color:#eee; 
 width: 60%;
 padding: 1.2em 1em;
}
#commentform .form-submit{
 text-align:center;
}
#commentform .form-submit input[type='submit']:hover{
 opacity:0.7;
}

２．枠線ブラック＋ボタンではなく下線

#commentform .comment-form-comment #comment{
 border: 1px solid #333;
 border-radius: 0;
}
#commentform .form-submit input[type='submit']{
 border: none;
 background-color: #fff;
 text-decoration: underline;
 text-align: left;
}
#commentform .form-submit input[type='submit']:hover{
opacity:0.7;
}

３．枠線もボタンもグレー

#commentform .comment-form-comment #comment{
 border: 3px solid #eee;
}
#commentform .form-submit input[type='submit']{
 border: none;
 background-color: #eee;
 font-style: italic;
}
#commentform .form-submit input[type='submit']:hover{
opacity:0.7;
}

さいごに

コメント欄はカスタマイズしても目立たない場所ですが、他も色々やっているのでついでにやってみました。
他のCocoonカスタマイズ記事も読んでみてください。