TOP

シリウスのヘッダー画像をレスポンシブウェブデザイン構造として表示するカスタマイズ

シリウスのデフォルトhtmlテンプレートに レスポンシブウェブ構造は
組み込まれておりませんが 
@media記述を加えることでレスポンシブ化サイトとしての機能表示が
可能となります

 

しかし 当サイトおよびネット上で得られるレスポンシブウェブデザイン構造
記述コードではシリウステンプレートのヘッダー画像のみが
スマートフォンデバイスでは伸縮されず 左位置画像が認識できる
範囲におさえられているようです

 

事情はシリウス機能が影響していると判断しておりますが
現在のところ解明できてはいませんが サポートより稼働状態に
できないものかと?

 

ご質問がよせられておりますので 無理くりのカスタマイズではありますが
ご案内いたします

 

ですが 面倒もあり採用する しないは充分にご検討後
ご判断ください

 

解説は当サイト公開のレスポンシブウェブデザイン構造記述を
対象にしておりますので他の構造に関しての対応は不明です

 

 

反映度合いは

 

タブレット関連ではモニター画面が小さくもないので 然程の影響は
ないものの スマートフォンフォンでの閲覧の際は 中心が右に隠れ
画像の一部が不認識になってしまうのですね

 

レスポンシブウェブデザイン構造がヘッダー画像にのみ 影響を
与えることが出来ない!という状況

 

ヘッダー画像にのみレスポンシブ化不作動という状況を正常に
するためHTMLおよびCSSにあらゆる指定を追加をしたのですが

 

スタイルシートの
background-image: url(img/header.jpg)行;記述に置く
ヘッダー画像は全然動いてくれません

 

なぜなんでしょう?

 

そこで シリウス機能でヘッダー画像を読み込むのではなく
html内に画像をおいて スタイルシートで読み込むという方法で
進めましたところ とりあえずはヘッダー画像をレスポンシブウェブデザイン
構造として作動表示できるようになりました

 

スポンサーリンク

 

 

お断り

 

ヘッダー画像を伸縮する方法として ロゴ画像を拡大表示させ
スタイルシートで指示すれば とりあえずは伸縮するヘッダー画像は
設定はできますが ロゴ機能はヘッダータイトルの箇所を画像に切り替えて
表示するもので タイトル表示機能が使えなくなります

 

ロゴ画像を編集して タイトルをフォントデザイン画像として
入れ込みはできますがあくまで画像なので狭まると意味不明?
となるのです

 

ページ追加ごとにタイトルを含めたヘッダー画像編集するのも大変面倒!

 

ですので
ここでの解説は 通常にタイトルをシリウス機能で切り替え可能な
方法で進めています

 

 

 

 

通常

 

レスポンシブウェブ化のスタイル

 

以上のようにレスポンシブウェブ化しての反映されますが
シリウス機能を無視した構造なのでスタイルに制限がございます

 

作動状況をご案内します

 

ヘッダー画像は右から左へ伸縮変化します

 

縮小は横幅が伸縮するもので 縦サイズは変化しません
縦サイズをレスポンシブウェブ化もできたのですが ここにはタイトルやその他が
3つほど置かれているので 縦稼働すると意味不明な構成になってしまうので
不指定としました

 

ですので 横幅のみの縮小でのヘッダー画像をご確認の上
採用するかどうかはご判断ください

 

 

サイトタイトル h1タイトルも伸縮変化します

 


 

構築の状況

 

デフォルトで今置いてるスタイルシート内のヘッダー画像呼び出し指定
記述はあるものの 
レスポンシブ化しませんが 削除や改行はせずそのままの状態に
しておきます

 

 

レスポンシブ化しないヘッダー画像の上に 作動する別なヘッダー画像を
上乗せして表示しますので 置いといても問題なし

 

上乗せするヘッダー画像は htmlテンプレート
トップから その他リンク集までございますが

 

無理やりhtmlテンプレート内に画像を置いてスタイルシートから
呼び出しますので トップ カテゴリー エントリーページが指定範囲
3種類となります

 

トップページのみレスポンシブウェブとして作動する際は html
カテゴリー エントリーページはなにも指定しなければ 最初からサイトに
設定しているヘッダー画像がデフォルトで反映されます

 

 

レスポンシブウェブ構造追加詳細

 

html指定

 

html内にヘッダー画像を置きます

 

ヘッダー画像は 初期設定のデフォルトヘッダー画像サイズと
サイズと同サイズのものを用意します

 

サイズ違いがあると空きスペースが表れてしまいます

 

ヘッダー用画像画決定できましたら 表示用記述改行作成のため
画像コードをシリウス記事内で呼び出して編集します

 

 

例 画像コード
<img src="<% pageDepth %>img/rleghi.jpg" alt="" />

 

次に スタイルシートで読み込むため div要素で記述を
囲みます

 

idを含め読み込む認識指定としてsiriusを入れ込みます
<div id="sirius">画像コードを置く</div>

 

siriusという認識コードは任意ですので 他の名称でも構いません

 

記載例
<div id="sirius"><img src="<% pageDepth %>img/rleghi.jpg" alt="" /></div>

 

次にhtmlテンプレートを開いて 以下の行に到達
<div id="header">の下に作成した記述を張り付けます

 

記載例
<body>
<div id="container">
<!-- ★ヘッダーここから★ -->
<% pageTopic %>
<div id="header">
<div id="si">画像コード</div> ここに置きます
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>
<%pageDescription %>
</div>
<!-- ★ヘッダーここまで★ -->

 

 

ここで一言

 

div要素で囲まず 画像コードのみを置いた場合で サイトを
レスポンシブ構造にしているなら この段階でも画像だけは作動は
反映されますが

 

画像だけならです
h1テキストやサイトタイトルは 画像の下階層にあるので
認識できないのですね

 

もし 
ヘッダー画像内にサイトタイトルをデザインとして組み込んでいる場合は
この段階で終了することも可能です

 

画像のみ横変化の際は div 要素で囲まず 画像コードのみ

 

以下のdiv要素で囲むと 通常のサイトに置く画像伸縮になりますが
何とも?
調整不能なスタイルになります

 

お試し参考程度に
<div>画像コード</div>

 

 

 

 

次は h1テキストやサイトタイトルをレスポンシブウェブデザイン構造として
正常に表示させるためのスタイルシートでのcss指定に進みます

 


 

スタイルシート指定

 

 

以下行に到達してください

 

/* 基本レイアウト */

 

#container {
width: 900px;
_width: 910px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
margin-right: auto;
margin-left: auto;
background-image: url(./img/cnt_bg.png);
background-repeat: repeat-y;
}

 

 

#header {
height: <% headerHeight %>;
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width: auto;
border-bottom:solid 1px #EBEBEB;
}

 

以下行にサイトタイトルを上部階層で表示するための改行を加えます

 

原本
#header h2 ,#header .title {
width: 550px;
font-size: 36px;
line-height: 36px;
position: relative;
left: 30px;
top: 50px;
<% pageTitleFontSize %>
<% pageTitlePlace %>
}

 

 

 

 

変更後
#header h2 ,#header .title {
width: 550px;
font-size: 28px;
line-height: 50px;
position: relative;
left: 20px;
top: -70px;
z-index: 10
<% pageTitleFontSize %>
<% pageTitlePlace %>

 

}

 

 

変更説明
font-size: 28px; フォントサイズ
line-height: 50px; タイトル位置

 

left: 20px;
top: -70px;

 

タイトル位置を調整しました
自己調整する際が数値変更で進めます

 

ここでサイトタイトルが一番上に表示されるよう階層指定をしています
z-index: 10

 

z-index: はサイト階層の重なりを指定します
5とか6では不正常なので10で指定しました

 

ここまでは シリウスのスタイルシート原本への改行でした

 

 


 

次は レスポンシブウェブデザイン構造へ追加行

 

@mediaへの追加例

 

赤コードが追加行です

 

以下のレスポンシブコードは一部例ですので シリウステンプレート全てに
対応されるわけではありません

 

あくまで いまあるサイトの記述内に追加する例です

 

 

@media(max-width:900px){
#container{
width: 100%;
}

 

 

 

#main {
width:100%;
padding:1% 1%;
}

 

 

 

#main {
float: left;
width: 100%;
}

 

 

 

#contents {
padding-right: 0%;
padding-left: 0%;
}

 

 

 

img{
max-width: 100%;
height: 100%;
width: auto;
  display:block;
}

 

 

サイトのいちばん上左に表示される小さなサイトタイトル

h1 {
font-weight: normal;
font-size: 12px;
color: #666666;
line-height: 16px;
background-repeat: no-repeat;
position: absolute;
top: 5px;
padding-right: auto;
padding-left: auto;
   z-index: 10;
    width: 100%;
font-family: sans-serif;
}

 

 

 

h3{
max-width: 95%;
height: 100%;
width:auto;
}

 

 

HTMlに追加行の画像コードを読み込みする記述です
div#sirius {
position: relative;
z-index: 1;
height: 200px;
width: 100%;
}

 

 

 

#header {
height: <% headerHeight %>;
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width:100%;
border-bottom:solid 1px #EBEBEB;

 

}

 

 

ヘッダータイトルをレスポンシブ化した際 一番上に表示するための
追加行が加えられた記述

 

#header h2 ,#header .title {
max-width: 95%;
width: auto;
font-size: 25px;
line-height: 30px;
position: relative;
left: 2px;
top:-70px;
z-index: 10;
margin: 2px;
padding: right;2px;
<% pageTitleFontSize %>
<% pageTitlePlace %>
}

 

 

 

 

#header h2 a, #header h2 a:visited,#header .title a,#header .title a:visited {
color: #DE7E14;
text-decoration: none;
<%pageTitleColor%>
}
#topmenu {
background-repeat: repeat-x;
height: 48px;
line-height: 42px;
width: 100%;
position: absolute;
margin: 0px;
padding: 0px;
background-image: url(img/topmenu.jpg);
background-position: left top;
font-size: 13px;
}

 

 

#topmenu span a {
overflow: hidden;
width: 20%;
_width:19.6%;
<% topMenuWidth %>
text-align: center;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
float: left;
height: 45px;
_height:47px;
background-image: url(img/menu_item.jpg);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
padding-bottom:3px;
display: block;
}
#topmenu span a:hover {
background-image: url(img/menu_item_hover.jpg);
background-position: right top;
color: #FFFFFF;
}

 

 

#menu {
float: left;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
}

 

 

#searchbox {
position: absolute;
top: 33px;
width: 100%;
padding-right: 5px;
padding-left: 5px;
text-align: right;
line-height: 20px;
height: 20px;
font-size:12px;
padding-top: 4px;
}
}

 

 

当サイトで公開しているレスポンシブコードへ改行追加行を加えれば
今回のレスポンシブ化するヘッダー画像の追加作業は完了します

 

 

追加説明

 

html内に置いた画像は サイトに初期設定のヘッダー画像 サイトタイトル
の上に重なるのですべてが覆い隠されます

 

しかし
サイトタイトルが下階層ではタイトル表示ができないもので
z-index: 10;指定で一番上に移動しました

 

#header h2 ,#header .title {
max-width: 95%;
width: auto;
font-size: 25px;
line-height: 30px;
position: relative;
left: 2px;
top:-70px;
z-index: 10;
margin: 2px;
padding: right;2px;
<% pageTitleFontSize %>
<% pageTitlePlace %>
}

 


 

html内に置いたヘッダー画像をレスポンシブ化の際

 

階層をz-index: 1;指定で下層に移動しました

 

div#sirius {
position: relative;
z-index: 1;
height: 200px; 
width: 100%;
}

 

 

height: 200px; はデフォルトのヘッダー画像サイズと同じ数値にします
width: 100%;はレスポンシブ化するための指定

 


 

z-index: とはサイトの表示階層を指定します

 

サイトは背景画像や記事 メニュー枠等 すべてが同じ重なり位置に
あるのではないのですね

 

一階層ずつにあるコンテンツが重なり一つのサイト構成として
確認できることになるのです

 

シリウスもそのような階層の重なりで構成されているのですが
カスタマイズを加えることでデフォルトの指定を一部ですが
変更としました

 

サイト構築のカスタマイズでは使う機会も多い指定値です

 


 

h1指定行について

 

今回のカスタマイズでは 通常のヘッダー画像内に表示される
テキストが指定なしでは 覆い隠され表示されなくなります

 

サイト左上に表示されるh1タイトルもpc画面では認識できるものの
未指定では縮小画面では消えてしまいます

 

h1タイトルは 非表示としている方もおられるので 
必要か 不要かは判断できませんが 

 

不要の方は以下記載を削除すれば表示されません

 

記載は スマートフォンサイズの際 テキストは配列が
縮小するようレスポンシブ構造としています

 

h1 {
font-weight: normal;
font-size: 12px;
color: #666666;
line-height: 16px;
background-repeat: no-repeat;
position: absolute;
top: 5px;
padding-right: auto;
padding-left: auto;
   z-index: 10;
    width: 100%;
font-family: sans-serif;
}

 


 

 

以上ですが 以降精度を上げるための事実が判明次第
追記いたします

 


 

異なる意見

 

ここまで来て失礼ながら最終章に異なる意見を追記いたします

 

画像にタイトルフォントを画像として構成している場合は
レスポンシブ化すると フォントまで画像なので縮みます

 

今回は サポートへ ヘッダー画像もレスポンシブ化できないかとの
ご質問がよせらましたので追記いたした次第ですが

 

画像をレスポンシブ化すると 丸が卵になるわけで何とも?
イマイチ!

 

あちこちの大手サイト見てみると 2種類か3種類のヘッダーを
用意しておいて 端末のサイズに合わせてレスポンシブせずの
通常画像を読み込んでいる様子

 

そちらのほうが良いのではと?

 

思う次第で!

 

ある程度大まかに サイズ違いでヘッダー画像を複数用意して
閲覧される端末の画面サイズに合わせて読み込ませる方法も
シリウスではカスタマイズが可能です

 

こちらは 2種類の仕様方法ですが
シリウスヘッダー画像をレスポンシブウェブでは切り替え表示する方法

 

こちらは コンテンツ違いですが メディアクエリを解釈すれば 
とりあえず3種類が可能
パソコン スマートフォン画面でどちらも記事列を適合表示する指定

 

細かくメディアクエリを分割すれば4つでも5つでも

 

でもそんなに必要ないかも?

 

当サイトは ヘッダー画像はレスポンシブ化指定とせずに通常画像を
二つ パソコン用と スマートフォン タブレットアイフォンサイズで
切り替え表示しています

 


 

例外

 

ビジネステンプレートみたいなグローバルの下にヘッダーが位置する
サイトも多くございますね

 

ビジネステンプレートスタイルでグローバル下にヘッダーもどきを
表示させることもできます

 

WPでよく見かけますが

 

 

ヘッダーは縦を縮小して単色でタイトルのみ

 

グローバルメニュー下に画像としてサイト幅同様の画像を置くのです
画像なので綺麗に縮小はしますが

 

スタイルシートをいじらねばなりません

 

メニュー位置を下げるとかですね

 

ご参考でした

 

では頑張ってください?

 

ヘッダー画像をレスポンシブウェブデザイン構造で作動させる方法
SIRIUS シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ

 

 

ヘッダー画像をレスポンシブウェブ構造で作動させる方法関連解説
サイトをレスポンシブウェブ化カスタマイズする今事情
SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
レスポンシブウェブデザイン設定事情を理解しよう
シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にCSSを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
レスポンシブウェブデザイン変更前の説明
SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
レスポンシブウェブデザインカスタマイズのレイアウト変更値
シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する2重構造をcss指定値カスタマイズを含めて複数解説します
ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
デフォルト一カラムレスポンシブウェブデザイン設定
シリウスデフォルト一カラムテンプレートへレスポンシブウェブデザイン構築を追加する事は 2カラム同様簡単に設定ができます
2カラムテンプレート レスポンシブデザイン設定方法
SIRIUS シリウス2テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
3カラムテンプレート レスポンシブウェブデザイン追加方法
SIRIUS シリウス3カラムテンプレートへレスポンシブウェブデザイン設定を追加するカスタマイズ手順をご案内しております... 検証済み 面倒はありませんよ
2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ
SIRIUS シリウスサイト2カラムをトップページとカテゴリー以下でレイアウトサイズを異なるスタイルで表現する2段階表示のレスポンシブデザインのカスタマイズの解説です
トップページのみをレイアウト替えした際のカスタマイズ色々
シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
レスポンシブサイトの見出しメニューを調整するカスタマイズ
シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます
レスポンシブウェブデザイン公開ではiPhoneサイト設定も必要
シリウスをレスポンシブウェブデザインとして公開するに至り iPhoneサイト設定も必要ということが判明しましたのでお知らせいたします
レスポンシブウェブサイトにPC SP画面切り替えスイッチは不要
SIRIUS シリウスレスポンシブウェブサイトにPC SP画面切り替えスイッチは必要か?ですが 今時代のスマートフォンではフィンガータッチで適正サイズに調整できるため不要と思われます
レスポンシブウェブサイトへアドセンスを表示する際の注意ごと
シリウスサイトをレスポンシブウェブデザインへと機能カスタマイズを追加した際 googleアドセンスをサイドのメニュー位置に置いたままではアドセンスのポリシーガイドラインに違反してしまうのです
レスポンシブ構造ではサイドバーのアドセンス配置は処理が必要
シリウスへのレスポンシブ構造追加ではサイドバーのアドセンス配置は スマホサイズでは広告が巻末に押しやられポリシー違反となります 対処法は指定処理が必要...詳細はサイトで
レスポンシブウェブデザイン構造では画像の数値指定を必ずしましょう
シリウスへレスポンシブウェブデザイン構造を設定したなら掲載する画像の事情により正常に表示されない場合があります 事情解説対処はこちらで.....
パソコン スマートフォン画面でどちらも記事列を適合表示する指定
シリウスレスポンシブ構造の記事列はパソコンと横サイズが異なるためスマートサイズだと自動で折り返されてしまいますが どちらも同様の記事列で表示することもできますが?  詳細はこちらで...
iPhone ipadでサイト背景を固定化する仕様設定
シリウスサイトの背景を固定化している場合でレスポンシブ化された際 iPhone ipadではサイト背景がスクロールしてしまう障害が発生します 対処法はサイトで......
サイドメニューを押しやらない固定するレスポンシブウェブレイアウト
シリウスへのデフォルトレスポンシブウェブレイアウトでは サイドメニューが後方へ押しやられますが 位置を動かさない または メニューのサイズを固定可変がCSS指定により可能となります
レスポンシブウェブデザイン構造でのフォントサイズ指定
シリウスレスポンシブウェブデザイン構造でのフォントサイズは シリウス機能で16pxを指定していた場合 iPhoneサイトでは自動で縮小されてしまいます 見やすくする対応は?
レスポンシブウェブデザインに適合する画像サイズ
シリウスレスポンシブウェブデザインではスマートフォン パソコンの各画面では 掲載画像がどのように変化するのか?各端末に適合するサイズは?いろんな解釈がありますね
大きな縦サイズヘッダー画像はレスポンシブサイトでは読み込みが遅い
シリウスレスポンシブサイトでは大きな縦画像サイズのヘッダー画像を設置している場合 スマートフォンでは出現スピードの読み込みが遅くなります
端末により記事コンテンツを切り替え表示する
シリウスサイトをスマートフォンサイトでは記事列を横幅内に収めて または多少のコンテンツを替えて パソコンサイトと異なるコンテンツに切り替えて表示するカスタマイズ方法の詳細
スマートフォン PCコンテンツ切り替え時のシリウス機能操作
SIRIUS シリウススマホ PCデバイスでの切り替えコンテンツについて 初期指定の反映スタイル 付け加えたカスタマイズ説明による反映確認の詳細です
スマートフォン パソコンサイトで画像を切り替え表示指定する
当サイトのシリウスレスポンシブウェブデザイン構造ではスマートフォン パソコンサイト画面で画像の表示非表示の切り替え または異なる画像を表示することが指定出来ます
スマートフォンサイトではスライダー画像は必要か?
SIRIUS シリウスパソコンサイトでは綺麗に表示されるスライダー画像ですがスマートフォン閲覧サイトでは表示が必要ののでしょうか?
トップページ全体をワイドヘッダー画像で表示したい?の勘違い
SIRIUS シリウステンプレートへトップページ全体をワイドヘッダー画像で表示したい?といわれる方がおりますが ウェブ初期時の勘違い?ではないでしょうか とりあえずの講釈はこちらで....
レスポンシブウェブ構造でのワイドPC画面対応背景画像設定方法
シリウスのレスポンシブサイトに編集された背景画像を配置する際は ワイドサイズのウルトラPC画面でも 自動拡張されるようclass指定で設定を追加します
スマートフォンでは、固定のグローバルは出現させない
SIRIUS シリウスサイトでグローバルナビゲーションのスクロール固定化を指定している場合、スマホ閲覧の際、邪魔になるので出現しないよう指示しましょう
iphone設定からレスポンシブデザインへ移行する際の注意事
SIRIUS シリウスのiphone設定からレスポンシブデザインへ移行する際は、指定の解除およびサーバーファイルのiphone削除が必要です
ヘッダー画像のレスポンシブウェブデザイン構造、追加記載方法
SIRIUS シリウスレスポンシブ導入テンプレートでは、ヘッダー画像を縮小させる、またはスマートフォンサイトでは小さな画像に切り替えるとかの考え方も合わせ含めた対処方法