コメント欄を装飾しよう：なじむ　実に！　なじむぞ：SSブログ

	ブログをはじめるログイン

＜登場人物＞

横浜べいすた。
最近ブログを始めた。
オリジナリティあふれるブログに憧れる。

空条Q太郎。
スタンド使い？
星つながりで、ベイスタの面倒をみる。

コメント欄を装飾しよう　[応用] [編集]

：「Ｑ太郎さん、コメントを書く欄に
面白い細工したいんだけど、何かあるかなぁ」

：「コメント欄・・・だと。
良いか、まず何をやりたいかを考えるんだ。
次には基礎を思い出せ。
基礎はもう分かるだろ」

：「はい、『フォント』・『背景』・『ボーダー』ですよね」

：「Exactru(その通りだ)」

：「これが初期状態のコメント欄だね
見てるみんな文字を入力してみてよ」


：｢じゃあ次は、全要素を使って
コメント欄を装飾してみようかな。
えーっと、フォントは『太さ』と『種類』と『斜体』と『色』と『大きさ』で
背景は『背景色』と『背景画像』で
ボーダーは『色』と『幅』と『線の種類』だったね
そうすると、ＣＳＳ書く場所はコメント欄だから・・・
あっ、ここだね、#comment-write textareaっと」

#comment-write textarea {
height:150px;
font-weigth:700;
font-family:'ＭＳ　明朝';
font-style:italic;
color:yellow;
font-size:10pt;
background:black url(/_images/blog/_b9e/dio-the-world21/oraora.gif) no-repeat bottom right;
border:blue 5px dashed;
}

:「こんな感じでどうだ!!!
ちゃんと右下にはワンポイントを入れてみましたよ、Ｑ太郎さん。
見てるみんな、こっちにも文字を入力して
違いを体験してちょうだい」


:「なかなか、いいぞ。
一応補足しておく。
ベイスタは背景に背景色「黒」を使用したが
以前やったように背景画像を使用することも可能だ。
その時のＣＳＳの記述は
#comment-weite textarea{
・
backgrond:url(/-----/) no-repeat;
}が基本となるが
コメント欄の大きさと画像によっては
入り切らなかったり、足りないこともあるだろう。
なので
1.画像が小さい時・・・・no-repeatをrepeatに変更
2.画像が大きい時・・・・
　①画像が切れてもかまわない時・・・・何もしない
　②画像が切れるのが嫌な時・・・・・・・hetight,widthの設定を変える。

と、まぁこんなところだ」

：「はい、理解可能です。
なんか応用って言ってもほとんど基礎と変わりありませんね」