ヘッダースペースの拡張(注意事項あり)
シリウスの新1.5テンプレート...ビジネス、デフォルトテンプレート対応
ヘッダー画像の横スペースを拡張するとは、どんなイメージになるでしょう...
ま、ワードプレスにせよ他ブログ、ホームページ等でもよく見られるスタイルですが、
シリウス機能ではそんなスタイルの表示法が見当たらない...
あるとすればビジネステンプレート?かもしれないが、ナビゲーションは横幅拡張
スタイルながらも...ヘッダー画像サイズはサイト幅同様...の範囲に収まっていますね..
(このカスタマイズは、レスポンシブテンプレートでは実行済み)
で、新テンプレートでも実行したくて..弄り回し...
そこで大変申し訳ございませんが、ビジネス、デフォルトの新テンプレートは、どちらも
シリウス操作機能(サイトの横幅)で、自由にサイズ設定ができますね..
(前バージョンでは、ビジネスは横幅サイズ指定..操作機能では対応していなかった..
スタイルシートで数値変更していたのです..)
それが、サイト幅以上のヘッダーサイズ拡張のカスタマイズをを邪魔しているみたい..
.なんですね?
レスポンシブテンプレートは、自由にサイト幅やレイアウトをいじれる..のですが、
操作機能でサイト幅調整する仕様の場合..以下参照...
○重要.....○
初期のデフォルト横サイズ...そのままでしたら今回の仕様変更が通用しますけど、
1pxでも数値をいじると設定は解除されてしまいます...
これ大事
スタイルシートでサイト幅、ヘッダー幅を指定替えした場合...それが優先されるわけ
ですけど...操作画面でも再指定すると複合指示で読み取りエラー...レイアウト崩れに
なります..
特殊なレイアウト..デフォルトスタイルを大幅に変えるカスタマイズをする際は、
デフォルトのサイズで固定したまま進めるか...スタイルシートで改変を指定した際は、
操作画面でのサイズ変更はしない...(デフォルトのまま置いとく)
事前、ご了承ください...
参照例...デフォルトテンプレート(認識のため背景はグレーにしてございます)
ビジネステンプレート
作動状況...
レスポンシブ指示コードを組み入れしてますので、隙間なく縮小、拡張が行われます..
作業....いたって簡単.. 二つの工程で完了します
以下コードをスタイルシート ユーザー指定スタイルに張り付け...
#header {
background-color: #fff;
height: auto;
overflow: hidden;
position: relative;
width: 2000px;
left:top;
}
@media screen and (min-width: 768px) {
#header {
background-color: #fff;
height: auto;
overflow: hidden;
position: relative;
width: 100%;
left:top;
}
}
@media screen and (max-width: 768px) {
#header {
background-color: #fff;
height: auto;
overflow: hidden;
position: relative;
width: 100%;
left:top;
}
}
ここまで...
貼り付けが終わりましたら、プレビューで確認ください..
シリウスで用意しているヘッダー画像でも自動で拡張されているはずですが、
もともと拡張に合わせていないサイズなので...できれば、横幅2000..無ければ1500px
ほどのヘッダー画像を作成してシリウス機能 全体設定で読み込んでください...