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なのでぜひ使ってみてください。どれもシンプルなので、ブログに合わせて色を変えるだけで雰囲気が変わると思います。

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

1.枠なしグレー

#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;
}

2.枠線ブラック+ボタンではなく下線

#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;
}

3.枠線もボタンもグレー

#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カスタマイズ記事も読んでみてください。

Comments

  1. こんにちは。
    カスタマイズの記事参考にさせて頂いています。ありがとうございます。
    ところで、このコメントを入力するフォーム自体を小さく、上下を狭めて場合はどのようにすれば良いのでしょうか?
    もしご存知でしたら教えて頂けると嬉しいです。
    宜しくお願いします。

    • たかぼうさん
      コメントありがとうございます!

      コメントフォームの縦幅を狭くするには、
      #commentform .comment-form-comment #comment{}
      の中に
      min-height: 0;
      height: 50px;
      のようにコードを追加すれば反映されます。

      試してみてください^^

  2. mikonさん、ありがとうございました。
    スマホで見た時にコメント欄が大きいかなと気になっていました。cssなど分からない初心者なので方法を知らず困っていましたが、大変助かりました。教えて頂けて本当に嬉しいです。

    そして、mikonさん、作ったブログをchromeで見た時とIEとかFirefoxとかブラウザによって見た目(フォントのサイズなど)が微妙に違ってるのですが、これは普通そういうものでなんしょうか?
    見た目を同じように統一させるためには何かをしないといけないのでしょうか?
    すみません。また質問してしまいましたw

    • たかぼうさん
      お役に立ててよかったです!
      ブラウザによって対応しているCSSやフォントに違いがあるので、微妙に表示が変わってしまうのかもしれません。私は普段Chromeしか使っていないので気にしていませんが笑

タイトルとURLをコピーしました