【WordPress】記事への反応をコメントとして表示してくれる「Feedback Champuru」のカスタマイズ

図の①~③の3箇所のカスタムについて順番に書きます。

ちなみにテーマは「twentyeleven」です。

①タイトル部分

「Feedback Champuru」で表示される部分の見た目は、基本的には「comments.php」の各classに準拠していますのでID「#comments」の部分をいじれば色々できます。

タイトルはID「#comments-title」の部分を下記のようにしてみました。

#comments-title {
	margin-left:20px;
	padding:5px;
	font-size:13px;
	font-weight: bold;
	color:#fff;
	background-color : #808080;
	text-align: center;
	vertical-align: top;
	text-shadow:1px 1px 2px #333;
}

 ②サムネイルのサイズ

デフォルトだとサムネイルのサイズが少し大きくてブロックノイズが目立つので、class「.commentlist .avatar」に「width」と「height」の値を指定しています。

あとはちょっと左に寄り過ぎているので「left」の値を調整しました。

.commentlist .avatar {
	width:50px;
	height:50px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 2px #ccc;
	-moz-box-shadow: 0 1px 2px #ccc;
	box-shadow: 0 1px 2px #ccc;
	left: -75px;
	padding: 0;
	position: absolute;
	top: 0;
}

 ③コメント欄全体の縁取り

コメント欄を全体を囲むにはID「#comments」に「border」と「padding」を追加しています。

あとは背景色やらなんやら好きなようにいじればOKかと思います。

#comments{
	width:643px;
	margin-left:20px;
	margin-bottom:10px;
	border: 3px solid #ddd;
	padding:5px;
}

 ちなみに僕は個人的な意見で「匿名コメントは不要」と思っているのでデフォルトのコメント欄は「comments.php」で下記のようにコメントアウトしています。

<!--?php /* 匿名のコメントは不要なのでコメントアウト comment_form(); */?-->