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

2013年6月13日

Categories | ブログ（WordPress)

今回はワードプレスのコメント欄をカスタマイズしました。

コメント欄の設置方法は、前回の記事「ブログにコメント欄を追加しました」を見てくさい。

さてと、

ｐｈｐはまだまだ初心者ですが、ｈｔｍｌは割りと得意にしてる私です。

デフォルト状態をブラウザの「ページのソース」で表示させ、

どうな感じにコメント欄が生成させたか、取りあえずタグを理解すぅ。

でぇ、イジリたいタグをテーマフォルダ内の「style.css」に書き出し、

こうカスタマイズした。　参考まで

 /*コメント欄のカスタマイズ*/
h3#comments { font-size: 11px;
margin-bottom:20px;
margin-top:30px; }
#comments .navigation {
padding: 0 0 18px 0;
}
.commentlist li.comment {
line-height: 24px;
margin: 0 16px 30px -20px;
padding: 10px 0 0 70px;
background-image:url(images/abt.png);
background-repeat:no-repeat;
background-position:10px 10px;
box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.3);
background-color:#FFFFFF;
list-style: none;
font-size:12px;
}
.comment-author {
float:left;
margin-right:30px;
}
.comment-author cite {
color: #000;
font-style: normal;
font-weight: bold;
}
.comment-meta a:link,
.comment-meta a:visited {
color: #888;
}
.reply {
font-size: 12px;
padding: 0 0 10px 0;
}

実際にコメントされるとこんな感じに表示される。

アバターはフリー素材で拾ってきたものですが

↓必要であればコピペして使ってくさい。

　abt.png　　50×50ピクセル

序にコメントフォームも少しいじりました。

これまた参考まで

/* Comments form */
input[type="submit"] {
color: #333;
}
#respond {
line-height: 24px;
margin: 40px 16px 40px 20px;
padding: 18px;
box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.3);
background-color:#FFFFFF;<br /> }
#respond p {
margin: 0;
}
#respond label {
color: #888;
font-size: 12px;
}
#respond input {
margin: 0 0 12px;
width: 260px;<
}
#respond textarea {
width: 98%;
margin-bottom:12px;
}

こんな感じ