ページ種ごとにヘッダー画像を替える

FC2テンプレート作成編

　FC2ブログで、ページ種（トップページ、記事詳細ページ、カテゴリ一覧ページなど）ごとに、ヘッダー画像を替えることが出来ます。
　同様に、サイドバーをページ種ごとに変える、フッターをページ種ごとに変えると言うカスタマイズも可能です。

使う変数は？

エリア（モード）変数

　こちらの「エリア変数」と言うものを利用すれば簡単です。
　これで、

トップページ
固定リンク画面（追記、コメントが表示される記事詳細画面）
月、日別（アーカイブ）画面
カテゴリ別画面
検索結果画面
タグ検索結果画面
全記事タイトル一覧ページ

　これらのページのヘッダーをそれぞれ変えられます。

画像だけを切り替える

　その時は、画像タグだけを「エリア変数」で囲む方法があります。

　よく見かけるヘッダーの形がこう言う形。ヘッダーのバナーをクリックすると、トップページへジャンプするタイプです。
　これを例えば「トップページ」「カテゴリページ」「その他のページ」で表示を変えたいと思ったときは、以下のように記述できます。

<div id="header">
<a href="http://トップページへのリンク">
（トップ表示エリア変数）
<img src="http://トップページのヘッダー画像">


（カテゴリ表示エリア変数）
<img src="http://カテゴリページのヘッダー画像">


（トップ以外表示エリア変数）
（カテゴリ以外表示エリア変数）
<img src="http://その他のページのヘッダー画像">


</a>
</div></div>

　画像タグを、エリア変数で囲み、ページ種によって振り分ける方法です。
　注意したいのが、「～以外の表示エリア変数」を忘れないことです。これを忘れてしまうと、その他のページの時には、ヘッダー画像がない状態になります。

バックグランドのヘッダー画像の場合

　CSS（スタイルシート）から、「ヘッダーのブロックの背景画像」を指定しているパターン。
　FC2用共有テンプレートはほとんどこの形だと思います。背景画像の上にテキストが載っているパターンの場合です。

　HTMLでは、「エリア変数」を使用出来ますが、CSSでは「エリア変数」は使えません。
　いくつか方法はあると思いますが、一番シンプルなのは、以下の方法だと思います。

【元のヘッダーのHTMLソース】

<div id="header">
<h1>ブログタイトル</h1>
<p class="intro"><%introduction></p>
</div>

【元のヘッダーのCSSソース】

#header{
background:url("http://ヘッダー画像") no-repeat left top;
height:180px;
}

　こんな感じで書かれていると思います。
　勿論CSSソースの方に「変数」を書いても上手く動作しません。
　ですから、ヘッダーのブロックタグ、ここでは
「<div id="header" style="背景画像">」
のように組み込むのが一番妥当ではないでしょうか？
　ブロックタグの方に、直接スタイルを当てる方法です。

【修正後のヘッダーHTMLソース】

<div id="header" style="background:url('
（トップ表示エリア変数）
http://トップページのヘッダー画像


（カテゴリ表示エリア変数）
http://カテゴリページのヘッダー画像


（トップ以外表示エリア変数）
（カテゴリ以外表示エリア変数）
http://その他のページのヘッダー画像


') no-repeat left top;">
<h1>ブログタイトル</h1>
<p class="intro"><%introduction></p>
</div>

【修正後のヘッダーのCSSソース】

#header{
height:180px;
}

　上の例では、見やすくするためタグ内で改行を入れていますが、実際は改行しないようにしてください。
　このように、画像リンク先のURL部分のみを、ページ種を判断させて表示させるのが、一番短い記述で済むのではないかと思います。
※「" "」「' '」の入れ子に十分注意してください。

■エリア変数がなんのことだか分からない方は、こちらも参照してください。
カテゴリ・サーチ・全記事表示などに分岐させる

■関連記事
ランダムでヘッダー画像を替える方法
カテゴリページごとに表示する画像を変える