上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 FC2ブログで、ページ種(トップページ、記事詳細ページ、カテゴリ一覧ページなど)ごとに、ヘッダー画像を替えることが出来ます。
 同様に、サイドバーをページ種ごとに変えるフッターをページ種ごとに変えると言うカスタマイズも可能です。




使う変数は?



エリア(モード)変数

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

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

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




画像だけを切り替える



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

<div id="header">
<a href="http://トップページへのリンク"><img src="http://ヘッダー画像"></a>
</div>

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

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

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

<!--not_index_area-->(トップ以外表示エリア変数)
<!--not_category_area-->(カテゴリ以外表示エリア変数)

<img src="http://その他のページのヘッダー画像">
<!--/not_category_area-->
<!--/not_index_area-->

</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('
<!--index_area-->(トップ表示エリア変数)
http://トップページのヘッダー画像
<!--/index_area-->

<!--category_area-->(カテゴリ表示エリア変数)
http://カテゴリページのヘッダー画像
<!--/category_area-->

<!--not_index_area-->(トップ以外表示エリア変数)
<!--not_category_area-->(カテゴリ以外表示エリア変数)

http://その他のページのヘッダー画像
<!--/not_category_area-->
<!--/not_index_area-->

') no-repeat left top;">
<h1>ブログタイトル</h1>
<p class="intro"><%introduction></p>
</div>
【修正後のヘッダーのCSSソース】
#header{
height:180px;
}

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




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



■関連記事
ランダムでヘッダー画像を替える方法
カテゴリページごとに表示する画像を変える
このエントリーをはてなブックマークに追加
Mon.01.17.2011
Comment
203
ページ種ごとにヘッダー画像を替える
「バックグランドのヘッダー画像の場合」で変更することできたのですが、更にカテゴリ別に細分化(親カテゴリ毎)して任意のヘッダー画像を表示させることは可能でしょうか?

お忙しい中恐縮ですが、教えていただけましたら幸いです。

204
Re: ページ種ごとにヘッダー画像を替える
 可能です。画像ファイル名とカテゴリナンバーを対応させます。詳しくはこちらに記述しておきましたので、参考にしてみてください。

http://designlabolatory.blog16.fc2.com/blog-entry-348.html

Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。