So-net無料ブログ作成
<登場人物>
kyara1.png
横浜べいすた。
最近ブログを始めた。
オリジナリティあふれるブログに憧れる。
kyara2.png
空条Q太郎。
スタンド使い?
星つながりで、ベイスタの面倒をみる。
2010年10月22日| 2010年10月26日 |- ブログトップ

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

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

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

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

kyara2.png:「Exactru(その通りだ)」

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


kyara1.png:「じゃあ次は、全要素を使って
コメント欄を装飾してみようかな。
えーっと、フォントは『太さ』と『種類』と『斜体』と『色』と『大きさ』で
背景は『背景色』と『背景画像』で
ボーダーは『色』と『幅』と『線の種類』だったね
そうすると、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;
}

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


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

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

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


2010年10月22日| 2010年10月26日 |- ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。