今回はワードプレスのコメント欄をカスタマイズしました。
コメント欄の設置方法は、前回の記事「ブログにコメント欄を追加しました」を見てくさい。
さてと、
ｐｈｐはまだまだ初心者ですが、ｈｔｍｌは割りと得意にしてる私です。
デフォルト状態をブラウザの「ページのソース」で表示させ、
どうな感じにコメント欄が生成させたか、取りあえずタグを理解すぅ。
でぇ、イジリたいタグをテーマフォルダ内の「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;
}
こんな感じ
自作テーマなので、仕様の違い？で表示も若干異なるかもしれません。
また、今回確認はＷｉｎＸＰにてブラウザはＦｉｒｅｆｏｘを使用しています。
一部CSS3も使っているのでＩＥ8以下は対応していません。
しまい
