サイトマップ
シリウスのヘッダー画像をレスポンシブウェブデザイン構造として表示するカスタマイズ
シリウスのデフォルトhtmlテンプレートに レスポンシブウェブ構造は
組み込まれておりませんが
@media記述を加えることでレスポンシブ化サイトとしての機能表示が
可能となります
しかし 当サイトおよびネット上で得られるレスポンシブウェブデザイン構造
記述コードではシリウステンプレートのヘッダー画像のみが
スマートフォンデバイスでは伸縮されず 左位置画像が認識できる
範囲におさえられているようです
事情はシリウス機能が影響していると判断しておりますが
現在のところ解明できてはいませんが サポートより稼働状態に
できないものかと？
ご質問がよせられておりますので 無理くりのカスタマイズではありますが
ご案内いたします
ですが 面倒もあり採用する しないは充分にご検討後
ご判断ください
解説は当サイト公開のレスポンシブウェブデザイン構造記述を
対象にしておりますので他の構造に関しての対応は不明です
反映度合いは
タブレット関連ではモニター画面が小さくもないので 然程の影響は
ないものの スマートフォンフォンでの閲覧の際は 中心が右に隠れ
画像の一部が不認識になってしまうのですね
レスポンシブウェブデザイン構造がヘッダー画像にのみ 影響を
与えることが出来ない！という状況
ヘッダー画像にのみレスポンシブ化不作動という状況を正常に
するためＨＴＭＬおよびＣＳＳにあらゆる指定を追加をしたのですが
スタイルシートの
background-image: url(img/header.jpg)行;記述に置く
ヘッダー画像は全然動いてくれません
なぜなんでしょう？
そこで シリウス機能でヘッダー画像を読み込むのではなく
html内に画像をおいて スタイルシートで読み込むという方法で
進めましたところ とりあえずはヘッダー画像をレスポンシブウェブデザイン
構造として作動表示できるようになりました
スポンサーリンク
お断り
ヘッダー画像を伸縮する方法として ロゴ画像を拡大表示させ
スタイルシートで指示すれば とりあえずは伸縮するヘッダー画像は
設定はできますが ロゴ機能はヘッダータイトルの箇所を画像に切り替えて
表示するもので タイトル表示機能が使えなくなります
ロゴ画像を編集して タイトルをフォントデザイン画像として
入れ込みはできますがあくまで画像なので狭まると意味不明？
となるのです
ページ追加ごとにタイトルを含めたヘッダー画像編集するのも大変面倒！
ですので
ここでの解説は 通常にタイトルをシリウス機能で切り替え可能な
方法で進めています
通常
レスポンシブウェブ化のスタイル
以上のようにレスポンシブウェブ化しての反映されますが
シリウス機能を無視した構造なのでスタイルに制限がございます
作動状況をご案内します
ヘッダー画像は右から左へ伸縮変化します
縮小は横幅が伸縮するもので 縦サイズは変化しません
縦サイズをレスポンシブウェブ化もできたのですが ここにはタイトルやその他が
3つほど置かれているので 縦稼働すると意味不明な構成になってしまうので
不指定としました
ですので 横幅のみの縮小でのヘッダー画像をご確認の上
採用するかどうかはご判断ください
サイトタイトル ｈ１タイトルも伸縮変化します
構築の状況
デフォルトで今置いてるスタイルシート内のヘッダー画像呼び出し指定
記述はあるものの
レスポンシブ化しませんが 削除や改行はせずそのままの状態に
しておきます
レスポンシブ化しないヘッダー画像の上に 作動する別なヘッダー画像を
上乗せして表示しますので 置いといても問題なし
上乗せするヘッダー画像は 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要素で囲まず 画像コードのみを置いた場合で サイトを
レスポンシブ構造にしているなら この段階でも画像だけは作動は
反映されますが
画像だけならです
ｈ１テキストやサイトタイトルは 画像の下階層にあるので
認識できないのですね
もし
ヘッダー画像内にサイトタイトルをデザインとして組み込んでいる場合は
この段階で終了することも可能です
画像のみ横変化の際は div 要素で囲まず 画像コードのみ
以下のdiv要素で囲むと 通常のサイトに置く画像伸縮になりますが
何とも？
調整不能なスタイルになります
お試し参考程度に
<div>画像コード</div>
次は ｈ１テキストやサイトタイトルをレスポンシブウェブデザイン構造として
正常に表示させるためのスタイルシートでのｃｓｓ指定に進みます
スタイルシート指定
以下行に到達してください
/* 基本レイアウト */
#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;
}
ＨＴＭｌに追加行の画像コードを読み込みする記述です
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タイトルもｐｃ画面では認識できるものの
未指定では縮小画面では消えてしまいます
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;
}
以上ですが 以降精度を上げるための事実が判明次第
追記いたします
異なる意見
ここまで来て失礼ながら最終章に異なる意見を追記いたします
画像にタイトルフォントを画像として構成している場合は
レスポンシブ化すると フォントまで画像なので縮みます
今回は サポートへ ヘッダー画像もレスポンシブ化できないかとの
ご質問がよせらましたので追記いたした次第ですが
画像をレスポンシブ化すると 丸が卵になるわけで何とも？
イマイチ！
あちこちの大手サイト見てみると ２種類か3種類のヘッダーを
用意しておいて 端末のサイズに合わせてレスポンシブせずの
通常画像を読み込んでいる様子
そちらのほうが良いのではと？
思う次第で！
ある程度大まかに サイズ違いでヘッダー画像を複数用意して
閲覧される端末の画面サイズに合わせて読み込ませる方法も
シリウスではカスタマイズが可能です
こちらは 2種類の仕様方法ですが
シリウスヘッダー画像をレスポンシブウェブでは切り替え表示する方法
こちらは コンテンツ違いですが メディアクエリを解釈すれば
とりあえず3種類が可能
パソコン スマートフォン画面でどちらも記事列を適合表示する指定
細かくメディアクエリを分割すれば4つでも5つでも
でもそんなに必要ないかも？
当サイトは ヘッダー画像はレスポンシブ化指定とせずに通常画像を
二つ パソコン用と スマートフォン タブレットアイフォンサイズで
切り替え表示しています
例外
ビジネステンプレートみたいなグローバルの下にヘッダーが位置する
サイトも多くございますね
ビジネステンプレートスタイルでグローバル下にヘッダーもどきを
表示させることもできます
WPでよく見かけますが
ヘッダーは縦を縮小して単色でタイトルのみ
グローバルメニュー下に画像としてサイト幅同様の画像を置くのです
画像なので綺麗に縮小はしますが
スタイルシートをいじらねばなりません
メニュー位置を下げるとかですね
ご参考でした
では頑張ってください？
ヘッダー画像をレスポンシブウェブデザイン構造で作動させる方法
SIRIUS シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ
- サイトをレスポンシブウェブ化カスタマイズする今事情
- SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
- レスポンシブウェブデザイン設定事情を理解しよう
- シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にＣＳＳを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
- レスポンシブウェブデザイン変更前の説明
- SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
- レスポンシブウェブデザインカスタマイズのレイアウト変更値
- シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する2重構造をｃｓｓ指定値カスタマイズを含めて複数解説します
- ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
- シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
- デフォルト一カラムレスポンシブウェブデザイン設定
- シリウスデフォルト一カラムテンプレートへレスポンシブウェブデザイン構築を追加する事は 2カラム同様簡単に設定ができます
- 2カラムテンプレート レスポンシブデザイン設定方法
- SIRIUS シリウス２テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
- 3カラムテンプレート レスポンシブウェブデザイン追加方法
- SIRIUS シリウス3カラムテンプレートへレスポンシブウェブデザイン設定を追加するカスタマイズ手順をご案内しております... 検証済み 面倒はありませんよ
- 2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ
- SIRIUS シリウスサイト2カラムをトップページとカテゴリー以下でレイアウトサイズを異なるスタイルで表現する2段階表示のレスポンシブデザインのカスタマイズの解説です
- トップページのみをレイアウト替えした際のカスタマイズ色々
- シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
- レスポンシブサイトの見出しメニューを調整するカスタマイズ
- シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます
- レスポンシブウェブデザイン公開ではiPhoneサイト設定も必要
- シリウスをレスポンシブウェブデザインとして公開するに至り iPhoneサイト設定も必要ということが判明しましたのでお知らせいたします
