ＣＳＳ コメント欄をなんとかしちゃおう 2
こちらがコメントに背景画像をつけるＣＳＳです
各サイズがどの部分なのかは下の画像と比べて
自分で画像を作った際の参考にして下さい
/*ゲストコメント背景 */
#comment_module .each_comment{/*コメントタイトル部分*/
margin: 0;
padding-bottom:30px;/*コメントとコメントの間*/ ←注１
background: url(上画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#333333;/*←ゲストコメント文字色変更の場合*/
}
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:5px 30px 10px;/*コメント分の上と左右と下の余裕*/ ← １、２、３
background: url(中画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .comment_footer{/*コメントフッター部分*/
margin:0;
padding: 5px 0 15px; ← ４、５
background: url(下画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .label{/* コメントタイトル */
font-weight: bold;
font-size:12px;
padding:15px 0 10px 50px; ← Ａ、Ｂ、Ｃ
}
.comment_footer span.comment_author{/*名前*/
padding-left:40px; ← Ｄ
}
.comment_footer span.comment_date{/*日付*/
padding-left:20px; ← Ｅ
}
#comment_module .comment_footer{/*フッター上の点線を消す*/
border-top:none;
}
.comment_gotoform{/*[コメント記入欄を表示]を消す*/
display:none;
}
※後日、画像の素材と一緒にその画像に合ったCSSも紹介しますので今回は参考程度で・・・・
わかりやすくするため反転させてあります・・・・
注１ コメントとコメントの間隔
注２ のコメントの文章と文章のスキマは・・・・・・
.entry .contents{
line-height:1.5;
}
と、ＣＳＳの最初の方で行間設定がされています
line-height: は行間の値（フォントサイズとスキマの合計）のことで
line-height:1.5; という事は スキマは 0.5
このコメント部分の場合、フォントサイズが 12px ですので スキマは 6px になります
次は名前の前後にワンポイント画像をつけてみます