コメント欄（枠線を使って）

いよいよコメント欄です

最初は画像を使わないでＣＳＳで線だけでやってみます

（IE7・IE8で見たときは角が丸くなりません）

ＣＳＳです

/*コメント欄を枠線で*/
.commentArea{
padding:0;
border:none;
}
.commentArea .skinBorderHr{
border:none;
}
.skinBorderList li {
margin-bottom:10px;/*コメントとコメントのスキマ*/
border:none;
}
.blogComment{/*ゲストさま*/
border:3px solid #ff00ff;/*枠　太さ 線種 線色*/
background-color:#ffffff;/*枠内の背景色*/
color:#ff00ff;/*文字色*/
border-radius:15px;/*角丸 50px以下　Ａ*/
}
.ownerComment{/*管理人*/
border:3px solid #66ffff;/*枠　太さ 線種 線色*/
background-color:#f4ffff;/*枠内の背景色*/
color:#333333;/*文字色*/
}

Ａ　border-radiusの数字


50pxをこえると文字に重なってしまいます・・・

文字の表示位置を変更すれば50pxオーバーでも可能ですが・・・
まっ・・そこまで説明しなくても・・・？

角を丸くしたくない場合（四角がいい！って方は）・・・

border-radius:15px;/*角丸 50px以下　Ａ*/
この1行を削除します

コメントの文字色を変えるには

.commentTitle{/*コメントタイトルの文字色*/
color:#ff00ff;/*文字色*/
}

※CSS3のborder-radiusを使っていますので未対応のIE7やIE8で見たときには四角のままです

枠線の中に背景画像を使うには　コメント欄（枠線と背景画像を使って）