Templates for SLMaMe

今回はヘッダーに背景画像を表示させてみます。以前、ヘッダーに画像を表示させる３つの方法をご紹介しましたが、今回は縦方向に伸縮可能な背景画像を設定したいと思います。

そうすることで、ロゴが以前より縦幅の大きい画像に変更されても、概要のテキストが増えても、ヘッダーに別の要素を追加しても、背景画像を作り直す必要がありません（横幅を変更する場合は画像を作り直す必要があります）。

今回ご紹介する方法は、ブログの横幅が固定されている場合にのみ有効です。デフォルトテンプレートなどで「幅100%」を設定しているブログの場合は、画像の作り方やソースコードが異なりますので、ご注意ください。

背景画像を用意する

今回、私が用意したのは以下の画像３点です。

▼ヘッダーの上部に表示するための画像

▼ヘッダー全体に縦方向に繰り返し表示するための画像

▼ヘッダーの下部に表示するための画像

画像の横幅はブログの横幅と同じサイズです。縦幅は画像のインナーシャドウに合わせて 10px にしています。皆さんのブログの横幅、背景画像のデザインに合わせて作成してください。

テンプレートに手を加える

今回使用するテンプレートは「トップページ」「個別記事」「アーカイブ」「スタイルシート」の４つです。

まずは「トップページ」「個別記事」「アーカイブ」の以下の部分を確認してください。

<div id="banner">

<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>

<div class="description"><%BlogDescription%></div>

</div>

それぞれ、以下のように変更します。

<div id="banner">

<div class="banner_top"><!-- --></div>

<h1 class="blogtitle"><a href="<%BlogUrl%>" title="ホームへ" accesskey="1"><img src="//img01.tec29.com/usr/templ/logo.gif" alt="Templates for SLMaMe" /></a></h1>

<div class="description"><%BlogDescription%></div>

<div class="banner_bottom"><!-- --></div>

</div>

<div id="banner"></div> の間に、新たに <div id="banner_top"><!-- --></div> と <div id="banner_bottom"><!-- --></div> を追加しています。これらはヘッダの上部と下部にそれぞれ別の画像を表示させるためのものです。

次に、テンプレート「スタイルシート」の以下の部分を確認してください。

#banner,#subbanner {

   background: #787878 url(/_img/simple_gray/head.gif) left bottom;

   padding: 0px 10px 10px 10px;

}

以下のように変更します（#subbanner は、HTML のどこにも使われていないので削除しています）。

#banner {

   background: #背景画像に近い色 url(ヘッダー全体に縦方向に繰り返して表示する画像のURL) repeat-y;

   padding: 0;

}



.banner_top {

   height: 画像の縦幅px;

   background: #背景画像に近い色 url(ヘッダーの上部に表示する画像のURL) top left no-repeat;

}



.banner_bottom {

   height: 画像の縦幅px;

   background: #背景画像に近い色 url(ヘッダーの下部に表示する画像のURL) bottom left no-repeat;

}

これで、ヘッダーに背景画像が表示できました。
文字色を白に指定していたブログのタイトルと概要が見えなくなってしまったので、以前ご紹介した方法でブログタイトルをロゴ画像に変更し、概要の文字色を変更しました。

このように上部、全体、下部と切り分けた画像を使用することで、ヘッダーだけでなく、ブログのコンテンツ部分やサイドバー、フッターにも同じように伸縮可能な背景画像を表示させることができます。