2026年9月2日

GeneratePressでヘッダーをスティッキー（追従）にする方法｜Premium機能とCSSの使い分け

テーマ・デザイン

GeneratePressでヘッダーをスクロールに追従させるには、有料アドオンのGP Premiumがあれば「Sticky Navigation」の機能を使い、無料版だけならCSSの position: sticky で実装するのが基本です。どちらを選ぶかは「ナビゲーションだけを固定したいのか、ロゴを含むヘッダー全体を固定したいのか」で決まります。この記事では、GeneratePressのヘッダー構造を押さえたうえで、2つの方法の手順と、管理バーやアンカーリンクでずれる問題の直し方を説明します。

GeneratePressのヘッダー構造を先に確認する

GeneratePressはカスタマイザーで設定するクラシックテーマです。ブロックテーマのようにサイトエディターでヘッダーを組むのではなく、「ヘッダー（ロゴやサイト名）」と「メインナビゲーション（メニュー）」がそれぞれ独立した部品として出力されます。

HTML上では、ヘッダーは .site-header、メニューは .main-navigation というクラスを持ちます。ナビゲーションの位置はカスタマイザーの「レイアウト」→「プライマリナビゲーション」で変えられ、「ヘッダーの下」に置くとヘッダーとは別の要素になり、「右寄せ（フロート）」にするとヘッダーの内側に入ります。この配置の違いが、後で説明するCSSの効き方に直接関わります。

開発者ツールで実際のHTMLを開き、.site-header と .main-navigation がどこにあるかを一度確認しておくと、以降の作業で迷いません。

方法1：GP Premiumの「Sticky Navigation」を使う

GP Premiumを導入済みなら、コードを書かずに設定できます。

「外観」→「GeneratePress」を開き、モジュール一覧から「Menu Plus」を有効化する
カスタマイザーを開き、「レイアウト」の中に追加される「Sticky Navigation」の項目に進む
スティッキーの有効範囲を選ぶ（デスクトップのみ、モバイルのみ、両方などから選べます）
表示効果（フェード・スライドなど）や、下にスクロールしている間は隠して上に戻すと出す動作など、必要な項目を設定する
「公開」を押して保存し、フロント側でスクロールして動作を確かめる

注意したいのは、この機能が固定するのは基本的に「ナビゲーション」だという点です。ナビゲーションをヘッダーの下に置いている場合、スクロールするとロゴのない細いメニューバーだけが追従します。ロゴも見せたい場合は、Menu Plusの設定にあるナビゲーション用ロゴ（スティッキー時だけ表示するロゴ）を使うと、ヘッダー全体を固定しなくてもブランドを表示できます。

スマートフォン用には、Menu Plusの「Mobile Header」を有効にすると、モバイル専用のヘッダー（ロゴとハンバーガーメニュー）を作れ、こちらにもスティッキーの設定があります。

ここでの説明は（2026年10月現在）の構成に基づいています。項目名や配置はGP Premiumのバージョンで変わることがあります。見当たらない場合は、Menu Plusモジュールが有効になっているか、GP Premiumが最新かを先に確認してください。

方法2：CSSの position: sticky で固定する（無料版）

GP Premiumがない場合や、ヘッダー全体を固定したい場合はCSSで実装します。CSSを足すだけならカスタマイザーの「追加CSS」で足りますが、後でJavaScriptやPHPも追加する可能性があるなら、GeneratePress公式の子テーマを使い、子テーマの style.css に書く方が管理しやすくなります。

ヘッダー全体を固定する

/* ヘッダー全体（ロゴ＋ナビゲーション）を画面上部に固定する */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: #ffffff; /* 透けて本文が見えないように背景色を指定 */
}

/* ログイン中は管理バーの高さぶん下げる */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* 600px以下では管理バー自体がスクロールで流れるので、ずらさない */
@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

この書き方は、ナビゲーションを「右寄せ」などでヘッダーの内側に置いている場合に向いています。メニューもヘッダーの一部として一緒に追従します。

ナビゲーションだけを固定する

ナビゲーションを「ヘッダーの下」に置いている場合は、.main-navigation に同じ指定をします。

.main-navigation {
	position: sticky;
	top: 0;
	z-index: 100;
}

管理バー対策も、セレクターを .admin-bar .main-navigation に変えて同じように書きます。

position: sticky が効かないときの原因

CSSを入れても追従しない場合、原因はほぼ次のどちらかです。

親要素の範囲内でしか固定されない：position: sticky は、その要素を囲む親要素の中でだけ追従します。ナビゲーションがヘッダーの内側にあるのに .main-navigation を指定すると、ヘッダーの高さを超えた時点で一緒に流れてしまいます。この場合は .site-header 側を指定します
祖先要素に overflow が指定されている：html、body、またはラッパー要素に overflow: hidden や overflow-x: hidden が付いていると、sticky は効かなくなります。横スクロール防止のために他のプラグインやカスタムCSSで入れていることが多いので、開発者ツールで祖先要素を順に確認します。横はみ出しを防ぐ目的なら、overflow-x: clip に置き換えると sticky を壊さずに済みます

スクロール時にヘッダーを小さくする（任意）

固定したヘッダーが大きいと、画面の上部を占領して本文が読みにくくなります。スクロールしたらヘッダーの余白を減らす、という調整をしたい場合は、少量のJavaScriptでクラスを付け替えます。子テーマに js/sticky-header.js を作成します。

document.addEventListener( 'DOMContentLoaded', function () {
	var header = document.querySelector( '.site-header' );
	if ( ! header ) {
		return;
	}
	var onScroll = function () {
		header.classList.toggle( 'is-scrolled', window.scrollY > 50 );
	};
	window.addEventListener( 'scroll', onScroll, { passive: true } );
	onScroll();
} );

子テーマの functions.php で読み込みます。

<?php
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_script(
		'my-sticky-header',
		get_stylesheet_directory_uri() . '/js/sticky-header.js',
		array(),
		'1.0.0',
		true
	);
} );

あとはCSSで .site-header.is-scrolled .inside-header { padding-top: 10px; padding-bottom: 10px; } のように、スクロール後の見た目を指定します（.inside-header はGeneratePressのヘッダー内側の要素です。開発者ツールで実際のクラス名を確認してから使ってください）。functions.php を編集する前には、ファイルのバックアップを取っておきます。

固定ヘッダーで起きやすい副作用と対策

アンカーリンクの移動先が隠れる

目次のリンクなどでページ内を移動すると、見出しが固定ヘッダーの裏に隠れてしまいます。ヘッダーの高さぶんの余白を指定すると解消します。

html {
	scroll-padding-top: 90px; /* 固定ヘッダーの高さに合わせて調整 */
}

スマートフォンで画面が狭くなる

スマートフォンでヘッダー全体を固定すると、表示領域がかなり減ります。CSSの指定を @media (min-width: 769px) { ... } の中に入れてデスクトップだけに限定するか、モバイルではナビゲーション（ハンバーガーメニューのバー）だけを固定する方が読みやすくなります。

2つの方法を同時に使っている

GP PremiumのSticky NavigationとCSSの sticky を両方入れると、二重に固定されたり、スクロール時にがたついたりします。どちらか一方にしてください。

確認方法

設定後は、次の順で確認します。

キャッシュプラグインやCSSの結合・圧縮機能を使っている場合は、キャッシュを削除する
ログアウトした状態と、ログインして管理バーが出ている状態の両方でスクロールして、ヘッダーが上端にぴったり付くかを見る
開発者ツールの端末表示で、スマートフォン・タブレット幅でも確認する
目次やページ内リンクをクリックし、見出しが隠れないかを見る

まとめ

GeneratePressはクラシックテーマで、ヘッダー（.site-header）とナビゲーション（.main-navigation）が別の部品として出力される
GP Premiumがあれば、Menu Plusモジュールの Sticky Navigation で、コードなしでナビゲーションを追従させられる
無料版やヘッダー全体を固定したい場合は、position: sticky をナビゲーションの配置に合った要素に指定する
効かないときは、親要素の範囲と祖先要素の overflow を確認する
管理バーの高さ、アンカーリンク、スマートフォンでの表示領域にも配慮し、CSSやPHPは子テーマで管理する