WordPressでヘッダーを固定表示する方法【初心者向け】

2025年7月20日

小ネタ君

サイトの使いやすさを向上させたいと感じていませんか？ヘッダーを画面上部に固定することで、ユーザーの回遊率や操作性が向上します。本記事では、初心者でもわかりやすいように、WordPressでヘッダーを固定する方法を丁寧に解説します。

ヘッダー固定とは？初心者にもわかる基本解説

まずは、「ヘッダーを固定する」とはどういうことなのかを確認しましょう。Webサイトの見た目に関する基本的な知識を押さえることで、後の操作もスムーズになります。

そもそも「固定ヘッダー」とは？

固定ヘッダーとは、画面をスクロールしても常にページ上部に表示されるヘッダーのことです。ナビゲーションやロゴ、検索窓などを含むことが多く、ユーザーの利便性を高める効果があります。

従来のヘッダーは、ページの一番上に配置されているため、スクロールすると見えなくなってしまいます。しかし、固定ヘッダーなら、どんなに下にスクロールしても常に表示されるため、ユーザーはいつでもメニューにアクセスできます。

固定ヘッダーの役割とメリット

主なメリットは以下のとおりです。

メニューにすぐアクセスできる
回遊性が高まりやすい
スマホでも迷子になりにくい
コンバージョンボタンを常に表示できる
ブランドロゴの露出時間が長くなる

特にモバイル閲覧が多いサイトでは効果的です。スマートフォンでは画面が小さいため、メニューボタンが見えなくなると、ユーザーが目的のページにたどり着けなくなる可能性があります。

なぜユーザー体験が向上するのか？

スクロール位置に関係なくナビゲーションが常に見えるため、迷うことなく目的のページに移動できます。これにより直帰率を下げ、コンバージョン率の向上にも貢献します。

例えば、ECサイトでは「カートに追加」ボタンや「問い合わせ」ボタンを固定ヘッダーに配置することで、商品詳細を読んでいる途中でも簡単に購入やお問い合わせに進めます。

また、ブログサイトでは記事を読んでいる途中でも、他の記事や人気記事一覧にアクセスしやすくなり、サイト全体の滞在時間向上につながります。

固定ヘッダーを実装する方法の全体像

ヘッダー固定には複数の手段があります。テーマの設定、CSS、プラグインなど方法ごとの特徴を把握することが大切です。

テーマ機能を使って固定する方法

最近のWordPressテーマ（例：Astra、GeneratePress、Cocoon、SANGOなど）では、管理画面上のカスタマイザーからヘッダーの固定を有効にできます。

【設定手順の例】

外観 > カスタマイズ
ヘッダーまたはレイアウト設定
「固定ヘッダーを有効化」などの項目をチェック
変更を保存

この方法の最大の利点は、コードを書く必要がないことです。テーマが提供している機能なので、デザインの統一性も保たれます。

CSSでヘッダーを固定する方法

カスタムCSSを使えば、コードベースで自由にデザイン調整が可能です。以下のようなスタイルで固定表示ができます。

/* ヘッダー固定の基本CSS */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

body {
    padding-top: 80px; /* ヘッダーの高さに応じて調整 */
}

※このコードはテーマによってクラス名が異なる場合があります。.headerを適切に読み替えてください。

プラグインで簡単に固定する方法

コードが苦手な方には、専用プラグインの使用がおすすめです。簡単な操作で固定ヘッダーを導入できます。

プラグインを使用する場合の利点は、テーマを変更しても設定が引き継がれることです。また、詳細なオプション設定も可能で、スクロール量に応じて表示・非表示を切り替える機能なども備わっています。

各方法の使い分けポイント

どの方法を選ぶかは、あなたのスキルレベルと求める機能によって決まります。

テーマ機能：最も簡単で、テーマのデザインと調和する
CSS：細かいカスタマイズが可能で、軽量
プラグイン：豊富な機能と設定オプション、テーマに依存しない

初心者の方は、まずテーマ機能を確認し、なければプラグインを試してみることをおすすめします。

CSSでヘッダーを固定する基本手順

CSSを使った方法は、柔軟なカスタマイズが可能ですが、構造理解が必要です。ここでは、基礎から丁寧に説明します。

必要なCSSコードの基本例

前述のように、position: fixed; と top: 0; を指定すれば、スクロールしてもヘッダーが動かなくなります。

/* 基本的な固定ヘッダーのCSS */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #fff;
    border-bottom: 1px solid #e1e1e1;
    transition: all 0.3s ease;
}

/* コンテンツ部分の調整 */
.site-content {
    padding-top: 80px; /* ヘッダーの高さ分の余白 */
}

ヘッダーの高さ調整とズレ防止

ヘッダーを固定した結果、下のコンテンツが隠れてしまうことがあります。その場合は、body や .site-content に padding-top を追加して余白を作ります。

この値は、ヘッダーの実際の高さと同じかそれ以上に設定する必要があります。ヘッダーの高さは、開発者ツールで確認できます。

z-indexの重要性

固定ヘッダーが他の要素の下に隠れてしまうことを防ぐため、z-index の設定が重要です。一般的に、ヘッダーには高い値（1000以上）を設定します。

ただし、他のプラグインやコンテンツとの干渉を避けるため、必要以上に高い値を設定しないことも大切です。

スマホ表示とのバランス調整

スマホ表示では、ヘッダーが大きすぎると画面を圧迫してしまうことがあります。メディアクエリを使って、画面幅に応じてヘッダーサイズを変更しましょう。

/* スマホ表示用の調整 */
@media screen and (max-width: 767px) {
    .site-header {
        height: 60px;
        padding: 10px 15px;
    }
    
    .site-content {
        padding-top: 60px;
    }
    
    .site-header .logo {
        font-size: 18px;
    }
}

/* タブレット表示用の調整 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .site-header {
        height: 70px;
        padding: 15px 20px;
    }
    
    .site-content {
        padding-top: 70px;
    }
}

アニメーション効果の追加

固定ヘッダーにスムーズなアニメーション効果を追加することで、より洗練された印象を与えられます。

/* スクロール時のアニメーション */
.site-header {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

固定ヘッダーに関するよくあるトラブルと対処法

導入後に思わぬトラブルが起こることもあります。代表的なエラーとその対応方法を解説します。

ヘッダーが一部隠れてしまう

これは主にpadding-topの不足が原因です。ヘッダーの高さに応じて余白を調整しましょう。

対処方法

開発者ツールでヘッダーの実際の高さを確認
bodyまたはメインコンテンツに適切なpadding-topを設定
スマホとPCで高さが異なる場合は、メディアクエリで調整

/* 高さ調整の例 */
body {
    padding-top: 80px; /* PC用 */
}

@media screen and (max-width: 767px) {
    body {
        padding-top: 60px; /* スマホ用 */
    }
}

スクロールに追従しない

position: fixedが正しく効いていないか、上位要素にoverflow: hiddenが設定されている可能性があります。

確認ポイント

CSSが正しく読み込まれているか
他のCSSで上書きされていないか
親要素の設定に問題がないか

他の要素と重なってしまう

z-indexの値が適切でない場合に発生します。

解決方法

ヘッダーのz-indexを高く設定（1000以上）
重なっている要素のz-indexを調整
必要に応じてposition: relativeを追加

他のプラグインとの干渉

スライダーやJavaScript系プラグインと干渉することがあります。該当プラグインを一時的に無効化して動作確認をしましょう。

対処手順

プラグインを一つずつ無効化してテスト
問題のあるプラグインを特定
設定を調整するか、代替プラグインを検討
必要に応じて開発者に相談

表示が遅い・チラつく

JavaScriptの実行タイミングが原因で、ページ読み込み時にチラつきが発生することがあります。

改善策

CSSで初期状態を設定
JavaScriptの読み込み順序を調整
軽量なプラグインに変更を検討

固定ヘッダーのデザインとユーザビリティ向上のコツ

固定ヘッダーは機能面だけでなく、デザイン面でも重要な要素です。ユーザーの使いやすさを向上させるポイントを解説します。

高さとサイズのバランス

固定ヘッダーの高さは、PC版で60-80px、スマホ版で50-60pxが一般的です。あまり高すぎると、コンテンツの表示領域が狭くなってしまいます。

ロゴのサイズも重要で、通常の1.5倍程度の大きさにすると、ブランド認知度が向上します。

色とコントラストの最適化

背景色は白系または透明度を持たせた色が効果的です。読みやすさを確保するため、十分なコントラストを保つことが大切です。

/* 効果的な背景色の例 */
.site-header {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

スクロール連動エフェクト

スクロール量に応じてヘッダーの背景色や透明度を変化させることで、より動的な印象を与えられます。

モバイルファースト設計

スマートフォンでの表示を最優先に考え、必要なメニュー項目のみを表示するようにしましょう。ハンバーガーメニューとの組み合わせも効果的です。

SEOへの影響と対策

固定ヘッダーがSEOに与える影響について、正しく理解しておくことが重要です。

直接的なSEO効果

固定ヘッダー自体は、検索エンジンの評価に直接影響しません。しかし、ユーザビリティの向上により、間接的にSEO効果が期待できます。

ユーザーエクスペリエンス指標への影響

滞在時間の向上
直帰率の低下
ページビュー数の増加

これらの指標は、Googleが重視するユーザーエクスペリエンス評価に関連しています。

読み込み速度への配慮

固定ヘッダーの実装によってページの読み込み速度が遅くなる場合は、SEOにマイナスの影響を与える可能性があります。軽量な実装を心がけましょう。

Q&A｜初心者が気になるポイントを解決

Q1：すべてのテーマで固定できますか？

A：基本的にCSSやプラグインを使えば可能ですが、テーマによっては上書きが必要な場合もあります。

まれに、テーマの構造が特殊で、標準的な方法では固定できない場合があります。そのような場合は、テーマ開発者に相談するか、別のテーマへの変更を検討しましょう。

Q2：固定ヘッダーはSEOに影響しますか？

A：直接的なSEO効果はありませんが、ユーザー体験が向上することで間接的な影響はあります。

特に、サイト内の回遊率向上や滞在時間の増加により、Googleの評価が向上する可能性があります。

Q3：複数のヘッダーがある場合はどうする？

A：IDやクラスで明確に区別して、必要な部分のみを固定するように指定しましょう。

通常のヘッダーとは別に、固定用のヘッダーを作成することも可能です。この場合、メインのヘッダーとデザインの統一性を保つことが重要です。

Q4：JavaScriptは使わないといけませんか？

A：基本的な固定はCSSで可能です。アニメーションや動的表示を加えたい場合にJavaScriptが使われます。

CSSのみでも十分な機能を実現できますが、より高度な機能を求める場合はJavaScriptの使用を検討しましょう。

Q5：固定ヘッダーを一時的に無効化できますか？

A：プラグインの設定変更や、CSSにposition: static;を設定することで一時的に解除可能です。

テスト段階では、display: none;を使用して完全に非表示にすることもできます。

Q6：固定ヘッダーの高さを動的に変更できますか？

A：JavaScriptを使用すれば、スクロール量に応じて高さを変更することが可能です。

例えば、スクロール開始時は通常の高さで、一定量スクロールすると高さを縮小する効果を実装できます。

Q7：固定ヘッダーが表示されない場合の対処法は？

A：以下の点を確認してください：

CSSが正しく読み込まれているか
他のCSSで上書きされていないか
キャッシュが残っていないか
プラグインの設定が正しいか

まとめ

小ネタ君

固定ヘッダーは、WordPressサイトのユーザビリティを向上させる有効な手段です。テーマ機能・CSS・プラグインなど、複数の方法から自分に合った手段を選びましょう。

初心者の方は、まずはプラグインを使って導入し、必要に応じてCSSで微調整していくのがおすすめです。トラブルを避けるためにも、バックアップを取った上で設定を進めるようにしましょう。

また、固定ヘッダーは単なる機能追加ではなく、サイト全体のユーザーエクスペリエンス向上の一環として捉えることが大切です。デザインの統一性を保ちながら、訪問者にとって使いやすいサイトを目指しましょう。

実装後は、実際にさまざまなデバイスで表示確認を行い、必要に応じて調整を重ねることで、より完成度の高い固定ヘッダーを実現できます。

この記事を書いた人

サイト引越し屋さん

日本でもっとも利用されているWordPressのサーバー移転＆保守管理サービス『サイト引越し屋さん』のマーケティング事業部です。
本サイトの企画や制作、監修はサイト引越し屋さんが行っております。
>>サイト引越し屋さんサービスサイトはこちらです。

本サイトにてご提供している情報については、最新かつ正確な情報を提供するよう努力していますが、情報の正確性や完全性を保証するものではございません。また、コンテンツには一部プロモーションが含まれております。本サイトの情報を利用することによって生じたいかなる損害に対しても、当社は責任を負いかねます。情報をご利用される際は、ご自身の判断と責任において行っていただきますようお願い致します。

WordPressでヘッダーを固定表示する方法【初心者向け】

ヘッダー固定とは？初心者にもわかる基本解説

そもそも「固定ヘッダー」とは？

固定ヘッダーの役割とメリット

なぜユーザー体験が向上するのか？

固定ヘッダーを実装する方法の全体像

テーマ機能を使って固定する方法

CSSでヘッダーを固定する方法

プラグインで簡単に固定する方法

各方法の使い分けポイント

CSSでヘッダーを固定する基本手順

必要なCSSコードの基本例

ヘッダーの高さ調整とズレ防止

z-indexの重要性

スマホ表示とのバランス調整

アニメーション効果の追加

おすすめの固定ヘッダープラグイン

Sticky Menu & Sticky Header

myStickymenu

WP Sticky

プラグイン導入のメリットと注意点

固定ヘッダーに関するよくあるトラブルと対処法

ヘッダーが一部隠れてしまう

スクロールに追従しない

他の要素と重なってしまう

他のプラグインとの干渉

表示が遅い・チラつく

固定ヘッダーのデザインとユーザビリティ向上のコツ

高さとサイズのバランス

色とコントラストの最適化

スクロール連動エフェクト

モバイルファースト設計

SEOへの影響と対策

直接的なSEO効果

ユーザーエクスペリエンス指標への影響

読み込み速度への配慮

Q&A｜初心者が気になるポイントを解決

Q1：すべてのテーマで固定できますか？

Q2：固定ヘッダーはSEOに影響しますか？

Q3：複数のヘッダーがある場合はどうする？

Q4：JavaScriptは使わないといけませんか？

Q5：固定ヘッダーを一時的に無効化できますか？

Q6：固定ヘッダーの高さを動的に変更できますか？

Q7：固定ヘッダーが表示されない場合の対処法は？

まとめ

この記事を書いた人

関連記事