今回は、ブログヘッダー画像の高さを100px拡大する方法を紹介します。

「オリジナル★テンプレートの作成 」の初期設定では、ブログヘッダー画像の高さが200pxになっているので、下記のブログヘッダー画像のハイビスカスの花びらがすべて表示できなかったので、表示させるために高さを100px調整したいと思います。

【画像イメージ】：改造前

【スタイルシート】：改造前

/* ブログタイトル・概要 */
#banner{
background-color: #6699ff;
height: 200px;
width: 900px;
margin: 0px;
overflow: hidden;
background-image: url(//img01.ti-da.net/usr/blogstyle/bg_900x200.jpg);
}

【画像イメージ】：改造後

【スタイルシート】：改造後

/* ブログタイトル・概要 */
#banner{
background-color: #6699ff;
height: 300px;
width: 900px;
margin: 0px;
overflow: hidden;
background-image: url(//img01.ti-da.net/usr/blogstyle/bg_900x300.jpg);
}

上記の赤字が変更及び、追加（改造）部分です。「height」 を「100px」増やし、
ブログヘッダー画像を変更しました。数値を変えることで、高さの調整が可能です。
※事前に画像を準備して下さい。（ヘッダーサイズ：横900px 縦300px ）

実際にオリジナルテンプレートを、テスト表示用ブログ
『ブログをカスタマイズ！「ブログスタイル」』に適用しました。

同じ画像（写真）でも、カットによって印象が変わりましたね！
ヘッダー画像を変更することで、ブログの印象がかなり変わると思います。

皆さんも、チャレンジしてみては、いかがでしょうか！？ｐ(*^-^*)ｑ がんばっ♪

このソースコードの使用に関しては、限られたテスト環境での動作確認などは行なっていますが、すべての環境に対応したものではありませんので、恐れ入りますが、使用に関しては自己責任でお願い致します。