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

シンプリシティー

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

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

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

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

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

そこで、レポ部は・・・
Javascriptはいらない!スタイルシートだけでヘッダーを追従させる方法【Simplicity】
をレポートしたいと思います。
スポンサードリンク

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ソースコード(結果)

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

悲しい
Javascriptは難しくて手が出せないよ
落ち込む
スタイルシートだけでカスタマイズできないかな
諦める
Javascriptでは実装できなかった

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

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

Simplicityでヘッダー追従を行うと良い点

なんといっても、ソーシャルメディアを左右で追従させなくても、ホームボタン(ロゴ画像)とソーシャルメディアの投稿リンクの誘導をスムーズに行うことができる点です。

  • ブログタイトル(ロゴ画像)をクリックするとトップページへ飛ぶ
  • ソーシャルメディアへのクリック数が増加する

まさに、一石二鳥ですよね。ソースコードにお詳しい方でしたら、「内部検索バー」を<position>メソッドを利用してヘッダー内に表示させたり、サイトマップ・お問い合わせ欄を別に設け、ヘッダー内に記述するといった方法も存在します。

ソーシャルメディアからのアクセスを狙っている方に強くオススメしたい方法です。

サイドバーにスクロール追従領域を設定している場合

サイドバーにスクロール追従設定を行っている場合、スクロール追従領域がヘッダーと重なることで、スクロール追従領域内(文字)が見えなくなってしまいます。

そのような事象を回避するためには、

外観テーマの編集 → javascript.js

を選択し、以下のソースコード(列)を探し出します。

var side_top_margin = 60;

数値を大きく設定すれば、スクロール追従領域が「下」に行き、小さく設定すれば「上」に行きます。

上手く数値を調整しつつ、自分のサイトに合った数値に変更してください。

親テーマから小テーマに<javascript.js>内に書かれたソースコードをコピーし、子テーマ上で操作することを推奨します。

モバイルで適用させたく無い場合は?

モバイルでヘッダーをスクロール領域に指定したく無い場合は、ソースコードを初期値に戻し、<mobile.css>にソースコードを入力してください。

モバイル表示でヘッダー追従を行うと、画面のサイズによっては、狭く感じてしまう場合がありますよね。

訪問者から見やすいWebサイトを提供するためにも、モバイル表示では追従は行わない方が良いのかもしれません。

まとめ

いかがでしょうか。

今回、紹介したのは、Javascriptを使用しないスタイルシートだけで実現するヘッダーの追従カスタマイズ方法でした。

無料のWordPressテーマ、Simplicity(シンプリシティ)を使ったカスタマイズ方法です。

是非、お持ちのサイトに取り入れ、ヘッダー追従を実装してみてください。