TOP

ヘッダースペースの拡張(注意事項あり)

シリウスの新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
ほどのヘッダー画像を作成してシリウス機能 全体設定で読み込んでください...

 

ヘッダー画像をPC画面いっぱいのサイズに拡張する手順
トップページ