kuu♪からのお知らせ

長年公開してきたカスタムスキンへの道ですが、
新しいサイト　Harbot's field内の「ssブログ（so-netブログ）のカスタマイズ方法」　へ引っ越しをします。

徐々に時間をかけて引っ越す予定で、今よりも見やすいサイトに変更しています。

今後ともよろしくお願いいたします。

ヘッダーを透過させよう

【ヘッダーを透過させよう】

ヘッダーの色を白に指定した場合の設定を記述します。

---

①デザイン　→　スキン一覧からヘッダーの色が白のスキンを選択します。
　　（もしくは　スキン管理　→　ヘッダーデザイン　でヘッダーを白に変更）

②自分のカスタムスキンの　/*-----Header-----*/

.sbHeader { padding-top:0px; padding-left:0px; float:right; }

の中に　filter:chroma(color=#ffffff);　を入れる

〔例〕

.sbHeader { filter:chroma(color=#ffffff); padding-top:0px; padding-left:0px; float:right; }

★自分のカスタムスキンのＣＳＳの中に　.sbHeader {　がない方も多いと思います。
　ない方は、　【ヘッダーに画像を入れよう（ＯＯさん部分）】を参考にして　.sbHeader {　に変えてください。

ソネットブログ（so-netblog）：カスタムスキンへの道【目次】へ

タグ：ソネブロ カスタムスキン ヘッダーの透過 ソネットブログ So-netBlog カスタマイズ

ヘッダーに画像を入れよう（ブログトップ部分）

【ヘッダーに画像を入れよう（ブログトップ部分）】　　

ソネブロ新ヘッダー対応版です。

　　　　　　　　　　　　　
　
　
 
変える部分を赤　オレンジで書いています。

---

/*-----Header-----*/　

11/21以前よりカスタムスキンを作っている方は /*-----Header-----*/　に #header {　　があると思います。（これでは反応しないので削除します。） 11/21以降に新しいスキンで作ろうとした方は、ヘッダーを指定する記述がないと思います。

①/*-----Header-----*/に　.sbHeader {　を書き加えます。
②line-height:40px;を足しましょう。（数字は40じゃなくてもいいです。素材にあわせて変えます）

.sbHeader { line-height:40px; padding-left:0px; }

次に

/*-----Header-----*/　

11/21以前よりカスタムスキンを作っている方は /*-----Header-----*/　に #globalMenu{　があると思います。（これでは反応しないので削除します。） 11/21以降に新しいスキンで作ろうとした方は、ヘッダーを指定する記述がないと思います。

①/*-----Header-----*/　に　.sbMenuR{　を書き加えます。
②入れたい画像を差し替えましょう入れましょう。
　background:url(/blog/_images/blog/_7b3/*****/1234567.gif) no-repeat  right center;　　のrightは右詰め　centerは上下の真ん中揃えを意味します。
　任意で変えてｏｋです。

.sbMenuR{ background:url(/blog/_images/blog/_7b3/*****/1234567.gif) no-repeat  right center; float:right; }

〔記述例〕　/*-----Header-----*/　

/*-----Header-----*/ html, body { scrollbar-track-color: #FF0000; scrollbar-face-color: #2E4F22; scrollbar-shadow-color: #FF0000; scrollbar-darkshadow-color: #2E4F22; scrollbar-highlight-color: #2E4F22; scrollbar-3dlight-color: #2E4F22; scrollbar-arrow-color: #FFFFFF; } .sbHeader { line-height:40px; padding-top:0px; padding-left:20px; } #sbHeader p { } .sbMenuL{ background:url(/blog/_images/blog/_7b3/*****/1234567.gif) no-repeat  right center; float:left; } .sbMenuR{ background:url(/blog/_images/blog/_7b3/*****/1234567.gif)  no-repeat  right center; float:right; } #banner { height:210px; padding:0 20px; background:url(/blog/_images/blog/_7b3/*****/1234567.gif)  no-repeat center bottom; clear:both; } #banner h1{ margin:0; padding:50px 0 25px 0; font-size:x-large; } #lead{ margin:0; }

 ☆カスタムスキンのためのミニミニ素材を配布しています。
よろしければお使いください。
もちろんご自分の好きな絵でもＯＫです。

ソネットブログ（so-netblog）：カスタムスキンへの道【目次】へ

タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン カスタマイズ ヘッダーに画像を入れる

ヘッダーに画像を入れよう（ＯＯさん部分）

【ヘッダーに画像を入れよう（ＯＯさん部分）】　　

ソネブロ新ヘッダー対応版です。

　　　　　　　　　　　　　　　
　　　　　　　　　　　

 

変える部分を赤　オレンジで書いています。

---

/*-----Header-----*/　

11/21以前よりカスタムスキンを作っている方は /*-----Header-----*/　に #header {　　があると思います。（これでは反応しないので削除します。） 11/21以降に新しいスキンで作ろうとした方は、ヘッダーを指定する記述がないと思います。

①/*-----Header-----*/に　.sbHeader {　を書き加えます。
②line-height:40px;を足しましょう。（数字は40じゃなくてもいいです。素材にあわせて変えます）
③padding-left:0px;の数字を変えるとＯＯさんの位置がずれます。

.sbHeader { line-height:40px; padding-left:0px; }

次に

/*-----Header-----*/　

11/21以前よりカスタムスキンを作っている方は /*-----Header-----*/　に #memberMenu{　と　.menuDecoration{　があると思います。（これでは反応しないので削除します。） 11/21以降に新しいスキンで作ろうとした方は、ヘッダーを指定する記述がないと思います。

①/*-----Header-----*/　に　.sbMenuL{　を書き加えます。
②入れたい画像を差し替えましょう入れましょう。
　background:url(/blog/_images/blog/_7b3/*****/1234567.gif) no-repeat  right center;　　のrightは右詰め　centerは上下の真ん中揃えを意味します。
　任意で変えてｏｋです。

.sbMenuL{ background:url(/blog/_images/blog/_7b3/*****/1234567.gif) no-repeat  right center; float:left; }

〔記述例〕
　/*-----Header-----*/　

/*-----Header-----*/ html, body { scrollbar-track-color: #FF0000; scrollbar-face-color: #2E4F22; scrollbar-shadow-color: #FF0000; scrollbar-darkshadow-color: #2E4F22; scrollbar-highlight-color: #2E4F22; scrollbar-3dlight-color: #2E4F22; scrollbar-arrow-color: #FFFFFF; } .sbHeader { line-height:40px; padding-top:0px; padding-left:20px; } #sbHeader p { } .sbMenuL{ background:url(/blog/_images/blog/_7b3/*****/1234567.gif) no-repeat  right center; float:left; } .sbMenuR{ background:url(/blog/_images/blog/_7b3/*****/1234567.gif)  no-repeat  right center; float:right; } #banner { height:210px; padding:0 20px; background:url(/blog/_images/blog/_7b3/*****/1234567.gif)  no-repeat center bottom; clear:both; } #banner h1{ margin:0; padding:50px 0 25px 0; font-size:x-large; } #lead{ margin:0; }

 

☆カスタムスキンのためのミニミニ素材を配布しています。
よろしければお使いください。

ソネットブログ（so-netblog）：カスタムスキンへの道【目次】へ

タグ：ソネブロ ソネットブログ So-netBlog カスタムスキン カスタマイズ ヘッダーに画像を入れる

ありがとうございます♪♪

記事が役に立たれたら、下のバナーの興味があるものをクリックしてもらうとうれしいです。