Javascript不要！WordPressのheaderをCSSだけでTOPに固定する

|

ヘッダーを固定することで、ユーザーの目に常にサイトのタイトルが表示され、サイトを覚えてもらいやすくなります。

また、メニューにすぐにアクセスできることで違うページにアクセスしやすくなり、ユーザビリティの向上にも繋がります。

WordPressのヘッダーを固定する方法は色々とありますが、今回はできるだけシンプルに、CSSだけでheaderを固定する方法をご紹介します。

ヘッダーを固定するためのCSSの設定を行う

まずは、WordPressのヘッダーを固定するためのCSSをheaderに追加します。ヘッダーもしくはヘッダーに該当する部分に下記のCSSを追加してください。

style.cssに記述 
header {
  position: fixed;/*ヘッダーを固定*/
  z-index: 9999;/*一番前に表示されるように設定*/
  top: 0;/*画面一番上で固定*/
  width: 100%;/*ヘッダーが横幅いっぱいになるように指定*/
  background-color: #ddd;/*背景色を指定*/
}

上記のCSSを追加することで、最上部にヘッダーが固定されます。

headerにposition属性が指定されている場合

スタイルシートのheaderの部分に『postion』がすでに設定されている場合は、headerの要素の下に新たな『div』を作成し『header』に指定されている属性を移動させてから、上記のソースコードを追加してください。

例：<header>に『postion: relative;』がすでに設定されているとすると・・・ header.php 
<header>
  <div class="header-inner">
    <!--ヘッダー内のコンテンツ-->
  </div>
</header>

↓↓↓↓headerの直下に要素を追加する

<header>
  <div class="header-cnt"> ←追加
    <div class="header-inner">
      <!--ヘッダー内のコンテンツ-->
    </div>
  </div> ←追加
</header>
CSS 
header {
  position: relative;
}

↓↓↓↓作成した要素にheaderに指定されていた要素を移す

header {
  position: fixed;
  z-index: 9999;
  top: 0;
  width: 100%;
  background-color: #ddd;
}

.header-cnt {
  position: relative; ←要素を移す
}

上記のコードを追加しただけでは、コンテンツがヘッダーの中に入り込んでしまいます。

ヘッダーが被らないようにCSSを調整する

ヘッダーがコンテンツにかぶらないようにCSSを調整するために、『<header>』の前・もしくは後ろのコンテンツにマージンを追加しましょう。

style.cssに記述 
body {
  margin-top: 100px;/*ヘッダーと同じ高さのマージンを追加*/
}

※marginを追加するコンテンツは、『<header>』の直前・もしくは直後のどちらの要素でもOKです。あなたのテーマに合わせて調整してください。

marginでヘッダーと同じ高さの余白を空けてあげることで、コンテンツと被らないようになります。

※WordPressにログインしている状態の場合、headerがログイン時に表示されている黒色のバーに入り込んで表示されてしまいますが問題ありません。デザインを確認する場合は、一度ログアウトした状態で確認してください。

以上で、WordPressのヘッダーを上部に固定するための作業は完了です。コンテンツ部分を妨げないように、ヘッダーを固定する場合は、headerの幅はできるだけ狭くしておきましょう。

ぜひ、コンテンツが長い場合やメニューにすぐにアクセスできるようにしたい場合は、設定してみてくださいね！