(cache) Javascriptはいらない！スタイルシートだけでヘッダーを追従させる方法【Simplicity】

こんばんは、久しぶりにWebレポートを記述します。

突然ですが、ヘッダー(header)が追従してくるサイトを見かけたことはありませんか？

ヘッダー追従を行うには、Javascriptとスタイルシートを記述するパターンと、Jqueryを外部から呼び出す方法、スタイルシートのみを使って記述する方法の３通りがあります。

今回は、簡単なスタイルシート(CSS)の記述を行い、スタイルシートだけでヘッダーを追従させる方法について注目していきます。

※：Simplicityテーマをカスタマイズして行います。すでにカスタマイズされている方、違うテーマの方が取り入れると上手く動作しない場合があります。くれぐれもバックアップを取った後にカスタマイズに挑んでください。

そこで、レポ部は・・・

Javascriptはいらない！スタイルシートだけでヘッダーを追従させる方法【Simplicity】

をレポートしたいと思います。

ヘッダー(Header)を固定する

ポイントとなるメソッドは<position>です。

ポジション<position>でフィックス<fixed>を指定すればヘッダーが固定されます。

メニューバーの横幅<width>を100%に指定することで、横幅いっぱいのヘッダーを固定するように暗示をかけています。ただ、これだけでは、マウスを下にスクロールしたときに、前面と後面の干渉が上手く行かないようなので、結果的に透けて見える現象に陥るようです。

奥行き<z-index>を指定すれば前面と後面の干渉を操作することができ、ヘッダー<header>を前面に、その他の要素<etc>を後面に指定することが可能となります。(数値は多ければ多いほどに最前面に来る仕組みです)

早速、ソースコードを見ていくことにしましょう。

#header{
position: fixed; /*メニューバーを固定*/
width:100%; /*おまじない*/
z-index: 999; /*ヘッダーを最前面に表示*/
background-color: #ffffff; /*背景色を白色にする*/
border-bottom:1px solid #DCDCDC; /*ヘッダーの下に線を付ける*/
}

#header{

position: fixed; /*メニューバーを固定*/

width:100%; /*おまじない*/

z-index: 999; /*ヘッダーを最前面に表示*/

background-color: #ffffff; /*背景色を白色にする*/

border-bottom:1px solid #DCDCDC; /*ヘッダーの下に線を付ける*/

}

ただ、固定しただけでは、下のメニューバー<navi>が上にズレて表示されるため、メニューバー<navi>を、数ピクセル(px)ほど下に移動させる必要があります。

メニューバー(Navi)を下に数ピクセルほど移動させる

ヘッダー(header)を固定させることができれば、

外観 → カスタマイズ → ヘッダー → ヘッダーの高さ

の数値を参考にしつつ、調整(移動)する必要があります。

ヘッダーの高さが 70 であるならば、「+25」した値、すなわち、「95」を設定すれば問題はないように感じます。

ヘッダーの高さで設定した数値と、以下(ソースコード)の<padding>の「95」の数値を操作しつつ、自分にピッタリなバランスを考えてください。

※：ヘッダーの高さよりも<padding>の数値は大きいことが絶対条件です。タイトル画像(ロゴ)を設定していた場合、大きさによっては、かなり大きい値になる場合があります。「+25」を基準にバランスを取ってください。

#navi{
padding: 95px 0px 0px 0px; /*上(px) 右(px) 下(px) 左(px)*/
}

#navi{

padding: 95px 0px 0px 0px; /*上(px) 右(px) 下(px) 左(px)*/

}

ソースコード(結果)

簡単な追従システムを実装するだけならば「ソースコードの追加」と「外観の編集」を並行して進めれば実装できてしまいます。

Javascriptは難しくて手が出せないよ

スタイルシートだけでカスタマイズできないかな

Javascriptでは実装できなかった

このように感じる方はスタイルシートだけで実装してみてはいかがでしょうか？

以下ソースコードがスタイルシートに記入する内容です。

#header{
position: fixed; /*メニューバーを固定*/
width:100%; /*おまじない*/
z-index: 999; /*ヘッダーを最前面に表示*/
}
#navi{
padding: 95px 0px 0px 0px; /*上(px) 右(px) 下(px) 左(px)*/
}