WordPress固定ページでLPを作りたい！ヘッダーを非表示にする3つの方法

運用・更新のコツ
2025.10.29

「キャンペーンLPを作りたいのに、ヘッダーが邪魔で世界観が壊れる…」
WordPressで固定ページを使ってLPを作ると、こういう悩みって本当に多いですよね。

今回は、固定ページのヘッダーを非表示にする3つの方法を紹介します。
テーマ設定・CSS・テンプレート編集の3段階で解説するので、自分のスキルや環境に合わせて選んでくださいね。

1. LP作成で「ヘッダーが邪魔！」な理由

LP（ランディングページ）は、訪問した人に「申し込み」「問い合わせ」など特定の行動をしてもらうためのページ。
そのため、**リンク先が多いヘッダーメニューは“離脱の原因”**になってしまいます。

コーポレートサイトの中にLPを作る場合、
「通常ページにはヘッダーが必要だけど、LPではいらない」ということがよくあります。
そこで登場するのが、「固定ページのヘッダーだけ消したい問題」です。

2. 方法①：テーマの設定から非表示にする（簡単・おすすめ）

まずは一番簡単な方法。
最近のテーマ（SWELL・Arkhe・Cocoonなど）には、ページごとにヘッダーやフッターを非表示にする設定が用意されています。

たとえばArkheなら、

  • 編集画面を開く
  • 右サイドバーの「ページ設定」タブをクリック
  • 「ヘッダー・フッターを非表示」にチェック

これだけで完了です。

コードを触らず、ボタンひとつで済むので安全。
社内でWordPressを運用している担当者さんや、納品後の管理を考えるとこの方法がベストです。

ただし、テーマによっては「非表示設定」がないこともあります。
その場合は次の方法へ！

3. 方法②：CSSで非表示にする（どんなテーマでも可能）

テーマに「ヘッダー非表示設定」がない場合は、CSSでピンポイントに隠すのが確実です。
どのテーマでも使える汎用的なやり方です！

手順①：ページIDを確認する

  1. 固定ページの編集画面を開く
  2. URLの末尾をチェック（例：post=123）
    　→ この数字が「ページID」です。

たとえば post=123 なら、「.page-id-123」というCSSクラスが自動でページに付与されています。

手順②：CSSを書く

.page-id-123 header {
  display: none;
}

このコードで、指定した固定ページのヘッダーだけを非表示にできます。
同じようにフッターも消したいときは、

.page-id-123 footer {
  display: none;
}

を追加すればOK。

手順③：CSSをどこに入力するか（ブロックエディタの場合）

ここがよく迷うところ。
実は、固定ページの「カスタムHTMLブロック」ではCSSを直接効かせられません。
HTMLブロックに書いても、そのページ内の一部にしか影響せず、テーマ全体の<head>には反映されないためです。

正しい方法は次のどちらか👇

✅ ① 外観 ＞ カスタマイズ ＞ 追加CSS に入力

WordPressの管理画面から
**「外観 → カスタマイズ → 追加CSS」**を開き、そこに上記コードを貼り付けます。
これで全ページにCSSが適用され、指定したページIDのみに反映されます。

✅ ② ArkheやSWELLなどの「子テーマのstyle.css」に記述

カスタマイズよりも恒久的にしたい場合は、子テーマ内のstyle.cssに追記しましょう。
テーマ更新のたびに消える心配がなく、安全です。

❌【やってはいけない例】
「ブロックエディタのカスタムHTMLブロック」に <style> タグでCSSを書く
→ 一見反映されたように見えても、テーマ側ヘッダー（PHPで読み込まれる部分）には効きません。

手順④：うまく効かないときのチェックポイント

  • クラス名が header ではなく .site-header などになっていないか？
  • キャッシュ（ブラウザ・プラグイン）をクリアしたか？
  • ページIDを間違えていないか？

テーマによってHTML構造が異なるので、**検証ツール（右クリック→検証）**でヘッダーのクラス名を確認しておくと確実です。

補足：ブロックエディタのHTMLブロックでできること

「どうしてもページ単体で完結させたい！」という場合は、
HTMLブロックに以下のように書いてページ内要素を非表示にすることは可能です。

<style>
  .some-section {
    display: none;
  }
</style>

ただしこれは「テーマのヘッダー」ではなく、本文内の特定ブロックを非表示にする使い方です。
全体のヘッダーを消すには向きません。

まとめ（CSS法のポイント）

方法向いている人メリット注意点
追加CSSに書くWordPress中級者簡単・安全全ページ共通CSSなので管理が必要
style.cssに書く制作担当者永続的で安定FTP・テーマ編集の知識が必要
HTMLブロックに書く一時的対応一部ブロック非表示なら可テーマヘッダーには効かない

「カスタムHTMLブロックでやってみたけど、ヘッダー消えない…」という人は、
**“HTMLブロックではテーマ構造に届かない”**と覚えておくとスッキリします！

4. 方法③：専用テンプレートを作る（本格派向け）

LPを継続的に作るなら、専用テンプレートを作ってしまうのが最もスマートです。
1ページずつCSSを当てたり設定をいじったりするより、テンプレートを分けておくことで「LPは常にヘッダー・フッターなし」という状態を一発で再現できます。

手順①：テーマフォルダを開く

WordPressのテーマデータは
/wp-content/themes/（テーマ名）/ にあります。

ArkheやSWELLなど親テーマを直接編集するとアップデートで消えるので、必ず「子テーマ」を使いましょう。
子テーマがまだない場合は、無料配布の子テーマを入れておくのが安心です。

手順②：page-lp.php を作成する

子テーマフォルダ内に新しく page-lp.php というファイルを作ります。
（名前は自由ですが、page-〇〇.php としておくと管理しやすいです。）

手順③：テンプレート宣言を書く

ファイルの冒頭に次のコードを記述します👇

<?php
/*
Template Name: LP Template
*/

これでWordPressが「このファイルを“LPテンプレート”として認識」してくれます。

手順④：ヘッダー・フッターを削除した構造にする

通常の固定ページテンプレートには、こんな構成があります👇
（例：page.php）

<?php get_header(); ?>
<main class="site-main">
  <?php the_content(); ?>
</main>
<?php get_footer(); ?>

このうち get_header(); と get_footer(); が
サイト共通のヘッダー・フッターを呼び出している部分。

LP用テンプレートでは、これを削除します👇

<?php
/*
Template Name: LP Template
*/
?>
<main class="lp-main">
  <?php the_content(); ?>
</main>

これでヘッダーもフッターも出なくなり、まっさらなキャンバス状態に。
あとはブロックエディタで自由にLPをデザインできます。

手順⑤：管理画面でテンプレートを選ぶ

WordPressの固定ページ編集画面を開き、
右側の「テンプレート」セクションから「LP Template」を選択します。

プレビューすると、ヘッダー・フッターが消えた状態で表示されていれば成功！

手順⑥：Arkheユーザー向けワンポイント

Arkheの場合、もともと共通ヘッダーを
template-parts/header.php 経由で読み込んでいます。
LPテンプレートで完全に削除する場合は上記のように get_header(); を省くだけでOK。

もし「上部の余白だけ消したい」「スクリプトやGTMだけは残したい」という場合は、
get_header(); の代わりに ヘッド部分だけ読み込む専用ファイルを用意するのもアリです。

たとえば：

<?php get_template_part( 'template-parts/head' ); ?>

として、CSSや解析タグは残しつつ、
ナビやロゴを出さない構造にできます。
→ 実務ではこれが一番安全（SEOタグも消えない）。

手順⑦：デザイン調整

LPテンプレートではグローバルCSSが効くため、
必要に応じて子テーマの style.css にLP専用のデザインを追記します。

.lp-main {
  max-width: 100%;
  padding: 0;
}

これでエディタ幅いっぱいに要素を配置でき、
余白を気にせずキャンペーン用デザインを作れます。

手順⑧：テンプレート化のメリット・デメリットまとめ

項目メリットデメリット
デザイン自由度◎ 完全に自由コード知識が必要
再利用性◎ ページ追加も楽構造変更時は修正が必要
安全性○ 親テーマに影響なし子テーマが前提

💡 プロの現場では
「ヘッダー削除」だけでなく、“LP専用テンプレート”を作っておくのが定番です。
コーディング経験が少なくても、1ファイル用意するだけで後々めちゃくちゃ楽になります！

まとめ（テンプレート法の使いどころ）

  • 一度作れば何度でも再利用できる
  • 解析タグも安全に残せる
  • デザイン崩れが起きにくい

ということで、WordPressでLPを量産するなら「page-lp.php」テンプレート化が最強です。
慣れてきたら、「LP専用CSS」や「Gutenberg専用スタイル」も分けて管理するのがおすすめです！

5. フッターも一緒に消したい場合

LPでは「ヘッダー＋フッター」を両方消したいケースも多いですよね。
上のCSS方法やテンプレート方法でも同様にfooterを削除・非表示にすればOKです。

ただし、フッターに解析タグ（GAやGTM）を入れている場合は要注意。
フッター自体を削除すると、アクセス解析が動かなくなる可能性があります。

解析タグは <head> や <body> 内に直接入れておくと安心です。

6. SEO・解析まわりの注意点

ヘッダーを消すと見た目はスッキリしますが、
テーマによっては「ヘッダー内にGTMや構造化データを読み込んでいる」場合があります。

完全に削除するのではなく、「CSSで非表示にする」方が安全なことも。
特に、広告計測やコンバージョン分析をしているLPなら、事前に確認しておきましょう。

7. まとめ：目的に合わせて選ぼう

方法難易度メリットデメリット
テーマ設定★☆☆クリックだけで完了テーマ依存
CSS★★☆どのテーマでも可能クラス名確認が必要
テンプレート★★★デザイン自由度が高いPHP編集が必要

LPは「デザイン」と「集中導線」が命。
固定ページでも、ちょっとした設定やコードで十分にLPっぽく仕上げられます！

8. 制作サポートのご案内（CTA）

自社サイト内でLPを作りたいけれど、
ヘッダーやフッターの設定でつまづいていませんか？

運営者は、WordPressを使った企業サイトのLP設計や設定代行も行っています。
テーマや運用体制に合わせて、最適な実装方法をご提案します。

→ [お問い合わせはこちら]

コメント

タイトルとURLをコピーしました