てぃーだブログテンプレート簡単カスタマイズ：ヘッダー画像①

今回は、てぃーだブログテンプレートの
「[sp-21] 専科特別テンプレート_2カラム」で使用されている
レイアウト設定（ヘッダー画像）部分を変更したいと思います。(⌒-⌒)ﾆｺﾆｺ...

前回は、このページの上へ部分に設定されている
背景画像ファイルを削除する方法を紹介しましたが、

今回は、レイアウト設定部分に設定されている
ヘッダー画像ファイルの変更方法を紹介します。

下記が
「[sp-21] 専科特別テンプレート_2カラム」の
レイアウト設定（ヘッダー画像）部分です。(⌒-⌒)ﾆｺﾆｺ...

【レイアウト設定（ヘッダー画像）部分：背景画像ファイル変更前】


【スタイルシート】変更前

/* レイアウト設定 */
#container{
padding: 0;
width: 100%;
background-image: url(http://admin.ti-da.net/_img/hadasenka/bg_illust.jpg);
background-repeat: no-repeat;
background-position: center top;
margin: 0;
}



今回、準備した画像は、
上記の変更前のヘッダー画像ファイルと同じサイズ（1,270px × 365px）です。


【レイアウト設定（ヘッダー画像）部分：背景画像ファイル変更後】


【スタイルシート】変更後

/* レイアウト設定 */
#container{
padding: 0;
width: 100%;
background-image: url(http://img01.ti-da.net/usr/blogstyle/img_1270x365.jpg);
background-repeat: no-repeat;
background-position: center top;
margin: 0;
}



下記の、赤文字部分で、ヘッダー画像ファイルの設定をしています。

背景画像の指定：変更前
background-image: url(http://admin.ti-da.net/_img/hadasenka/bg_illust.jpg);

背景画像の指定：変更後
background-image: url(http://img01.ti-da.net/usr/blogstyle/img_1270x365.jpg);



今回は、ヘッダー画像ファイルの設定を変更するだけでＯＫです。
上記のソースコード（青文字）に変更しただけです！∑(￣ﾛ￣|||)なんと！？

もちろん、画像ファイルは、事前に準備して、アップロードしなければいけませんけどね～♪

皆さんも、いろいろと画像を用意して、
試してみると楽しいですよ～♪ｐ(*^-^*)ｑ がんばっ♪



実際の表示は、テスト表示用ブログの
『ブログをカスタマイズ！「ブログスタイル」』で！
上記をクリックすると表示されますよ～♪(⌒-⌒)ﾆｺﾆｺ...

皆さんも、この機会にカスタマイズしませんか？