ＣＳＳ解説 その１

もうそろそろクリスマスシーズン。

巡回先ブログのテンプレートも徐々にクリスマスに変えられている

「私もクリスマスVersion にしなくっちゃ！」
なんつぅコメントをともっちさんにしたら

「その時に、CSS講座もやってくれると嬉しいなぁ～♪（上目遣い）」
と言われてしまった。


・・・・・・ヤバイ！・・・・・・・・


そこで、ちょっとだけやってみっか！という軽い気持ちで
ＣＳＳ解説を試みます。

そんなテクニックを使ってませんからね。
期待しないでください。

---

まず私がいつも使っているテンプレートは『カスタムメタル』です。

ちなみに手付かずの状態ならばこんな感じです。


それでは、始めましょう！

本日は６つ。
１．メニューの表示をやめる
２．背景画像を設定する
３．エントリー（記事の表示領域）の背景を透明にする
４．背景画像を１つだけ表示する
５．背景画像の位置を指定する
６．背景画像を固定させる

---

１．右メニューの表示をやめる

このデザインだと、両サイドにメニューが入ってしまいます。
私個人の意見としては、右メニューが不要かなと思うので、
右メニューの表示をやめてみたいと思います。

修正前	修正後
/* 右メニュー背景 */ #menu2 { background-color: #d9d9d9; background-image: url(/images/v_e_01rbg.gif); background-repeat: repeat-y; background-attachment: scroll; background-position: center top; width:177px; }	/* 右メニュー背景 */ #menu2 { background-color: #d9d9d9; background-image: url(/images/v_e_01rbg.gif); background-repeat: repeat-y; background-attachment: scroll; background-position: center top; width:177px; display:none; }

修正後の赤太字の１行を追加してみてください。
そうするとこんな感じになります。

---

２．背景画像を設定する

次に背景の設定をしてみます。
今回の背景はこの画像

修正前	修正後
/* ページ全体の背景と文字と余白 */ BODY { margin: 10px 10px 0px 10px; background-color: #ffffff; }	/* ページ全体の背景と文字と余白 */ BODY { margin: 10px 10px 0px 10px; background-color: #ffffff; background-image: url( 画像のＵＲＬ ); }

修正後の赤太字の１行を追加してみてください。
そうするとこんな感じになります。

---

３．エントリー（記事の表示領域）の背景を透明にする

これでは、せっかくのサンタさんの顔が見えません。
そこで記事の表示領域の背景を透明にしてみましょう。

修正前	修正後
/* エントリーの背景 */ .entry { background-image: url(); background-repeat: ; background-position: ; background-color: #ffffff; }	/* エントリーの背景 */ .entry { background-image: url(); background-repeat: ; background-position: ; background-color: ; }

赤太字の部分を削除してください。
ちなみに ＃ｆｆｆｆｆｆ とは 白ですよ。
色は光の三原色（赤緑青）で表され、
２桁ずつそれぞれの色の光の強さを指しているのです。
但し、１６進数で表されてますからご注意を！
（通常、私たちが使っているのは１０進数）

修正すると、こんな感じになります。

---

４．背景画像を１つだけ表示する

ありゃりゃ サンタさんがいっぱい
１人にしてみましょう！

修正前	修正後
/* ページ全体の背景と文字と余白 */ BODY { margin: 10px 10px 0px 10px; background-color: #ffffff; background-image: url( 画像のＵＲＬ ); }	/* ページ全体の背景と文字と余白 */ BODY { margin: 10px 10px 0px 10px; background-color: #ffffff; background-image: url( 画像のＵＲＬ ); background-repeat: no-repeat; }

修正後の赤太字の１行を追加してみてください。
そうするとこんな感じになります。

---

５．背景画像の位置を指定する

ふん！ １人になったけど、隠れちゃった。
私の好みでは右下あたりにいてほしいんだけど・・・

修正前	修正後
/* ページ全体の背景と文字と余白 */ BODY { margin: 10px 10px 0px 10px; background-color: #ffffff; background-image: url( 画像のＵＲＬ ); background-repeat: no-repeat; }	/* ページ全体の背景と文字と余白 */ BODY { margin: 10px 10px 0px 10px; background-color: #ffffff; background-image: url( 画像のＵＲＬ ); background-repeat: no-repeat; background-position: right bottom; }

修正後の赤太字の１行を追加してみてください。
そうするとこんな感じになります。


ありゃ サンタさんがいない！
探す（下へスクロールさせる）と１番下にいた！

---

６．背景画像を固定する

どの部分を表示してもサンタさんは常に右下にいてほしいな！

修正前	修正後
/* ページ全体の背景と文字と余白 */ BODY { margin: 10px 10px 0px 10px; background-color: #ffffff; background-image: url( 画像のＵＲＬ ); background-repeat: no-repeat; background-position: right bottom; }	/* ページ全体の背景と文字と余白 */ BODY { margin: 10px 10px 0px 10px; background-color: #ffffff; background-image: url( 画像のＵＲＬ ); background-repeat: no-repeat; background-position: right bottom; background-attachment:fixed; }

修正後の赤太字の１行を追加してみてください。
そうするとこんな感じになります。

---

---

本日はここまで

比較的英語のような表現が多いので、そんなに難しくないですよ。

解説とともに、テンプレート自体も進化させていきますからネ