三浦春馬です。←ワンパターンヾ(▼ヘ▼;)
ワンタンでございまーす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;/*文字色*/
}
.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
⇒コメント欄の枠に影を付けて立体的に
☆ブィブィ ('-^*)/
ニャンだ、こりゃ、ちょっと、こりゃ