コメント欄に枠線と背景色をつけるには・・ アメブロ | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。

おはようございます。

三浦春馬です。←ワンパターンヾ(▼ヘ▼;)

ワンタンでございまーすww

渡辺麻友


※CSS編集用デザイン

今回、CSSを使ってコメント欄に枠線と背景色を
つける方法を御案内してみたいと思います。

わてくちめの、実験用のサブブログ、コメント欄
は、初期設定のままだと、このようになってます。

渡辺麻友


訪問者様と運営者:自分の区別がちょっと、
つけずらいですよね・・(ノ_-。)

で、CSSに以下のコードを追記したら、このよ
うになりました。

渡辺麻友


コードは、こちらになります。(↓)

(※CSSに貼り付ける時、末尾:
いちばん下に貼り付けるようにして下さい。)


/*コメント欄に枠線と背景色10-06*/
.commentArea{
padding:2;
border:none;
}
.commentArea .skinBorderHr{
border:none;
}
.skinBorderList li {
margin-bottom:10px;/*コメントとコメントのスキマ*/
border:none;
}
.blogComment{/*訪問者様*/
border:1px solid #ff00ff;/*枠 太さ 線種 線色*/
background-color:#ffffff;/*枠内の背景色*/
color:#ff00ff;/*文字色*/
border-radius:15px;/*●角丸 50px以下 */
}
.ownerComment{/*運営者:自分*/
border:1px solid #66ffff;/*枠 太さ 線種 線色*/
background-color:#f4ffff;/*枠内の背景色*/
color:#333333;/*文字色*/
}

※上のコードの●の箇所の赤字の数値を大きくし
過ぎるとコメント欄内の文章に枠線が被ってしまい
ますので御注意ください。

また、角を丸くしたくない場合は、上のコードの

border-radius:15px;/*●角丸 50px以下 */


を削除して下さい。


枠線の太さや、枠線内の背景色等を御自身のブログ
に合った、お好みのものに変えてみて下さい。

※参考までに・・

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

※残念ながら、ブラウザIE(インターネットエクスプローラ)
ヴァージョン11では、枠線の角を丸くする仕様は反映されず、
角が四角くなってしまいました。
グーグルクローム、ファイヤーフォックス、サファリでは、
しっかり反映されました。


コメント欄が見やすくなると思います。

追記:これのバージョンアップしたものが
こちらに・・2014/10/15

コメント欄の枠に影を付けて立体的に

☆ブィブィ  ('-^*)/


ニャンだ、こりゃ、ちょっと、こりゃ