TOP

3つのヘッダー画像設定

シリウスレスポンシブテンプレートでは、サイト全体設定で取り込むヘッダー画像が、
下層カテゴリーエントリーでどう表示される仕様となっているようです

 

ようです...とは、私の場合、最初からヘッダーを弄り回し過ぎている事情で、デフォルト
状態での作動をほとんど知らずにいた..のでした
トップ、カテゴリー、エントリーと3種指定はできていた...理解はその範囲...

 

サポートへ質問がございまして、遅ればせながら気が付いた次第...

 

質問内容

 

各ページの設定画面でヘッダー画像を選択する項目にオリジナルヘッダーを選択しても
カテゴリー、エントリーで確認するとトップ(サイト全体設定)がそのまま反映されている
何度、入れ替えても反応に変化無し
ページごとにヘッダーを入れ替え表示はできないのでしょうか?

 

....との趣旨でした

 


 

シリウスデフォルトテンプレートならよほどスタイルシートを弄り回さない限り、ヘッダー画像を
ページ別に表示することは可能ですが、レスポンシブTPではページ設定画面で指定しても
反応はしません

 

スタイルシート拝見しますと img(画像)の読み込み記載はあるものの、画像コードを
読み込ませる記載は見当たらないのですね

 

で、どこでヘッダー画像を読み込ませているかというとHTML内で.....です.....が理由で、
トップ、カテゴリー、エントリーでは別指定はできるのです

 

サブカテゴリーは、カテゴリーと同HTMLが理由で同じ反映...

 

 

ここで、申し訳ございません
ページごとができるようなお話で進めておりますね
とりあえず、エントリーページではスタイルシートでCSS指定をすれば個別表示も可能で
あることは確認できました
しかし、応用させるためにはスタイルシート、HTMLTPもいじらねばならず、複数のページで
反応させるには多くのコードも追加せねばなりません
簡単にできないのか?、私の知識不足かもしれませんがスマートに個別表示させるやりようは、
ミスを回避する検証も踏まえ今しばらく公開をお待ちください

 

そんなわけで、今回は3つの範囲で切り替えする手順だけご案内します

 


 

HTMlテンプレートを確認しましょう

 

<div id="headerbox">
<div class="inner">
<div id="header">
<img src="<% pageDepth %>img/header.jpg" />
<div id="headertxt">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(div class="title") %>
<% pageDescription | str_replace(id="headertext",class="desc") %>
</div>
</div>
</div>
</div>

 

以下記載が、ヘッダー画像を読み込んでいます
<img src="<% pageDepth %>img/header.jpg" />

 

トップは全体設定で指定できますね

 

カテゴリーとエントリーにも同項目がございますが、
<img src="<% pageDepth %>img/header.jpg" /> のheader.jpgを入れ替えれば

 

カテゴリーとエントリーで個々にヘッダー画像を指定できるのです

 

 

やりようとしては、新規に作成したヘッダー画像を記事内に一度読み込んで
画像管理画面に記憶させ、記事内画像コードから ????.jpgだけを切り取り
入れ替えるだけです

 

 

 

 

ヘッダー画像を階層別に組み分け表示する手順
ヘッダー枠、画像及び他内部CSSカスタマイズまとめ
トップページ

関連ページ

PC画面では、ヘッダー画像を非表示にする方法
シリウスのデフォルトレスポンシブサイトに標準表示されるヘッダー画像の位置が好みに合わないと感じられたら非表示にすることもできます 表示法カスタマイズまとめ
ヘッダー画像上部の横ラインカラーの変更
ヘッダー画像のやや上に横ラインが見られますが 、サイトカラーに合わせて表示されています。ま、イメージを少し変えたいという場合は参考にしてください
ヘッダーテキスト(タイトル)の高さ位置、および横幅調整
ヘッダー画像の縦サイズをデフォルト以外で取り入れるとタイトルも自動で位置調整されますが、それが適合位置とはなりえません。そんな時は手動で指定替えしましょう
ヘッダーテキストの固定化
シリウスで標準のヘッダー内、タイトルをスクロールを無視して固定するソース