オリジナルスキンに挑戦 ～変身編～

さて、下準備編に続いていよいよ

■オリジナルスキンに変身編です。

ここでは、ブログの顔であるヘッダーの画像をオリジナルに差し替える
所までを紹介します。

ベースに選んだスキンによってヘッダーの画像を差し替える手順が
違うので、じぶんの環境にあった方法で試してみてください。

１）基本スキンがスタンダード

こっちは、結構簡単にヘッダーを変えることが出来ます。



デザインの変更から
⇒スキン選択⇒スキンのカスタマイズに入ります。
その画面に画像の追加ボタンがあるので、下準備編で用意した
ヘッダー画像を選択して完成です！

結構あっさりですね。

２）基本スキンがスペシャル

こちらは、スキンのカスタマイズに入ることが出来ません。
よって、スキンCSSの編集からヘッダー画像を差し替えます。

CSSの編集画面から
/* ------- header ----------------------------- */
を探しましょう。
見つかったらそのブロックの最後に

#header {
background-image: url(http://ameblo.jp/user_images/dc/d6/10114582745.jpg);
}

アンダーラインの部分は画像フォルダーにある使いたい画像のURLを書き込みます。
の文を追加しましょう。

↓　変更例

/* ------- header ----------------------------- */
#header{padding:0;margin:0;}
#header h1{
margin:0;padding:2px 5px;
clear:both;
}
#header h2{margin:0;padding:10px 10px 20px;}
#header h1 a,
#header h1 a:link,
#header h1 a:visited,
#header h1 a:hover{
color:#666;
text-decoration:none;
}
#header {
background-image: url(http://ameblo.jp/user_images/dc/d6/10114582745.jpg);
}
/* ------- font-information ------------------- */

↑　ここまで


/* ------- header ----------------------------- */
が見つからなければ、CSSファイルの最後に上記の文を追加してください。
たぶんいけるとおもいます。

編集し終わったら、保存して完了です。

一応、これであなたのブログがオリジナルスキンに変身できたと思います。

応用編は気が向いたらまた書き込みます。

あなたの健闘を祈ります。