sampling.sys

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

スタイルシートについて（サイドバーのタイトル部分を変える）

※　サンプルは、紺のカスタマイズ可なスキンを元にしてます。
　　他の色の場合は、「#369」の値が変わっています。

※　変更していない部分は省略しています。

線のスタイルについてはこちらをどうぞ。

---

1.　まわりに枠をつける

.side { border: #369 1px solid; }

上に隙間があくのは
img src="/blog/template/17/img/side_title_header.gif"を挿入するようになっているためです；
気になる方は、独自タグをどぞ。

2.　まわりに枠を付ける（改１）

.side { border: #369 1px solid;
    padding: 0px 1px; }

上の隙間が消せないなら、左右にも開けてやれ・・・という意味で、padding: 0px 1px;

3.　まわりに枠を付ける（改２）

.side { border: #369 1px solid; }
.side_title { border-bottom: #369 3px double; }

あるいは、上下にに線をひいてしまう・・・とか

4.　↑と似ているけど、ちょっと違う

.side { border: #369 0x solid; }
.side_title{ color: #369;
    background-color: #b0c4de;
    border-top: #369 3px double;
    border-bottom: #369 3px double; }

タイトル部分だけにしてみたり。

5.　点々で囲んでみる

.side{ border: #369 3px dotted; }
.side_title{ color: #369;
    background-color: #b0c4de; }

6.　点線で区切ってみる

.side{ border: #369 1px solid; }
.side_title{ color: #369;
    background-color: #fff;
    border-bottom: #369 1px dotted; }

---

7.　点々背景

.side{ border: #369 1px solid;
    padding: 0px 1px; }
.side_title{ color: #369;
    background-color: #b0c4de;
    background-image: url(http://～/sk12_7img.gif); }

使用画像→　（8*8　赤い部分が透過してます）

8.　ジグザグしてみる

.side{ border: #369 1px solid;
    padding: 0px 1px;}
.side_title{ color: #369;
    background-color: #b0c4de;
    background-image: url(http://～/sk12_8img.gif);
    background-repeat: repeat-x;
    background-position:  bottom; }

サイドバータイトル部分の高さより小さい画像なので、positionがbottom　かつ　横方向のみの繰り返し指定をしています。

使用画像→　（8*8　赤い部分が透過してます）

9.　左にポイント

.side{ border: #369 1px solid;
    padding: 0px 1px; }
.side_title{ padding: 5px 0px 5px 20px;
    color: #369;
    background-color: #b0c4de;
    background-image: url(http://～/sk12_9img.gif);
    background-repeat: no-repeat;
    background-position:  left; }

サイドバータイトル部分の幅より小さい画像なので、positionがleft　かつ　繰り返しなしの指定をしています。
また＋画像に重ならないように、余分に左paddingをとっています。

使用画像→　（21*21　赤い部分が透過してます）

※　9は、<img>ではなく背景として画像を設置し、アイコンの様に見せかけているだけです。
そのため左右上下に空白部分をわざと作った画像を使用しています。
そのような画像を用意できる場合はしてみてください。
このプラスのようなものですと、左には5px空白をとっています。

しかし素材屋さんのアイコンなど、画像加工のできないものを使用したい場合には、
background-position: 5%;　のように割合を指定してみてください。
（数値はそれぞれのサイドバーの長さによって異なります。　自分で調整してくださいね）　

またその画像の位置にあわせて、.side_titleのpadding（-left）も調整してください。