【WordPress】トップページ以外のページヘッダーを一括で非表示にする方法（CSS）
WordPressでページを作成していると、
- トップページはページヘッダーを表示したい
- それ以外のページは、すべて非表示にしたい
- 各ページごとにチェックを入れるのは手間
と感じることがあります。
特に Lightningテーマ を使用している場合、テーマ設定だけでは一括制御ができず、CSSで対応する必要があるケースがあります。
この記事では、
トップページ以外のすべてのページでページヘッダーを非表示にする方法を、CSSを使って解説します。
前提条件（重要）
この記事の方法は、次の前提で説明します。
- テーマ：Lightning
- テーマ設定に「一括で非表示にする項目が無い」
- ページヘッダーの要素が確認できている
- CSSを追加できる環境である
※ CSSの追加は自己責任となるため、作業前にバックアップをおすすめします。
なぜCSSで対応する必要があるのか？
Lightningでは、
- 各ページ単位：
☑ ページヘッダーを表示しない（可能） - 全ページ一括（トップ以外）：
❌ テーマ設定では不可
という仕様のため、
表示・非表示をCSSで制御するのが現実的な方法になります。
考え方：トップページだけを除外する
WordPressでは、ページごとに <body> タグへ自動的にクラス名 が付与されます。
例：
- トップページ：
homeやfront-page - 下層ページ：それ以外
この仕組みを利用し、
- トップページ → 表示
- それ以外 → 非表示
という条件をCSSで作ります。
手順①：ページヘッダーのクラス名を確認する
まず、ページヘッダー部分のクラス名を確認します。
確認方法
- 表示画面で右クリック
- 「検証（開発者ツール）」を開く
- ページ上部のヘッダー部分を選択
Lightningの場合、ページヘッダーは.page-header などのクラス名が使われていることが多いです。
※ 実際のクラス名はテーマやバージョンで異なる場合があります。
手順②：CSSを追加する
WordPress管理画面から、次の場所を開きます。
外観 → カスタマイズ → 追加CSS
以下のようなCSSを追加します。
/* トップページ以外のページヘッダーを非表示 */ body:not(.home) .page-header { display: none; }
このCSSの意味
body:not(.home)
→ トップページ以外.page-header
→ ページヘッダー部分display: none;
→ 非表示にする
表示確認
- トップページ：ページヘッダーが表示される
- トップ以外のページ：ページヘッダーが非表示になる
この状態になっていれば成功です。
うまくいかない場合のチェックポイント
.page-headerのクラス名が違う- トップページのクラスが
homeではなくfront-page - キャッシュが残っている
その場合は、次のように書き換えることで対応できる場合があります。
body:not(.front-page) .page-header { display: none; }
CSSで一括制御する際の注意点
- CSSはすべてのページに影響します
- 将来、テーマ更新でクラス名が変わる可能性があります
- 特定ページだけ表示したい場合は、ページID指定などの調整が必要です
どんな時にこの方法が向いている？
- トップページだけはデザインを重視したい
- 下層ページは本文重視にしたい
- ページ数が多く、個別設定が大変
こういった場合に、CSSでの一括制御が有効です。
まとめ
Lightningテーマでは、
トップページ以外のページヘッダーを一括で非表示にする場合、CSSで制御する方法が現実的です。
ページ構成やデザイン方針に合わせて、個別設定とCSS制御を使い分けると、管理もしやすくなります。
関連記事
「具体的な相談内容が決まっていない」という方も歓迎です
スタッフが丁寧にヒアリングさせていただきます
無理な営業は一切ありませんのでご安心下さい
公式LINE(認証済)：@940dyohb
（友だち追加 → 検索 → ID入力で見つかります）
メール・お電話、どちらでもご相談いただけます
ご都合の良い方法でお気軽にお問い合わせ下さい
