ssブログのオリジナルデザインのヘッダーをカスタマイズ

この記事には、ssブログ（so-netブログ）のデザインをカスタマイズする方法が記載されています。

※so-netブログの「カスタムスキンへの道」で2008年に公開された記事のため現在の仕様とは異なる場合があります。

ヘッダーに画像を入れよう（ＯＯさん部分）
ヘッダーに画像を入れよう（ブログトップ部分）
ヘッダーを透過させよう

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

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

ヘッダー内（ＯＯさん部分）に画像を入れる方法

①
/*—–Header—–*/　内のタグを確認

11/21以前よりカスタムスキンを作っている方は
/*—–Header—–*/　に下記3点があると思います。
これでは反応しないので削除します。
#header {　　
#memberMenu{
.menuDecoration{

11/21以降に新しいスキンで作ろうとした方は、ヘッダーを指定する記述がないと思います。
②
/*—–Header—–*/に　.sbHeader {　を書き加えます
③
line-height:40px;を足しましょう

※ 数字は40じゃなくてもいいです。素材にあわせて変えてください！
④
padding-left:0px;の数字を変えるとＯＯさんの位置がずれます

/—–Header—–/
.sbHeader {
line-height:40px;
padding-left:0px;
}
⑤
/*—–Header—–*/　に　.sbMenuL{　を書き加えます。
⑥
入れたい画像を差し替えましょう入れましょう

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

rightは右詰め　centerは上下の真ん中揃えを意味します
これは任意で変えてOKです

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

<記述例>

/*-----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;
}

↓　画像の挿入に悩んだ時はこちらを参考にしてください　↓

背景色と画像

使用するタグ個別指定背景色background-color:#FFFFFF;背景画像background-image:url(/_common/skins/209/images/arrowL_small.gif) ;背景画像の表示パターン...

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

ヘッダー内（ブログトップ部分）に画像を入れる方法

①
/*—–Header—–*/　内のタグを確認

11/21以前よりカスタムスキンを作っている方は
/*—–Header—–*/　に下記2点があると思います。
これでは反応しないので削除します。
#header {　　
#globalMenu{

11/21以降に新しいスキンで作ろうとした方は、ヘッダーを指定する記述がないと思います。
②
/*—–Header—–*/に　.sbHeader {　を書き加えます
③
line-height:40px;を足しましょう

※ 数字は40じゃなくてもいいです。素材にあわせて変えてください！
④
padding-left:0px;の数字を変えるとＯＯさんの位置がずれます

/—–Header—–/
.sbHeader {
line-height:40px;
padding-left:0px;
}
⑤
/*—–Header—–*/　に　.sbMenuR{　を書き加えます。
⑥
入れたい画像を差し替えましょう入れましょう

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

rightは右詰め　centerは上下の真ん中揃えを意味します
これは任意で変えてOKです

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

＜記述例＞

/*-----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;
}