TOP

ワイドヘッダーでボディとスライドする指定方法及び伴うカスタマイズ    (中段以降掲載)

サイトの幅(記事行の範囲、サイドメニューまで)は、シリウスのデフォルトサイズで
ヘッダーサイズだけをPC画面の横サイズいっぱいに表示するという
ブログなどではみられるボディとヘッダーを重なりスライドするスタイルへのカスタマイズ

 

サイトスのクロールに従いボディ(記事台紙の部分)が、ヘッダーを覆い隠すという
シリウスのHTML、スタイルシートでCSS追加、書き換え調整で実現できます

 

現時点、私がみたところ、ワールドプレス公式サイトの配布テンプレートで1つ
グーグルブロガーテンプレートで複数の同作動が確認できましたが、
ワールドプレスでほとんど見られないは意外でした

 

ウェブ上全般ではもっと使われているような気がします....

 

画像で参照、もしくは当サイトのスクロールで確認してください

 

ヘッダーは固定されておりますね
ボディを上に上昇するとヘッダー上にスライド、重なり隠してますね

 

ノンスクロール状態

 

オンスクロール

 

トップのレイアウト順入れ替え
レイアウトの表示では、デフォルトではヘッダーがナビ下に位置されますが、
当サイトのCSS指定では画像例のようにサイトのトップに位置替えされます

 

HTML指定により、ナビを最上部に移動もできますが、ここで記載すると
コンテンツが重複してしまうので求める方は、以下サイトで指定方法をご確認ください
ナビの位置を変更するHTML指定

 


 

ヘッダー画像について

 

今回の解説では、シリウス操作画面で導入するヘッダー画像を使用します

 

ワイドサイズで表示する場合、自動拡張はされないので原本サイズを
拡張してください..

 

寸足らずの場合は、スペースが空きますが、1800Px以上でならおさまるかと思います

 

お詫び
ヘッダーがレスポンシブ化しなったようですみません
追加記載してますのでご確認ください

 

ボディは拡張されるが、サイト幅はデフォルトのままの意味

 

今回のボディとヘッダーのスライド効果を見ると、ボディ全域が上に移動します

 

しかし、デフォルトのサイト幅はそのままに抑えられておりますね

 

これは、記事の背景のみをフルオートで自動拡張

 

しかし、サイト幅は、記事やサイドメニューがおさまる枠コード、
layoutboxでデフォルトそのままに位置に置かれるよう指定しているからです

 


 

追記 スマホの表示でヘッダー縦幅が半分しか表示されない?

 

ヘッダーの画像の縦幅なのですが、枠にちょうど収まるサイズですとスマートフォン表示の場合、
50%の表面積に縮小してしまう..縦半分が小さくなり..背景が表れるのです

 

下の見えない箇所も倍の比率で入れときましょう
それでもPC画面では数値指定してますので表示されるのは上のサイズ分だけです

 


 

改行に進みます

 

 

スタイルシートを開いてください

 

ステップ1
contentsの幅を書き換え

 

記事台紙 ボディをフルオートで自動拡張

 

/* レイアウト
==================================================
*/
#wrapper {
overflow: hidden;
text-align: center;
}
#contents {
margin: 0 auto;
padding: 30px 0 50px;
position: relative;
text-align: center;
width: 900px;  /* ここを auto にする */
background-color: #FFF;
}

 

 

 

 


 

ステップ2 

 

ヘッダー画像のワイド指定とレスポンシブ化指定

 

 

ヘッダー画像をPC画面サイズいっぱいに拡張するは、
/* ここからの記載を追加する */を確認

 

/* ヘッダー
==================================================
*/
#headerbox .inner {
text-align: center;
}
#header {
height: auto;
margin: 0 auto;
position: relative;
text-align: left;
width: 900px;

 

/* ここからの記載を追加する */
   position: fixed !important;
   position: absolute;
   top: 0px;
   left: 0;
     width: 100%;
     z-index: -10;

 

}
ここまでを追加です

 

 

レスポンシブ化を指定する
上記項目のすぐ直下にある header imgをメディアコードで囲む作業へ進みます

 

現本を確認
#header img {
left: 0;
position: absolute;
top: 0;
}

 

 

 

以下に書き換えてください(コード追加です)

 

@media screen and (max-width: 640px) {

 

#header img {
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 200px;
}
}

 

説明をお読みください

 

ノンカスタイズのレスポンシブCSSでしたらこのままでも自動縮小するのですが
今回の変更を加えると不作動となってしまうため media コードで囲みました

 

height: 200px;は、なぜ追加したか?ですが、デフォルトTP同様自動縮小に従い縦幅も
狭りますね...その回避措置
それはそれでよいというなら、はずしてください

 

ただし、横画像だけせばまるが、縦幅はそののまま...変化を確認しご判断ください

 


 

 

ステップ3

 

記事内幅を指定する

 

#contentsでは、記事台紙をフルオートにしましたが、
記事行 サイト幅はlayoutbox内に収めるための
指定です

 

この行を、組み込まない場合は、記事行、サイドメニューがPC画面いっぱいに
表示されます

 

この記述は、改行ではありません
新たな追加行ですので

 

layoutboxの下においてください

 

#layoutbox{
margin: 0 auto;
padding: 0px 0 50px;
position: relative;

 

background-color: #FFF;
    width: 900px;

 

}

 

上は、PC用です

 

アイフォン スマートフォンで記事行が折り返えされる作用を指示するため
以下行も追加してください

 

 

@media screen and (max-width: 900px) {
#layoutbox{
margin: 0 auto;
padding: 0px 0 50px;
position: relative;

 

background-color: #FFF;
    width: 100%;
}
}

 


 

ここまででスライド化は作動します

 

 


 

できなくなる変更手段

 

このカスタマイズを実行した場合、できなくなることがございます

 

サイトオプションからの背景画像、サイトの両脇背景色の変更

 

記事台紙、ボディを拡張してしまうため、その下階層に置かれる
背景画像、サイトの両脇背景は設定しても上重なりにボディがあるため
見えなくなります

 

上に重なる台紙を画像化することは可能です
けれど、固定化スクロールに台紙が追従してしまうので画像の最下部(縦幅)の
終了地点から再度、次のリピート画像が現れてしまうのですね

 

再度表示される画像のつなぎ目 例は、明暗のある画像

 

 

テスクチャ画像(デザイン模様)などの連動性画像で、スクロールしてもつなぎ目が
気にならないもの,,であれば使うことはできます

 


 

記事台紙を画像化する

 

contentsのカラー指定を画像読み込みコードに書き換え、layoutboxの
カラー指定を削除するか、透明コードにすれば変換されます

 

#contents {
margin: 0 auto;
padding: 30px 0 50px;
position: relative;
text-align: center;
width: auto;
background-color: #F8F8F1;
}
#layoutbox{
background-color: #F8F8F1;
overflow: hidden;
padding: 5px 10px;
}

 


 

背景色の変更

 

背景色の変更は、可能ですので、以下リンク、次のページで詳細をご確認ください
記事contents、サイト背景のカラー指定方法

 

その他、気が付きましたら書き加えます

 


 

背景色を変えた場合で2カラムのお話

 

ブログなどで見られる、記事幅のみ白枠にする
以下例

 

記事幅を上から巻末まで色替えするなら、HTMLテンプレートで指示すれば変更可能ですが
項目ごとの隔たり?ブロック分け....組み分けができなくなります
記事幅が上から下まで同一色になるので...(.一応以下に設定方法は付け加えときます)

 

ですが、シリウスのボックス枠を使えば組み分けて、いくつもまとめられますけど.....
デフォルト指定の背景色変えないといまいち

 

では、背景色を変える手順へ進みます

 

灰色枠ではなぜか?色替えできなかったので黄色枠を選択しました

デフォルトの黄色枠を白背景にしました

 

ボックス枠は、カスタムしやすいylwboxの背景色と枠線をスタイルシートで書き換えします

 

操作画面より、黄色枠を指定すると、以降白背景で現れるようにするのです
枠線もサイトに合うよう色替えしてくださいね

 

書き換え手順
スタイルシートからcommonstyes.cssを開いてください

 

ボックスに到達して、次に以下の赤マークの行を書き換えるのです

 

 

/* ボックス */

 

.nmlbox,.dottbox,.ylwbox,.graybg{
padding:15px;
margin-top: 10px;
margin-bottom: 10px;
clear:both;
}

 

.graybg{
background-color:#EBEBEB;
}

 

.dottbox{
border:dotted 1px #666;
}
.nmlbox {
border: 0.2px solid #CCCCCC;
}
.ylwbox {
background-color: #FFFFD2; /* 背景カラー カラーコード#FFF */
border: 2px solid #CC0000; /* 枠線の太さとカラー */
}

 

ここまで

 

枠線は、デフォルトでは2pxで太すぎるかと思いの場合は、1とか0.5に書き換えます
色を変えてみる
もしくは、0にすると非表示となります

 

後で、気が付いたことですが、フォントカラーが濃すぎると思われたなら
やや薄くしてみることも選択の一つです

 

 

HTMLテンプレート内で指定する場合

 

ボッツクスコードの付け方は二つです
<div class="ylwbox"></div>

 

h3タイトルまで囲う形
<div class="ylwbox">
<% textTitle1 %>
<% textBody1 %>
</div>

 

 

h3タイトルから下で表す形
<% textTitle1 %>
<div class="ylwbox">
<% textBody1 %>
</div>

 

 


角丸スタイル加工

 

角がかくかくでは、ごつすぎる、柔らかく丸みを付けたいという場合
参考画像

 

記述(radius)を.ylwbox内に追加してください

 

.ylwbox {
background-color: #FFFFD2;
border: 2px solid #CC0000;
border-radius:6px; /* 追加コード */
}

 

 

 

border-radius:6px;、丸み具合は数値を変えて調節してください

 

 


 

カスタマイズを加えると何かしら、気が付くこともあると思います
不明な点は、サポートよりお知らせください

 

レスポンシブサイト専用のサポートまとめ

 

 

 

ワイドヘッダー拡張設定に視差効果を含めるカスタマイズ
ヘッダー画像を固定化、奥行きの視差効果を加える指定方法まとめ
トップページ

関連ページ

ヘッダーとボディの重なりをスライド化させる(デフォルトサイズ)
ボディスライドでヘッダーをオーバースクロールする視差効果をシリウスのデフォルトサイズに設定する方法
記事及びサイト背景のカラー指定方法
ワイドヘッダーをボディスライドで隠すカスタマイズを設定した場合の記事及びサイト背景のカラー指定方法をご案内します