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

スポンサードリンク

お陰様で最近はFacebook、Twitter共に記事への反応を頻繁に頂けるようになり、サイトの更新のモチベーション維持の原動力となっています、皆様ありがとうございます。

そして満を持して(大袈裟ですけど)ネットの反応をコメントとして表示してくれる便利なプラグイン「Feedback Champuru」を当サイトも導入致しました!

 

今回はこの「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(); */?-->
この記事をサイトに埋め込む
スポンサードリンク
この記事をシェアする
RSSリーダーに登録する

 RSSリーダーで購読する

Facebookの反応