横浜べいすた。
最近ブログを始めた。
オリジナリティあふれるブログに憧れる。
空条Q太郎。
スタンド使い?
星つながりで、ベイスタの面倒をみる。
コメント欄を装飾しよう [応用]
:「Q太郎さん、コメントを書く欄に 面白い細工したいんだけど、何かあるかなぁ」 :「コメント欄・・・だと。 良いか、まず何をやりたいかを考えるんだ。 次には基礎を思い出せ。 基礎はもう分かるだろ」 :「はい、『フォント』・『背景』・『ボーダー』ですよね」 :「Exactru(その通りだ)」 :「これが初期状態のコメント欄だね 見てるみんな文字を入力してみてよ」 :「じゃあ次は、全要素を使って コメント欄を装飾してみようかな。 えーっと、フォントは『太さ』と『種類』と『斜体』と『色』と『大きさ』で 背景は『背景色』と『背景画像』で ボーダーは『色』と『幅』と『線の種類』だったね そうすると、CSS書く場所はコメント欄だから・・・ あっ、ここだね、#comment-write textareaっと」 #comment-write textarea { height:150px; font-weigth:700; font-family:'MS 明朝'; 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; } :「こんな感じでどうだ!!! ちゃんと右下にはワンポイントを入れてみましたよ、Q太郎さん。 見てるみんな、こっちにも文字を入力して 違いを体験してちょうだい」 :「なかなか、いいぞ。 一応補足しておく。 ベイスタは背景に背景色「黒」を使用したが 以前やったように背景画像を使用することも可能だ。 その時のCSSの記述は #comment-weite textarea{ ・ backgrond:url(/-----/) no-repeat; }が基本となるが コメント欄の大きさと画像によっては 入り切らなかったり、足りないこともあるだろう。 なので 1.画像が小さい時・・・・no-repeatをrepeatに変更 2.画像が大きい時・・・・ ①画像が切れてもかまわない時・・・・何もしない ②画像が切れるのが嫌な時・・・・・・・hetight,widthの設定を変える。 と、まぁこんなところだ」 :「はい、理解可能です。 なんか応用って言ってもほとんど基礎と変わりありませんね」