コメント欄（枠線と背景画像を使って）

コメント欄（枠線を使って） この記事の続きです
別の記事にしなくてもよかったのですが・・・

背景画像を作っていたら日にちがたってしまいました・・・

前の記事では枠線の中を背景色で塗りつぶしましたが

今度は背景画像を入れちゃいます


※IE7・IE8では角は丸く見えません

背景画像を用意します

　　

こちらに背景画像があります

素材置き場　背景画像

あまりいいのはありませんが・・・？持ち帰り自由です

像の上にマウスを乗せると下のコメント欄らしきもの？の中の背景が変わります

画像の上で右クリック→名前をつけて保存→ブログの画像フォルダにアップ→ＣＳＳ

まったく前回とＣＳＳはほとんど同じです

背景色が背景画像に変わっただけです

なので詳しくは前の記事 を見てください

ＣＳＳです

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