本ブログに記載されている内容は、それぞれの記事投稿時点の情報です。
2008年2月27日のSo-net blogサービスリニューアルにより、一部内容に変更がある場合がございます。 恐れ入りますが、ご了承いただけますようお願い申し上げます。
なお、So-net blogの使い方につきましては、下記ページをご参照ください。
⇒So-net blog使い方
スキン編集：ヘッダーにオリジナル画像をいれる [スキンカスタマイズ（初級編）]
新機能「カスタムスキン」を使うと、自分の好きなデザインのブログが
作れます。
ただ、「CSS」ってよくわからない・・・。どうすれば自分の好きにできるの？？
そんな皆さまからの声にお答えして、数回に分けて「So-net blog スキンカスタマイズ」
を連載いたします。
2回目の今回は、ブログの一番目立つ部分「ヘッダーにオリジナル画像をいれる」をお教えいたします。ブログのヘッダー画像を変えるだけでも、自分の個性をアピールできますよ。 今回は、カスタムスキンテンプレート「スタンダード１」を書き換えていきます。
 |
画像をオリジナルにする/ブログタイトル縦位置を調整する |
ヘッダー用に、横幅770ピクセル（縦の高さは任意）の画像を用意します。
※ブログタイトルと紹介文がはいりますので、それを考慮して作成することをお勧めします。
-
管理ページ＞設定＞スキン＞カスタムスキンを開きます。
カスタムスキン画面の「スタンダード１」の下の「スキン作成」をクリックします。
- ヘッダー画像を「参照..」から選択し、「アップロード」ボタンをクリックしアップロードします。アップロードが完了すると、「画像」の欄にヘッダー画像のサムネイルがでます。
- カスタムスキン編集画面が開きます。「#banner {」の下の行にマウスカーソルをあわせてから、「画像」の欄にあるヘッダー画像のサムネイルをクリックしてください。そうすると、以下のような記述が自動的に入ります。
【ヘッダー背景画像指定】
#banner {
background:url(/blog/_images/blog/任意のファイル名) no-repeat;
- カスタムスキン編集画面が開きます。「#banner」の下にある「height:80px;」
の部分を作成した画像の高さにあわせて書き換えます。
【ヘッダー背景画像指定＋高さ指定＋余白指定】
#banner {
background:url(/blog/_images/blog/任意のファイル名) no-repeat;
height:(ヘッダー画像の高さを指定)px;
padding-top:（ブログタイトル上余白の高さを指定）px;
margin-bottom:10px;
clear:both;
}
※「height」＋「padding-top」＝ 作成した画像の縦の高さになります。
- 「保存」ボタンをクリックし、スキンを保存します。
 |
ブログタイトルを見やすく調整 |
- 管理ページ＞設定＞スキン＞カスタムスキンを開きます。
2.で保存したスキンを選択して「編集」をクリックします。
- カスタムスキン編集画面が開きます。まずはブログタイトルの背景色、幅、パディング（ボックス内余白）の調整するために「#banner h1（ブログタイトル）」「#lead（ブログ紹介文）」両方に以下のような記述を加えます。
【#banner h1に下記を追加】
background:（任意のカラーコード）;
width:（ブログタイトルをいれるエリアの幅）px;
margin:0;
padding:（上余白）（右余白）（下余白）（左余白）;
【#leadに下記を追加】
background:（任意のカラーコード）;
width:（ブログタイトルをいれるエリアの幅）px;
padding:（上余白）（右余白）（下余白）（左余白）;
- フォントの色を調整するために「#banner h1 a（ブログタイトル）」「#lead（ブログ紹介文）」両方に以下のような記述を加えます。
【#banner h1 aに下記を追加】
color:（任意のカラーコード）;
【#leadに下記を追加】
color:（任意のカラーコード）;
- 「保存」ボタンをクリックし、スキンを保存します。
- 作成されたスキンを選択し、「スキン設定」をクリックすれば、自分のブログにカスタマイズしたスキンが設定されます。
 |
カスタマイズ例（コピーしてご利用ください） |
今回の方法を使ったカスタマイズ例を以下に記述します。これをコピーして、1と2をみながら修正すると便利です。ぜひ、カスタマイズにチャレンジしてみてくださいね。
■画像ヘッダーをカスタマイズしたブログ
http://blog.so-net.ne.jp/blog-class-test/
【デフォルトの記述】
#banner {
height:80px;
margin-bottom:10px;
clear:both;
}
#banner h1{
margin:0;
padding:15px 0 5px 0;
font-size:x-large;
}
#banner h1 a{
}
#lead{
margin:0;
}
【カスタマイズの記述】
#banner {
background:url(/blog/_images/blog/ファイル名) no-repeat;
height:130px;
padding-top:70px;
margin-bottom:10px;
clear:both;
}
#banner h1{
background:#037FE9;
width:280px;
margin:0;
padding:10px 0 5px 20px;
font-size:x-large;
}
#banner h1 a{
color:#ffffff;
}
#lead{
color:#ffffff;
background:#037FE9;
width:280px;
padding:0 0 10px 20px;
margin:0;
}
この連載はいままでより少し難しいので、皆さまより質問をお受けしたいと思います。今回の記事についてご質問があった場合には、コメントやトラックバックでご質問ください。
3/7までにいただきました質問には、次の記事でお返事します（初めての試みなので、なにか不手際がありましたら申し訳ありません・・・。皆さまからのご質問によい回答ができるようにがんばります）。
オリジナルになるのは魅力ですね。
時間と、精神的余裕ができたらチャレンジしたいな。。。
今は駆け足で。。。通り過ぎます。
by siawasejikan (2007-03-02 00:01)
よく分からんなあ…と思いながら、
勘で作っていたので、こういう説明は
とても助かります（＾－＾）。
by masugi (2007-03-02 20:12)
タイトル下の説明文を改行したかったのですが、#leadのwidthを指定したら出来ました。
本当は改行したい所で改行したいのですが、まずは今回の記事でのステップアップとしては上出来です。
ありがとうございました。次回も楽しみにしています。
by くさかんむり (2007-03-03 11:05)
よく分からないながらも質問です。
ブログを始めたときから、ヘッダーにオリジナル画像を入れたいとおもっていましたが、現在使用しているスキンで、ヘッダーだけ、オリジナルにすることは、可能ですか。
ヘッダーをオリジナルにしても、他の部分が、濃紺のこのデザインだと味気ないので、ちょっと躊躇してしまいます。
by スー (2007-03-03 16:57)
こんにちは
久々にブログアップしてみて、スキン変更に挑戦してみました！
動物的な噛んで、まぁぁおきに入りに変更できたかなぁ？って自己満足してます。
もう少し時間があるときに、今度はもっちょっとカラフルなスキンを自作してみます！
あ、、。でも絶対黒基調だなぁ。あ、大好きな曼珠沙華で作るから。
今度も赤黒オンリーだったりして（苦笑
by (2007-03-04 13:08)
ブログ教室さん、はじめまして。
ヘッダ部分（#header）に画像を入れる方法も紹介して下さい。
画像分割しないで#containerに入れているのですが、
問題ないでしょうか？
スーさんへ
‥‥現在使用しているスキンのソースを表示させて、
タイトル下のURLを開く。
CSSを丸コピして、カスタムスキンのCSSと全置換すればOKです＾＾
by sknys (2007-03-04 16:36)
初めて書き込みさせて頂きます。
初心者の為のブログ教室を用意して頂けるとは、本当に嬉しい限りです。
ところで質問なのですが、設置したオリジナル画像の上に、『管理ページ』『新規作成』『自分のブログ』･･･などのページ最上部のリンクを画像範囲内に表示させるにはどのようにしたら、良いのでしょうか?
今まで使っていたスキンが『自然・風景の＜雲＞』だったものですから、その時のように、画像内にリンクを載せたいのです。
なにぶん、初心者なものですから、その方法が分からず、途方に暮れております。
ご返答、頂ければ幸いです。よろしくお願いします。
by (2007-03-04 21:53)
オリジナルの画像（７７０px以外で作成した画像）
で左右に余白をつくるにはどうしたら
いいのでしょう？？
by (2007-03-07 20:20)
ありがとぅござぃます。。まだ初心者で。。何が書いてあるのか、実はさっぱりわかりませんが、、ゆっくりがんばります。。
by milk (2007-05-21 09:37)
ここで色々勉強してよぉーく分かりましたッ！
カスタマイズの事はさっぱり分からなかったので
助かりました～♪
by 夏星 (2007-06-16 11:37)
初めまして、現在スキンのカスタマイズに挑戦しているところです。
ブログ教室で勉強させていただいてます。ヘッダーにオリジナル画像
を入れる事は出来たのですが、欲がでてきてしまい、応用でSo-netの
ブログトップのバナー広告の様に更新される度にヘッダーが変化する
様にしたいと挑戦しています。色々と調べでやってはみたのですが、
So-netのブログは専用の記述の方法がある為か、自分の力が足りない
為か（たぶん後述の方です）実現できません。
更新する度に、数種類のヘッダーに変化させるにはどの様にすればよ
いのでしょうか？
by echo (2007-07-05 11:42)
たすかったあああ
by 灰雨 (2008-01-12 16:12)
とても助かりました、ありがとうございます。
by sya-betto (2009-04-10 08:53)