当該解説は、シリウステンプレートの標準９００Pxサイズ専用のカスタマイズです

 

専用と言う理由は、サイトの調節で効果を反映する指定に限定されるわけで

 

標準サイズをオーバーすると各CSS指定から大幅に変えなければならない
必要に迫られるのです

 

したがって、ここでの解説は標準に合わせたもの

 

オーバーサイズでカスタマイズする場合は、また異なる記述となります

 

---

 

前置き注意事

 

ここから解説へと進めますが、このカスタムを導入すると、h1テキストがヘッダータイトル
とふたつ表示されてしまいます

 

 

どちらかを非表示としなければなりません

 

ヘッダータイトルならサイトオプションで非表示指定

 

h1テキストを非表示にするなら、スタイルシートで、display: block;の追加

 

*/
/* トップ
==================================================
*/
#top {
margin: 0 auto;
text-align: left;
width: 900px;
}
#top #logo, #top h1 {
padding: 75px 0;
width: 600px;

 

}
#top #logo a, #top h1 a {
color: #83705e;
text-shadow: 0 0 1px rgba(131,112,94,.3);
font-size: 26px;
font-weight: 600;
text-decoration: none;
　　　　display: block;　ここに追加しました

 

}

 

 

 

ヘッダー画像はデフォルトのサイズでが条件に当てはまりますが
それ以外の場合は、下方に注釈アリです

 

 

記事背景、サイト背景とも白を選択している場合のみ正常反映

 

サイト背景が画像の場合は、不思議な光景になります？
で、お勧めしません

 

画像の視差で奥行きを感じさせると言ってはおりますが、
それは画像によります
シリウスにそなえあるヘッダーでは遠近感は感じられません

 

遠近処理を打ち出すにはそれなりの画像を用意してください

 

---

 

 

デフォルトサイズに視差効果を組み込んだ例

 

 

スクロールすると記事台紙　ボディがヘッダーを下から覆いつくしていきます

 

 

 

 

導入手順は、いたって簡単

 

スタイルシートひらいて

 

/* ヘッダー
==================================================
*/
#headerbox .inner {
text-align: center;
}

 

ここから改行
#header {
height: 350px;
margin: 0 auto;
position: relative;
text-align: left;
width: 900px;
}

 

ここまでの間

 

 

 

改行コード　コピーして張替え

 

#header {
height: auto;
margin: 0 auto;
position: relative;
text-align: left;
width: 900px;

 

position: fixed !important;
position: absolute;
top: 0px;
left: 309.5px;
　　width: 100%;
　z-index: -10;
}

 

 

---

 

上記コードを配置してプレビュー確認するとヘッダー画像の縦サイズが
小さくなっていますので調整します

 

もう一つの改行

 

 

スタイルシート370番付近

 

/* トップ
==================================================
*/
#top {
margin: 0 auto;
text-align: left;
width: 900px;
}
#top #logo, #top h1 {
padding: 28px 0;　ここです
width: 600px;

 

}

 

ここまで

 

padding: 28px 0;を　padding: 75px 0;と書き換えてください

 

ヘッダー画像の縦サイズがデフォルトサイズと異なる場合
ずれが見られますので、28の数値を上げるか下げるかで位置調整してください

 

当サイトのヘッダー画像にみられる拡張サイズのカスタマイズは
CSSともに事情がことなるので別解説として追記しております
次のリンクへお進みください
ワイドヘッダー拡張設定に視差効果を含めるカスタマイズ

 

ヘッダーとボディの重なりをスライド化させる（デフォルトサイズ）
ヘッダー画像を固定化、奥行きの視差効果を加える指定方法まとめ
トップページ

 

関連ページ

ワイドヘッダー拡張設定に視差効果を含めるカスタマイズ

シリウスの標準規格ヘッダー画像のサイズをワイド化設定し、ボディと重なりをずらしスライド効果を指定する方法

記事及びサイト背景のカラー指定方法

ワイドヘッダーをボディスライドで隠すカスタマイズを設定した場合の記事及びサイト背景のカラー指定方法をご案内します