So-net無料ブログ作成
メッセージを送る

kuu♪からのお知らせ

■スキンを作るコツは、とにかくプレビューで確認することです。
 数字を替えた! 色を替えた! 画像を替えた!そのたびにプレビュー! で確認!
 そしてこまめに保存してください。

■コメントをたくさんいただいているのですが返信もままならない状況ですのでしばらくの間コメントの受付を停止させていただきます。ごめんなさい。

また、管理人kuuがしばらくソネブロを離れている間に随分仕様の変更等あったみたいですので、当ブログの記述では対応できないものも出ているかもしれません。
ヘッダー・フッダー ブログトップ

ヘッダーを透過させよう [ヘッダー・フッダー]

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

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




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

②自分のカスタムスキンの /*-----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;
}


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


nice!(7)  コメント(0) 
共通テーマ:blog

ヘッダーに画像を入れよう(ブログトップ部分) [ヘッダー・フッダー]

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

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

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



/*-----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は上下の真ん中揃えを意味します。
 任意で変えてokです。

.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;
}


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


nice!(5)  コメント(4) 
共通テーマ:blog

ヘッダーに画像を入れよう(OOさん部分) [ヘッダー・フッダー]

ヘッダーに画像を入れよう(OOさん部分)】  

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

               
           

 

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




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

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

11/21以降に新しいスキンで作ろうとした方は、ヘッダーを指定する記述がないと思います。


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

.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は上下の真ん中揃えを意味します。
 任意で変えてokです。

.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;
}

 

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


nice!(4)  コメント(0) 
共通テーマ:blog
ヘッダー・フッダー ブログトップ

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

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

  

         

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。