
ヘッダーを固定することで、ユーザーの目に常にサイトのタイトルが表示され、サイトを覚えてもらいやすくなります。
また、メニューにすぐにアクセスできることで違うページにアクセスしやすくなり、ユーザビリティの向上にも繋がります。
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の部分に『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の幅はできるだけ狭くしておきましょう。
ぜひ、コンテンツが長い場合やメニューにすぐにアクセスできるようにしたい場合は、設定してみてくださいね!