Cocoonのコメント周りをカスタマイズしてみました

Cocoonコメントのカスタマイズ Cocoonテーマ

こんにちは。見た目から入るカスタマイズ初心者・カタアヤ です。

Cocoonの見出しカスタマイズ について、検索で来てくれる方がチラホラいらっしゃるようで嬉しいです! 今日は、私がCocoonのコメント欄をカスタマイズしてみた内容をまとめたいと思います。

Cocoonとはわいひら様が作成・公開している超有能なWordPress無料テーマです!↓

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

 

見やすいコメント欄を作りたい!

投稿記事の下に必ず表示されるコメント投稿フォーム…自分の好きなボタンや色に変更したくないですか? Cocoonのデフォルト設定のコメント欄は、正直 白すぎ… シンプルを極めていて、ちょっぴり味気ないです。特に、デフォルトの「コメントを送信」ボタンいかにもデフォルト~!って感じでずっと変更したいと思っていました!

cocoonコメントデフォルト

(↑ デフォルトのままの状態…このボタンを変更したい! ↑)

コメント欄も せっかく「投稿」と「返信」で入れ子構造に表示される機能なのに、このふたつに差が無いのも、少し残念に思っていました。

そこで! これから たくさんコメントを頂いてしまったり、コメント欄が活発になったりする時を夢見て…(?) 見やすく可愛いコメント欄にカスタマイズしておきたいと思います。

 

コメント投稿フォームのカスタマイズ

まずは、全記事の下に表示されるので たくさんの人の目に触れる機会も多い コメント投稿フォームからいじっていきたいと思います。

私の変更箇所は、主に下の3箇所。(余談ですが、近々 このBOXの色↓ もカスタマイズしたいです…

  • コメント入力欄の枠色を変更し、角丸にす
  • 入力フォームを選択した際の色を 好みの色に変更
  • 送信ボタンを好みのデザインに変更
  • 名前入力欄とメールアドレス入力欄を並列化して、スペースを削減する

 

CSSファイルに書き込んだ コメント入力欄のデザイン変更は、以下の通りです。

/**********************************
コメント投稿フォームカスタマイズ
**********************************/
/* コメントフォーム */
#commentform textarea, #commentform input{
border: 1px solid #545454; /* 枠線の色 */
border-radius: 0.3em; /*角丸 */
transition: all .2s ease;
font-size: 80%;
}
/* コメントフォーム選択時 */
#commentform textarea:focus, #commentform input:focus{
outline: none;
border: 2px solid #f6aa55; /* 枠線の色 */
}
/* 送信ボタン */
#commentform #submit{
background-color: #77ccbb; /* 送信ボタンの背景色 */
box-shadow:2px 2px #888888; /* 送信ボタンの影色 */
color: white;
border-radius: 0.5em; /*角丸 */
height: 40px;
width: 20em; /*ボタンの横幅をボタン内の文字数で指定 */
border: none;
padding: 0;
line-height: 40px;
vertical-align: middle;
text-align: center;
transition: all .2s ease;
}
名前入力欄とメールアドレス入力欄を並列化するための指定CSSは、こちら。
/* name,emailの並列化 */
.comment-form-author {
margin: 0px 0px 0px 0px;
float: left;
}
.comment-form-email {
margin: 0px 0px 0px 0px;
float: right;
}
.comment-form-author, .comment-form-email {
width: calc(50% – 5px);
display: inline-block;
}
.comment-form-email+p {
clear: both;
}
/* name,emailの並列化ここまで */

ボタンデザインはみんな大好き「サルワカ」さんから!おしゃれデザインがよりどりみどりです! ↓

CSSで作る!押したくなるボタンデザイン100(Web用)
HTMLとCSSのコピペで使えるボタンデザイン例を100個まとめました。立体的なものや、フラットWebデザインで使えるもの、SNSボタンまで。

入力欄の並列化については「楽しみのない猫」さんの こちらの記事を参考にさせて頂いてます! ↓

wordpressコメント欄周りのカスタマイズ
名前とメールアドレス欄の並列化、ウェブサイト欄の削除、コメント入力欄の場所移動、文面の変更などwordpressのコメント欄周りのカスタマイズ記事です

 

以上のコードを書き込み、CSSファイルを更新して、 kara*poのコメント入力フォームは下のようなデザインになりました!PC画面のキャプチャなので、モバイルなどからご覧の場合は 少し見た目が変わります

cocoonコメントカスタマイズ

ボタンはデフォルトデザインから変更したので、ボタンだとわかりやすいよう 影をつけてみました。ボタンの色や フォーム選択時の色を サイト全体のキーカラーと統一出来て、一体感が出たと思います!

 

コメント欄のカスタマイズ

次に、コメントを頂いた時に表示されるコメント欄をカスタマイズしていきたいと思います。コメント欄は、最初に述べた通り 記事を読んでくれた方が投稿してくれた部分と、それに対する私の返信部分で 見た目に差を作りたいと思います。

今回の変更箇所は、主に2箇所。

  • コメント本文の文字サイズ・行間の調整
  • コメントに対する返信部分を入れ子にして、左側にドットデザインを表示

 

CSSファイルに書き込んだ デザイン変更コードは、以下の通りです。

/**********************************
コメントカスタマイズ
**********************************/
/* コメント本文のサイズ・行間調整 */
.st-comment-content p{
line-height: 1.6;
font-size: 0.8em;
color: #222222;
letter-spacing: 0.08em
}
.comment-author{
font-style: normal; /* 斜体の解除 */
}
/* コメントの上下間隔調整 */
.commets-list{
margin: 0px ;
padding: 8px !important;
border-top: 0px solid #555;
border-bottom: 0px solid #555;
}
/* 入れ子コメントの左に点線を表示 */
.commets-list .children{
margin: 0px 10px 50px 10px;
padding: 0px 5px 0px 15px;
border-left: 4px dotted #f6aa55;
}
.commets-list .comment-body, .commets-list {
margin-bottom: 0.5em; /* コメントの間隔を狭める */
}
#commentform label{
display: inline-block;
}

 

コメント欄デザイン変更のCSSも「リスブロ」さんを参考にさせて頂いています! ↓

【Cocoon】コメント欄を見やすくカスタマイズしてみたよ【CSS公開】
この記事ではCocoonのコメント欄を見やすくカスタマイズするためのCSSを公開しています。

 

正直、いろいろ検索してみたのですが、Cocoonコメントカスタマイズのわかりやすい記事が なかなか見つけられず…。 リスブロさんのデザインを パク… ほぼ踏襲させていただいております!

私の場合、お客様コメントも管理人コメントも アイコンは右側のままで良かったので、リスブロさんのソースから アイコン関連のソースは削除。基本 角丸四角でデザインを統一しているので、アイコンをツイッターのように丸く切り取る関連のソースも削除しました。他、文字サイズや入れ子の間隔などは 私の好みの数値に修正しています。

以上のコードを書き込み、CSSファイルを更新して、kara*poのコメント欄はこのようなデザインになりました!テスト画面で申し訳ありません!笑

 

cocoonコメントテスト

 

入れ子左側のドットの色は、オレンジよりグレーがいいかも…?と悩み中です。後々 変更するかもしれません。

注意して頂きたいのが、画像のように「返信の返信」も同列に表示したい場合は、WordPressの 設定ディスカッション他のコメント設定 で、

□ コメントを「2」階層までのスレッド (入れ子) 形式にする (← カッコ内を必ず2にすること!

の□にチェックを入れる必要があるということ。そうでないと、返信を繰り返すたびに コメント欄の横幅が徐々に狭まっていくことになります…。

 

まとめ

以上が、私のした Cocoonのコメント周りのカスタマイズになります。

日々アップデートされていくCocoonテーマ…。 新機能もどんどん追加され、カスタマイズ初心者の私は 着いていくのに(…というか、もう置いてけぼりかも)必死です! 今後も自分でカスタマイズしたい箇所がたくさんあります。

次回は、先日書いた 膠原病予備軍のことについて 補足記事を書きたいと思っていますが、その後はCocoonのカスタマイズ内容について また更新していく予定です。記事内のマーカー色の変更について 書いてみたいと思っていますので、興味のある方は どうぞチェックしてみてください。

 

コメント