Wordpress

【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;
}
ABOUT ME
ゼノン / Xenonhyx (管理人)
愛知県出身。趣味は自作PCとゲーム。 略歴:エンジニア兼マーケター→フリーライター→エンジニア

POSTED COMMENT

  1. あき より:

    ためになりました!

  2. 匿名 より:

    参考にさせていただきました!ありがとうございます!

  3. アフロ より:

    rwsgsg

  4. ひろし より:

    ホームページ作成初心者です。たいへん分かりやすい説明で感謝しております。
    加えて申し訳ないのですが、チェックボックス横の、「次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。」

    のテキストを変更する方法はあるでしょうか?いきなりで恐縮なのですが。

    • ゼノン / Xenonhyx (管理人) より:

      非表示にしたいということであれば、Wordpress設定画面で「設定->ディスカッション->他のコメント設定->コメント投稿者が Cookie を保存できるようにする、Cookie オプトイン用チェックボックスを表示します。」のチェックボックスを外せば可能です。

      テキストを編集というのが、その文章自体を編集したいということでしたら、テーマエディターのPHPやサーバー本体のSQLを触らないといけないと思いますので、少し内容が高度になってしまいます。力至らず申し訳ありませんが、すぐに分かることでないためご自身で調べて頂けたらと思います。

  5. 鈴木 より:

    ありがとうございます。
    テストさせてください。

  6. ・テスト より:

    テスト

  7. ゼノン / Xenonhyx (管理人) より:

    テスト | 1階層目

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です