以前からコメント部分が読みにくいなぁ、と思っていたので、ちょっと読みやすく改造してみました。
コメントがどこからはじまってどこで終わるかをわかりやすくするため、コメント同士の感覚をあけ、タイトルに色をつけることに。
ついでに、ひとかたまりだとわかりやすくするため、左側に細いラインを引くことにしました。
コメント関係の指定はこんな具合。
太字部分は新規につけたした部分です。
/* ----------------------- footArea ----------------------- */
/* -------------- font-information -------------- */
.each_comment {
margin-bottom: 20px; ←次のコメントとの間隔
border-left: 1px solid #ffdddd; ←コメントの左側のライン
}
#comment_module .label {
color: #660000; ←文字色
font-weight: bold;
background: #ffdddd; ←背景色
}
.comment_body { ←このクラスの指定をつけたし
padding-left: 3px; ←コメント文章の左の余白
padding-right: 3px; ←コメント文章の右の余白
}
.comment_footer {
margin-top: 5px;
padding-top: 5px;
border-top: 1px dashed #996666; ←点線の色
text-align: right; ←右揃いに
}
＊.comment_footer は/*comment_module*/の部分に
#comment_module .comment_footer {
padding-top: 5px;
border-top: 1px solid #666666;
}
と、すでに指定されていますが、これはまるっと削除してしまいます。
最後にいつもどおりプレビューして保存。
＊最初の画面ではコメントを見ることができませんが、コメントを見る画面に移動すればプレビューできます。
これでタイトルに色がつき、フッター部分は右寄せになったので、だいぶメリハリがついて読みやすくなりました。
************************
4月13日追記
「#comment_module」を追加。
こうしないとトラックバックの部分まで影響が出てしまいました･･･。
こまったクラス定義です。