コメントスタイルの美化 このエントリーを含むはてなブックマーク

晩をかけてテンプレートを変更しました.このテンプレートは元々lifesye.comが作ったWordPress用のテンプレートです,同じ青を基調色ですが,記事のバックグラウンドの色を白色ですので,記事が見やすいです.

一晩でようやく完成して,最後にコメントのスタイルも変更しました,前からずっとコメントスタイルを変えようと思ってましたが,テンプレートを変更したらやるって言って,今回やっとやりました,思ったの円角吹き出し風のスタイルまで作れなくて,四角のを作った.

いよいよ本題に入りますが,今回使ったアイコンは iconfinderから見つかったものです,ぜひお勧めしたいです.

修正したスタイルは以下のものです,もしなかったら,新しく作成してください.

コメント投稿の前にを置く.


#comments h4 {
margin: 1em 0;
padding: 0px 0 0 20px;
font-size: 14px;
background: url(URL/comments.png) no-repeat;
}

コメントしたユーザの名前の前をを置く.

.comment-author {
margin: 0;
padding-left: 20px;
font-size: 14px;
font-weight:bold;
background: url(URL/user_comment.png) no-repeat;
}

吹き出しボックス: comment-top2.gif:

.comment-body {
background: url(URL/comment-top2.gif) no-repeat;
padding-top:10px;
}

.comment-body p {
background:#F4FFF5;
margin: 5px 0 0px 0;
border: 1px solid #00a0e3;
line-height: 1.6em;
padding: 7px 7px 7px 13px;
}


効果なんですが,コメントをのこしてしていただければ見れると思います,もしコメントを残したくないなら,右の最新のコメントのどれをクリックしても見れます.

1 コメント:

chovi さんのコメント...

はじめまして。
こちらの投稿を元に、自分のブログをいじってみました。

また、いろいろと参考にさせていただきます。

コメントを投稿

最新の記事

最新コメント