【初心者向け】AFFINGERでPCヘッダーメニューを固定設定にする方法

はじめに

WEBサイトを下にスクロールすると、ヘッダーメニューが消えてしまって別のページに移りづらい…

そんなお悩みを抱えていませんか？

ブログやWebサイトを閲覧する読者にとって、いつでも希望のページに移動できる「固定ヘッダー」は、快適な巡回に欠かせない要素です。メニューが常に画面上部に追従するだけで、読者の離脱を防ぎ、他の記事も読んでもらいやすくなります。

この記事では、AFFINGER7を使って、PC表示時のヘッダーメニューを固定設定にする方法を分かりやすく解説します。

専門的なコード（CSSやHTML）の知識は一切不要です。WordPressの管理画面から最短3分・数クリックで完了しますので、実際の画面キャプチャを見ながら一緒に設定してみましょう！

AFFINGERでPCヘッダーメニューを固定するメリット

単に「見た目が洗練される」だけではありません。ヘッダーメニューを固定化することには、サイト運営上の明確な3つのメリットがあります。

サイト内の回遊率（PV数）がアップする
記事を読み終えて画面を下にスクロールした読者が、ページトップに戻ることなくスムーズに他のカテゴリーや関連記事へ移動できるようになります。
コンバージョン率（CVR）の向上が期待できる
「お問い合わせ」「おすすめ商品」「収益記事」といった重要ページへの導線を常時確保できるため、クリックされる機会が大幅に増えます。
サイトの操作性（UI/UX）が高まり、信頼感が生まれる
読者が迷わずにサイト内を移動できるストレスフリーな閲覧環境を提供できます。整った操作性は、サイト全体のプロっぽさと信頼感に直結します。

AFFINGER7でPCヘッダーメニューを固定する4ステップ

AFFINGER7では、コードを一切触ることなく、カスタマイザーの操作だけで簡単にヘッダーメニューを固定できます。実際の管理画面と照らし合わせながら、一緒に設定を進めていきましょう。

カスタマイズを開く

WordPressのダッシュボード（管理画面）にログインし、左メニューの 「外観」＞「カスタマイズ」 をクリックします。

ヘッダーナビゲーションの設定画面を開く

カスタマイザーが開いたら、左側のメニューを以下の順番で選択していきます。

「ヘッダーナビゲーション」→「パソコン（PC）」をクリックします。

表示パターンを「固定」に変更

「パソコン（PC）」の設定項目が表示されたら、下部にある 「ヘッダーナビゲーション（右※PCのみ）の表示パターン」 の項目を探します。

ドロップダウンメニューから 「固定（メニュー）」 を選択します。

変更を保存して公開

画面上部にある 「公開」 ボタンをクリックして設定を保存します。

設定が完了したら、実際に自分のサイト（プレビュー画面または別タブ）を開き、マウスで下にスクロールしてメニューが画面上部に追従するか確認してみましょう

ヘッダーメニューが固定されない・反映されない時のチェックリスト

「手順通りに設定したのに、固定されない…」という場合は、以下の4つの要因が考えられます。
上から順番に確認してみましょう。

ブラウザやプラグインの「キャッシュ」が残っている
設定自体は反映されていても、古い画面情報（キャッシュ）が表示されているケースが最も多いです。
- 対処法：キーボードの Ctrl + Shift + R（Macは Cmd + Shift + R）を押してスーパーリロードを行うか、キャッシュ消去プラグインのキャッシュを削除してください。
スマホ画面で確認している
本設定は「PC表示のみ」に適用される設定です。
- 対処法：PCのブラウザ画面で確認するか、スマホで確認したい場合は「スマホ用ヘッダー」の設定エリアを別途確認してください。
背景色が「透明」になっていて固定されていないように見える
固定化自体は成功していても、ヘッダーの背景色が透明なため、スクロールした際に本文テキストと重なって消えたように錯覚することがあります。
- 対処法：カスタマイザーの「ヘッダーナビゲーション」内にある背景色設定で、白などの不透明な色を指定してください。
追加CSSや他プラグインと干渉している
独自に記述したCSSや、デザインを変更するプラグインがヘッダーの動作を上書きしている可能性があります。
- 対処法：一時的に追加CSSをコメントアウトするか、関連プラグインを停止して変化があるか試してみてください。