1. TOP
  2. wordpressテーマカスタマイズ
  3. Javascript不要!WordPressのheaderをCSSだけでTOPに固定する方法

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の幅はできるだけ狭くしておきましょう。

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