サイトマップ
ヘッダー画像をレスポンシブウェブデザイン構造として作動させるには
シリウスのデフォルト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で指定しました
ここまでは シリウスのスタイルシート原本への改行でした
<span style="color:#FF0A0A">次は、レスポンシブウェブデザイン構造へ追加行</span>
@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;
}
}
当サイトで公開しているレスポンシブコードへ改行追加行を加えれば
今回のレスポンシブ化するヘッダー画像の追加作業は完了します
<span style="color:#FF0A0A">追加説明</span>
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: とはサイトの表示階層を指定します
サイトは背景画像や記事 メニュー枠等 すべてが同じ重なり位置に
あるのではないのですね
一階層ずつにあるコンテンツが重なり一つのサイト構成として
確認できることになるのです
シリウスもそのような階層の重なりで構成されているのですが
カスタマイズを加えることでデフォルトの指定を一部ですが
変更としました
サイト構築のカスタマイズでは使う機会も多い指定値です
<span style="color:#FF0A0A">h1指定行について</span>
今回のカスタマイズでは、通常のヘッダー画像内に表示される
テキストが指定なしでは覆い隠され表示されなくなります
サイト左上に表示される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;
}
以上ですが、以降精度を上げるための事実が判明次第
追記いたします
<span style="color:#FF0A0A">異なる意見</span>
ここまで来て失礼ながら最終章に異なる意見を追記いたします
画像にタイトルフォントを画像として構成している場合は
レスポンシブ化すると フォントまで画像なので縮みます
今回は、サポートへ、ヘッダー画像もレスポンシブ化できないかとの
ご質問がよせらましたので追記いたした次第ですが
画像をレスポンシブ化すると丸が卵になるわけで何とも？
イマイチ！
あちこちの大手サイト見てみると、２種類か3種類のヘッダーを
用意しておいて、端末のサイズに合わせてレスポンシブせずの
通常画像を読み込んでいる様子
そちらのほうが良いのではと？
思う次第で！
ある程度大まかにサイズ違いでヘッダー画像を複数用意して
閲覧される端末の画面サイズに合わせて読み込ませる方法も
シリウスではカスタマイズが可能です
こちらは 2種類の仕様方法ですが
シリウスヘッダー画像をレスポンシブウェブでは切り替え表示する方法
こちらはコンテンツ違いですが、メディアクエリを解釈すれば
とりあえず3種類が可能
パソコン スマートフォン画面でどちらも記事列を適合表示する指定
細かくメディアクエリを分割すれば4つでも5つでも
でもそんなに必要ないかも？
当サイトは ヘッダー画像はレスポンシブ化指定とせずに通常画像を
二つ パソコン用と スマートフォン タブレットアイフォンサイズで
切り替え表示しています
例外
ビジネステンプレートみたいなグローバルの下にヘッダーが位置する
サイトも多くございますね
ビジネステンプレートスタイルでグローバル下にヘッダーもどきを
表示させることもできます
WPでよく見かけますが
グローバルメニューの上ではなく、下に画像としてサイト幅同様の画像を
置くのです
画像なので綺麗に縮小はしますが、シリウスのビジネスではヘッダーの
非表示をスタイルシートで指定することになります
その際は、メニュー位置を下げるとかも必要です
ちとめんどうかな～
シリウスにレスポンシブテンプレートが追加されました
以前に販売された特典テンプレートほどの派手なデザインでは
無いもののしっカリと作りこまれた精度の高いものでしたが
デフォルトテンプレートとしては使えなく、ビジネスＴＰ同様
サイト幅やサイドメニューの拡張は、スタイルシートで行う手動タイプ
これならヘッダーのうまい縮小ができるかなと思いまして
反映を確認しましたら 縦横とも伸縮はするのですが、周りに空白が
現れてしまい、ま、いまいちかな～程度の評価？
ご参考でした
では頑張ってください？
スポンサーリンク
ヘッダー画像のレスポンシブウェブデザイン構造、追加記載方法
SIRIUS シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ
組み込まれておりませんが、全体的な範囲では
@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で指定しました
ここまでは シリウスのスタイルシート原本への改行でした
<span style="color:#FF0A0A">次は、レスポンシブウェブデザイン構造へ追加行</span>
@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;
}
}
当サイトで公開しているレスポンシブコードへ改行追加行を加えれば
今回のレスポンシブ化するヘッダー画像の追加作業は完了します
<span style="color:#FF0A0A">追加説明</span>
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: とはサイトの表示階層を指定します
サイトは背景画像や記事 メニュー枠等 すべてが同じ重なり位置に
あるのではないのですね
一階層ずつにあるコンテンツが重なり一つのサイト構成として
確認できることになるのです
シリウスもそのような階層の重なりで構成されているのですが
カスタマイズを加えることでデフォルトの指定を一部ですが
変更としました
サイト構築のカスタマイズでは使う機会も多い指定値です
<span style="color:#FF0A0A">h1指定行について</span>
今回のカスタマイズでは、通常のヘッダー画像内に表示される
テキストが指定なしでは覆い隠され表示されなくなります
サイト左上に表示される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;
}
以上ですが、以降精度を上げるための事実が判明次第
追記いたします
<span style="color:#FF0A0A">異なる意見</span>
ここまで来て失礼ながら最終章に異なる意見を追記いたします
画像にタイトルフォントを画像として構成している場合は
レスポンシブ化すると フォントまで画像なので縮みます
今回は、サポートへ、ヘッダー画像もレスポンシブ化できないかとの
ご質問がよせらましたので追記いたした次第ですが
画像をレスポンシブ化すると丸が卵になるわけで何とも？
イマイチ！
あちこちの大手サイト見てみると、２種類か3種類のヘッダーを
用意しておいて、端末のサイズに合わせてレスポンシブせずの
通常画像を読み込んでいる様子
そちらのほうが良いのではと？
思う次第で！
ある程度大まかにサイズ違いでヘッダー画像を複数用意して
閲覧される端末の画面サイズに合わせて読み込ませる方法も
シリウスではカスタマイズが可能です
こちらは 2種類の仕様方法ですが
シリウスヘッダー画像をレスポンシブウェブでは切り替え表示する方法
こちらはコンテンツ違いですが、メディアクエリを解釈すれば
とりあえず3種類が可能
パソコン スマートフォン画面でどちらも記事列を適合表示する指定
細かくメディアクエリを分割すれば4つでも5つでも
でもそんなに必要ないかも？
当サイトは ヘッダー画像はレスポンシブ化指定とせずに通常画像を
二つ パソコン用と スマートフォン タブレットアイフォンサイズで
切り替え表示しています
例外
ビジネステンプレートみたいなグローバルの下にヘッダーが位置する
サイトも多くございますね
ビジネステンプレートスタイルでグローバル下にヘッダーもどきを
表示させることもできます
WPでよく見かけますが
グローバルメニューの上ではなく、下に画像としてサイト幅同様の画像を
置くのです
画像なので綺麗に縮小はしますが、シリウスのビジネスではヘッダーの
非表示をスタイルシートで指定することになります
その際は、メニュー位置を下げるとかも必要です
ちとめんどうかな～
シリウスにレスポンシブテンプレートが追加されました
以前に販売された特典テンプレートほどの派手なデザインでは
無いもののしっカリと作りこまれた精度の高いものでしたが
デフォルトテンプレートとしては使えなく、ビジネスＴＰ同様
サイト幅やサイドメニューの拡張は、スタイルシートで行う手動タイプ
これならヘッダーのうまい縮小ができるかなと思いまして
反映を確認しましたら 縦横とも伸縮はするのですが、周りに空白が
現れてしまい、ま、いまいちかな～程度の評価？
ご参考でした
では頑張ってください？
スポンサーリンク
ヘッダー画像のレスポンシブウェブデザイン構造、追加記載方法
SIRIUS シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ
ヘッダー画像のレスポンシブウェブデザイン構造、追加記載方法関連解説
- サイトをレスポンシブウェブ化カスタマイズする今事情
- SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
- レスポンシブウェブデザイン設定事情を理解しよう
- シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にＣＳＳを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
- レスポンシブウェブデザイン変更前の説明
- SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
- レスポンシブウェブデザインカスタマイズのレイアウト変更値
- シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する2重構造をｃｓｓ指定値カスタマイズを含めて複数解説します
- ヘッダー画像をレスポンシブウェブ構造で作動させる方法
- シリウスへレスポンシブウェブデザインを追加構築してもヘッダー画像だけがレスポンシブ化作動不能という場合は こちらのサイト解説を参考にしてください 取り合えずは伸縮致します
- ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
- シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
- デフォルト一カラムレスポンシブウェブデザイン設定
- シリウスデフォルト一カラムテンプレートへレスポンシブウェブデザイン構築を追加する事は 2カラム同様簡単に設定ができます
- 2カラムテンプレート レスポンシブデザイン設定方法
- SIRIUS シリウス２テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
- 3カラムテンプレート レスポンシブウェブデザイン追加方法
- SIRIUS シリウス3カラムテンプレートへレスポンシブウェブデザイン設定を追加するカスタマイズ手順をご案内しております... 検証済み 面倒はありませんよ
- 2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ
- SIRIUS シリウスサイト2カラムをトップページとカテゴリー以下でレイアウトサイズを異なるスタイルで表現する2段階表示のレスポンシブデザインのカスタマイズの解説です
- トップページのみをレイアウト替えした際のカスタマイズ色々
- シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
- レスポンシブサイトの見出しメニューを調整するカスタマイズ
- シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます
