sampling.sys

【ヤプログ：スキンカスタマイズ11】

スタイルシートについて（ある範囲の、背景色・画像を変更したい）

サンプルは、一番外側のテーブルに背景を設定する場合になります↓
→　対応箇所はブログ説明文（.range）になります。
→　デフォルトのスタイルシートでは28-39行あたり？

.range { 
    ～省略～
    background-color: #ff0;
    background-image: url(http://～/○○.gif);
    background-repeat: no-repeat;
    background-position: left top;
    border:1px #ff0 solid; }

↓こういう風に、まとめて書くことも。

.range { 
    ～省略～
    background: #ff0 url(http://～/○○.gif) no-repeat left top;
}

---

■　背景色を変えたい
■　背景に画像を使いたい
■　画像の繰り返し指定、位置指定がしたい
■　周りの線の色やスタイルを変えたい、消したい。
■　背景画像を固定する
■　全体の背景を画像にする
■　記事の背景を画像にする
■　記事のタイトル部分を画像にする

（下の「続きを読む」を押してから、リンクを押してください；）

---

■　背景色を変えたい

■　背景に画像を使いたい

■　画像の繰り返し指定、位置指定がしたい

　　　repeat　→通常どおり、全方向に繰り返す（指定しないのと同じ） 　　　no-repeat　→繰り返さない（1つだけ表示） 　　　repeat-x　→横方向にのみ、並べる 　　　repeat-y　→縦方向にのみ、並べる

　　　left、center、right　→横方向の位置（それぞれ左端、中央、右端）
　　　top、center、bottom　→縦方向の位置（それぞれ上端、中央、下端）
　　　ほかにも30%とかのパーセントでの指定もできる。

■　周りの線の色やスタイルを変えたい、消したい。

　　　線種に付いては線のスタイルについて【No.24】をどぞ。

■　背景画像を固定する

　　　scroll　→規定値。スクロールバーと一緒に壁紙も動く。
　　　fixed　→固定。

---

■　全体の背景を画像にする

スタイルシートに

body {
    background-color: #○○;  /* 壁紙と似た色が良い */
    background-image: url(http://～/○○.gif);
    background-repeat: no-repeat;  /* 必要なら */
    background-position: center;  /* 必要なら */
    background-attachment: fixed;  /* 必要なら */
}

のようにします。

■　記事の背景を画像にする

.entry{ } （92～100行付近）に、上記と同様のスタイルを書き足す

.entry {
    background-color: #○○;
    background-image: url(http://～/○○.gif);
    background-repeat: no-repeat;  /* 必要なら */
    background-position: center;  /* 必要なら */
    background-attachment: fixed;  /* 必要なら */
}

※　全体の背景を指定し、かつ外側のtableの中もその背景をつかう場合
.range{ }の中の
background-color: #○○;を消す。
body{ }は↑を参考。

※　記事部分の背景にまでは、画像を使わない場合
.entryに background-color: #○○;
を足す。
body{ }、.range{ }は、↑を参考。

■　記事のタイトル部分を画像にする
.entry_title{ } （102～115行付近）に、上記と同様のスタイルを書き足す

.entry_title {
    background-color: #○○;
    background-image: url(http://～/○○.gif);
    background-repeat: no-repeat;  /* 必要なら */
    background-position: center;  /* 必要なら */
    background-attachment: fixed;  /* 必要なら */
}