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

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

デフォルトのコメント欄

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

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

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

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

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

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

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

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

１．枠なしグレー

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

さいごに