【JIN】コメント欄をカスタマイズ！コメントに枠、返信コメントを階層表示など

WordPressのテーマ「JIN」のコメント欄が分り辛いのでカスタマイズを行いました。全てJINの子テーマ(jin-child)に記載してください。(JINの親テーマに記載してしまうとテーマがバージョンアップされた際に編集データが消えるので)

面倒なのでやるつもりなかったんですが、当ブログとは違うサイトの方で必要になりましてカスタマイズしました。参考にしてください。

CSSを記述する場所

「外観>テーマエディター>小テーマ(jin-child)>style.css」または「カスタマイズ>追加CSS」に記載してください。場所はどちらでも構いません。

まとめ

全ての文です。特にコメント欄のカスタマイズを行っていなければ、JINであればそのまま使えると思います。ただ、ご自身のサイトに合わせてカラーコードは変更した方が良いと思います。

/*コメント欄編集*/
.comment-body {
	padding: 10px;
	margin-bottom:10px;
	border: 1px solid #a3a3a3;
	border-radius: 8px;
	background: #fcfcfc;
}
.children {
	margin-left:10%;
	font-size:0.9em;
}
.reply a,#submit{
	background:#001256;
}
.reply a:hover,#submit:hover{
	background:#FFBB35;
}
.comment-form-email{
	display:none;
}

各コメントに枠を付ける

各コメントの区切りが分かりづらいので、枠(角丸)をつけて背景色を変更させています。paddingとmargin-bottomは消すと見づらくなります。

.comment-body {
	padding: 10px;
	margin-bottom:10px;
	border: 1px solid #a3a3a3;
	border-radius: 8px;
	background: #fcfcfc;
}

返信コメントの左側に余白

デフォルトのままだとコメントの下に返信が追加されていく方式ですので、返信なのか普通のコメントなのか見分けがつきにくいです。「margin-left:10%」で10%の余白を左側に追加、ついでに返信したコメントは文字が若干小さくなるよう「font-size:0.9em;」を追加してあります。小さくしたくない場合は該当箇所を消してください。

.children {
	margin-left:10%;
	font-size:0.9em;
}

返信・送信のボタン色

デフォルトだと返信・送信のボタン色は灰色になっています。カスタマイズ項目からはカスタマイズできないので、CSSで変更が必要になります。下記コードは紺色からマウスオーバー時に黄色にさせています。

.reply a,#submit{
	background:#001256;
}
.reply a:hover,#submit:hover{
	background:#FFBB35;
}

メールアドレス入力欄を消す

コメント入力時に必要な「メールアドレスの入力欄」を「display:none;」で強制的に非表示にしています。他にもコメント欄の表示したい、非表示にしたいなどありましたら、参考ボックスの中を見てCSSのクラス名を変更してください。

.comment-form-email{
	display:none;
}