スマホでヘッダーを固定させるCSS:WordPress

ヘッダー固定
スマホでヘッダーを固定させるにはどうしたらいいの?

スマホからWEBサイトを閲覧した際、ヘッダー部分が固定されているのをよく見かけたことはありませんか?

多くのWEBサイトがスマホでヘッダーを固定している理由は「ユーザビリティを向上するため」です。

パソコンで閲覧したときとは違い、スマホは横幅が狭く縦に長い表示になりますよね。
文字や画像が多いページの場合、下までスクロールした後「別のページに移動したいけど案内が見つからない!」なんてこともあるでしょう。

このようなことを解消するために、ナビゲーションメニューやサイト内検索を配置したヘッダーを固定しておけば、ユーザーもスムーズに別のページに移動することが可能になります。

ぶろぐ先生
ユーザーがスムーズにサイト内を行き来できるようにヘッダーを固定してみよう!

ヘッダーを固定する方法

ヘッダー固定

まずは、あなたのサイトの「トップページ」or「その他のページ(記事ページ)」のヘッダー部分に当たるタグをきちんと理解しましょう。なぜかと言うと、WordPressテーマによって、<header>タグの中に固定してほしくない要素が入っている場合もあるためです。

当サイト(OPENCAGEのテーマ)では、記事ページの<header>タグにタイトルやSNSシェアボタンのコードも記述されています。

上記のようなこともあるので、単純に<header>タグのCSSを編集し、記事ページを表示した際「タイトルやSNSシェアボタンも固定されている!」なんてこともあるので注意が必要です。

ヘッダーを固定するCSS

当サイトでは<header>タグの中に<div id=”inner-header“>でブロック分けされてあるので、そちらを使用してCSSに記述します。

ぶろぐ先生
CSSを編集する時は、子テーマを利用しよう!
@media screen and (max-width: 480px){
#innner-header{
background:#6d97bf;/*背景色*/
position: fixed;/*ヘッダーを固定*/
z-index: 9999;/*一番前に表示*/
top: 0;/*画面の一番上で固定*/
left:0;/*画面の一番左で固定*/
right:0;/*画面の一番右で固定*/
width: 100%;/*横幅いっぱいに表示*/
box-shadow: 0px 1px 2px gray;/*影を付ける*/
}
}

一番上の「@media screen and (max-width: 480px)」は横幅が480px以下のデバイスで表示された場合にのみ適用されるという意味です。スマホの縦画面表示だけじゃなく「横画面で表示した場合やタブレットで表示した場合でもヘッダーを固定したい!」って方は値を770px辺りに変更してみてください。

一番下の「box-shadow」による影の設定も自分好みに値を変えてあげると良いでしょう。

box-shadowの説明
{ box-shadow: 左右の向きpx 上下の向きpx ぼかしpx  色 ; }

コンテンツ部分に余白を空けるCSS

マージン

ヘッダーを固定させると、コンテンツ部分が下に重なって表示されているはずです。これを解消するために、コンテンツ部分にヘッダーが被らないように余白を空けるCSSを記述します。

ぶろぐ先生
この時も自分のサイトのコンテンツ部分に当たるタグをきちんと理解しよう!
@media screen and (max-width: 480px){
#container {
margin-top:63px;/*ヘッダー分の余白を開ける*/
}
}

ヘッダーの高さと同じ、もしくは少し大きめに余白を空けるためにmarginを使用します。自分のサイトのコンテンツ部分がヘッダーに被らないくらいの幅になるように値(px)を変更しましょう。

以上で、スマホでヘッダーを固定する作業は完了です。

まとめ

スマホでヘッダーを固定させるやり方を解説しました。

スマホを使用しサイトを閲覧される方が多い現在では、レスポンシブ対応のサイトを作成することは必須になります。どのデバイスを使用してもユーザーがスムーズに閲覧できるよう、サイトの見た目を変更してみてくださいね。