当ブログのテンプレートをカスタマイズ！背景画像の変更

何故、今回のカスタマイズにテンプレートの対象者があるかと言いますと、上記した４つのテンプレートには、大元の div タグの背景にドロップシャドウの画像を使っています。

もし、上記したテンプレートで body の背景色を白以外に変更しようとすると、div の背景に設定してあるドロップシャドウの画像が邪魔をするはずです。

これは私の嫌がらせではなく、ドロップシャドウの画像が gif ファイルだからです。

しかしこの gif をアルファチャンネル（透過）を使える png に変更し、前回の記事で紹介した JavaScript を併用すると、背景を何色にしても美しいドロップシャドウを保てます。勿論、背景に画像も使えますし、また、当ブログが対象としているブラウザ全てで確認済みです。

そんな訳で、テンプレートの対象者がある理由は、後述する png の画像が対象テンプレートしか大きさが合わないからです。もしも、ご自身でドロップシャドウの png 画像を用意できれば、対象テンプレートではなくても挑戦できる簡単なカスタマイズです。

それでは説明に入ります。

まず下のドロップシャドウの png 画像とユンサンさんが作った JavaScript（iepngfix.js）をローカルにダウンロードします。
※右クリックでリンク先を保存してください。

1. ドロップシャドウの画像
2. iepngfix.js

続いて、管理画面からダウンロードしたファイルを２つともアップロードします。

アップロードが済みましたら、CSS の編集をします。スタイルシートの編集画面から１１７行目くらいにある div#container セレクタを見つけます。
※カスタマイズする前にテンプレートをバックアップ（複製）しておくと安心です。

そのセレクタの background プロパティの値（URL）を先ほどアップロードした png 画像の URL に変更します。

div#container {
	width : 780px;
	margin-left : auto;
	margin-right : auto;
	background : url("http://★★★/bg_780x10.png") top center repeat-y;/* 画像780x10 */
}

更に、IE6 だけにCSS 内で JavaScript を使用する為、スターハック（ *html ）を使いセレクタを追加します。下のソースコードを全てコピーし、先ほどのセレクタの下にペーストしてください。

*html div#container { behavior: expression(IEPNGFIX.fix(this)); }

ペーストする際は、他のソースを消さないようご注意ください。

次に HTML の編集をします。

HTML ソースの上の方にある </head> タグの上に下のソースをコピー＆ペーストします。

<script type="text/javascript" charset="EUC-JP" src="iepngfix.js"></script>

ペーストが済みましたら、上のソースの赤い部分をアップロードした JavaScript のパス（URL）と置換します。つまりこのソースでアップロードした JavaScript を HTML の head 内で読込むと言う訳です。

以上で今回のカスタマイズの準備は整いました。後は、好きな背景画像や色変更を楽しんでください。

どこで背景画像や色変更して良いのか分からない方いますか？

そんな方のために一応説明させて頂くと、「スタイルシート編集」の上の方に body セレクタが見つかると思います。その中の background-color で背景色を変更できます。

また、背景画像を使いたい場合は、使用したい画像ファイル（jpg か gif か png）をアップロードし、body セレクタの中に下のプロパティを追加してください。

background : url("画像ファイルのパス") left top repeat #fff;

画像ファイルのパスには使用したい画像ファイルのパス（URL）が入ります。

上の background プロパティは背景に関係する指定をまとめて行うためのプロパティですので、background-color は body セレクタから削除してください。

最後に、背景画像を探したい方にお薦めサイトを２つ紹介して、今回のカスタマイズを終わります。

Stripe Generator はストライプの画像をインターネット上で簡単に作成し共有できるサイトです。他の方が作った画像も使えるので英語サイトですが、お気に入りの背景画像を探してみてはいかがでしょうか？

Tartan Designer も上のサイトと同じようなサイトです。格子柄（タータンチェック）をダウンロードできます。

以上で今回のカスタマイズは終了ですが、ご質問などありましたらお気軽にどうぞ。