SWELLでヘッダーバーを非表示にしてヘッダーメニューも消す7つのコツ

サイトの一番上に細いバーやメニューが出てきて、「ここいらないな…」と感じたことはありませんか。

SWELLのヘッダーバーやヘッダーメニューは、テーマ設定と少しのCSSを組み合わせれば、かなり柔軟に非表示にできます。

読み終えるころには、「どのページのどのヘッダーをどう消すか」を自分で選んでコントロールできるようになるはずです。

SWELLのヘッダーバーとヘッダーメニュー非表示の全体像

SWELLのヘッダーバーとは？基本と役割

ヘッダーバーは、PCサイズでサイトの一番上に細く表示される帯の部分です。ここにキャッチフレーズやSNSアイコン、検索アイコンなどを表示できます。見た目のアクセントにもなりますし、ブランドやサイトの雰囲気を出すのにも便利なエリアです。

一方で、シンプルなLPや、余計な要素を入れたくないセールスページなどでは、ヘッダーバーがあると少し「ごちゃっとした印象」になることもあります。そんなときに「ここだけ消したい」という悩みが出てくるわけですね。

イメージしやすいように、ヘッダーバーの特徴を表にまとめておきます。

項目	内容
表示場所	PC画面の最上部に横長で表示される細いバー
スマホでの表示	デフォルトではPCサイズのみ表示される仕様
主な表示内容	キャッチフレーズ、SNSアイコン、検索アイコンなど
役割	サイトの雰囲気づくり、補助的なナビゲーション、ブランドの補足情報

ヘッダーバーは「あると便利だけど、状況によっては邪魔になることもある」パーツです。だからこそ、ページごとに表示・非表示を調整したくなる場面が多いんですよね。

SWELLのヘッダーメニュー（グローバルナビ）とは？

ヘッダーメニューは、ロゴの横や下に並んでいるメインメニューです。SWELLでは「グローバルナビ」と呼ばれていることも多い部分ですね。

PCでは、ロゴの右側に横並びのメニューとして表示されるのが一般的です。スマホでは、左上（または右上）のハンバーガーアイコンをタップしたときに開くメニューに、グローバルナビの中身が入る形になります。

よくあるメニュー例はこんな感じです。

• トップページ
• ブログ一覧・お知らせ一覧
• プロフィール・会社概要
• お問い合わせフォーム
• サービス紹介・料金ページ

このヘッダーメニューを非表示にすると、ユーザーが他のページへ移動しづらくなります。その分、LPなどでは「そのページに集中してもらう」という意味で効果的ですが、ブログ全体で完全に消してしまうと使いにくいサイトになりやすい点には注意が必要です。

SWELLヘッダーバーを設定だけで非表示にする3ステップ

• カスタマイザーでヘッダーバーの設定画面を開く
• SNSアイコンや検索アイコンをオフにする
• キャッチフレーズの表示位置をオフにする

どれもテーマ標準の機能なので、コードが苦手な方でも安心して進められます。

カスタマイザーでヘッダーバー設定を開く

まず、WordPress管理画面の「外観」から「カスタマイズ」を開きます。次に、「ヘッダー」や「ヘッダーバー」といった名前の項目を探してクリックします。バージョンや設定によって多少表記が違う場合もありますが、「ヘッダー」→「ヘッダーバー設定」のような構成になっていることが多いです。

ヘッダーバー関連の画面を開くと、次のような項目が並んでいるはずです。

項目名の例	内容
ヘッダーバー設定	ヘッダーバー全体の表示・非表示やデザインの設定
SNSアイコンリストを表示	ヘッダーバーにSNSアイコンを出すかどうか
検索アイコンを表示	ヘッダーバーに検索アイコンを出すかどうか
コンテンツが空でもボーダーとして表示	テキストやアイコンがなくても細いラインだけ残すかどうか
キャッチフレーズの表示位置	キャッチフレーズをヘッダーバーに出すか、ロゴの近くに出すか、出さないか

この画面まで来られれば、あとは不要な要素を順番にオフにしていくだけです。

SNSアイコン・検索アイコンをオフにしてスッキリさせる

次に、ヘッダーバーに表示されているSNSアイコンや検索アイコンをオフにしていきます。チェックボックスやプルダウンになっていることが多いので、使っていないもの・不要なもののチェックを外してみてください。

• SNSアイコンは、フッターやサイドバーにあれば十分というサイトも多いです。
• 検索アイコンも、サイドバーや記事下に検索フォームがあれば必須ではありません。

私も一度、ヘッダーバーのSNSアイコンを思い切ってすべて外したことがあります。それだけでも上部がかなりスッキリして、本文に視線が行きやすくなりました。

チェックを変更したら、忘れずに右上の「公開」ボタンで保存し、別タブでサイトを開いて表示を確認してみてください。ヘッダーバーの存在感がだいぶ控えめになっているはずです。

キャッチフレーズの表示位置を「表示しない」にする

ヘッダーバーの中でも目立つのがキャッチフレーズです。これは、WordPressの「設定」→「一般」で設定する短い説明文ですね。

カスタマイザーの「キャッチフレーズの表示位置」という項目で、「表示しない」に変更すると、ヘッダーバーからキャッチフレーズが消えます。「ヘッダーバーに表示」や「ロゴの近くに表示」になっている場合は、ここを変えるだけで見え方がかなり変わります。

ロゴを画像で設定していたり、キャッチフレーズを特に使っていないサイトであれば、表示をオフにしても問題はありません。私もLP寄りのデザインにするときは、キャッチフレーズを真っ先に非表示にしています。

さらに、ヘッダーバーの中身が何もなくなったときに、「コンテンツが空でもボーダーとして表示する」のチェックを外しておくと、細いラインだけも消せます。ここまで設定すると、「ヘッダーバー自体が出ていない」状態にかなり近づきます。

SWELLヘッダーメニューを非表示にする設定とコツ

基本的な流れは次の通りです。

• メニューの位置にどのメニューを割り当てるかを決める
• わざと中身のないメニューをグローバルナビに割り当てる
• 残ってしまう検索アイコンやボタンの表示位置を微調整する

グローバルナビ用メニューを空のまま登録する

一番簡単なのは、「中身のないメニューをグローバルナビとして登録してしまう」という方法です。細かいCSSを書かなくても、リンクテキストを一切表示しない状態に近づけられます。

手順は次の通りです。

• 管理画面で「外観」→「メニュー」を開く
• 新しいメニューを作成する（名前は何でもOK）
• メニュー項目は何も追加しないままにしておく
• 「メニューの位置」で「グローバルナビ」にチェックを入れる
• メニューを保存する

こうしておくと、SWELLとしては「グローバルナビはあるけれど中身が空」という状態になります。結果的に、ヘッダーメニュー部分にリンク文字が一切出てこない、というわけですね。

通常のメニュー作成と、空のメニューを割り当てた場合の違いを、ざっくりまとめるとこうなります。

メニューの作り方	グローバルナビの見え方	PCでの印象
通常どおり項目を追加	ページへのリンクが横並びで表示される	一般的なブログや企業サイトらしい雰囲気
中身のないメニューを割り当てる	メニューリンクの文字は何も表示されない	ロゴだけのシンプルヘッダーに近づく

テーマ側の構造はそのままにしておきたい、でもリンクは消したい、というときに使いやすい方法です。ヘッダーバーの非表示と組み合わせると、一気にミニマルな見た目になります。

検索アイコンやボタンの表示位置を調整する

グローバルナビの文字を消しても、そのままだとヘッダー右側に検索アイコンだけが残ってしまうことがあります。そこだけが浮いて見えるときは、カスタマイザーの「ヘッダー」設定で検索アイコンやボタンの表示位置を確認してみてください。

• 検索アイコンの表示位置を「表示しない」に変更する
• ヘッダー右側のボタンやCTAリンクの表示をオフにする

このあたりを整えるだけで、「何もないヘッダーの右端にアイコンだけポツンと残る」という違和感をかなり減らせます。

私も以前、メニューを非表示にしたあとに検索アイコンだけ残ってしまい、そこばかり目立ってしまったことがありました。必要なければ思い切って消す、使いたい場合はロゴの近くに寄せるなど、全体のバランスを見ながら調整してみてください。

CSSでSWELLのヘッダーバーやヘッダーメニューを非表示にする

サイト全体のヘッダーを非表示にするCSS（LP向け）

まずは、サイト全体のヘッダーそのものを非表示にするCSSの例です。LP専用のサブサイトなど、「とにかくヘッダーはいらない」というケースで使うやり方です。

イメージとしては、追加CSSに次のようなコードを書きます。

header.l-header {
  display: none;
}

実際のクラス名は、使っている子テーマやカスタマイズ状況によって違うこともあります。ブラウザの開発者ツールなどでヘッダー部分のクラス名を確認し、自分のサイトに合わせて書き換えてください。

この方法は、全ページからヘッダーを消す強力なやり方です。通常のブログ記事やトップページでもメニューが出なくなるので、「LP専用のサイト」や「見せたいページがかなり限定されているサイト」にだけ使うのがおすすめです。

固定ページだけヘッダーメニューを非表示にするCSS

ブログ用の記事とLPが混在しているサイトでは、「LPの固定ページだけヘッダーメニューを消したい」というケースがとても多いです。その場合は、固定ページごとのIDを使ってCSSを指定する方法が便利です。

イメージは次のような形です。

.page-id-〇〇〇 .l-header__gnav {
  display: none;
}

〇〇〇の部分に、非表示にしたい固定ページのIDを入れます。ページIDは、編集画面のURL（post=123 の数字など）から確認できます。

この書き方をすると、指定した固定ページのときだけ、ヘッダーメニューが丸ごと表示されなくなります。ほかのページでは通常どおりメニューが出るので、ユーザーがサイト全体を回りたいときの導線も維持しやすいです。

PCだけヘッダーメニューを隠してハンバーガーにする

もう一つよくいただく相談が、「PCでもスマホのようにハンバーガーメニューだけにしたい」というものです。この場合は、PCサイズのときだけグローバルナビを非表示にして、ハンバーガーメニューは残す、という考え方になります。

イメージとしては、メディアクエリで一定以上の画面幅のときに .l-header__gnav を非表示にします。

@media (min-width: 960px) {
  .l-header__gnav {
    display: none;
  }
}

ここで使うpx数は、SWELLのブレイクポイントに合わせてください。テーマのCSSを確認すると、どこからPC表示とみなしているかが分かります。

よく使うCSSパターンを表にまとめると、次のような整理になります。

やりたいこと	使うCSSのイメージ	対象
サイト全体のヘッダーを消す	header.l-header { display: none; }	全ページ
特定固定ページだけヘッダーメニューを消す	.page-id-〇〇〇 .l-header__gnav { display: none; }	指定した固定ページのみ
PCだけグローバルナビを隠す	@media (min-width: 960px) { .l-header__gnav { display: none; } }	PC表示のみ

CSSに不慣れな場合は、いきなり本番LPに適用するのではなく、テスト用の固定ページを1つ作って、そこで表示の変化を確認してから本番に反映するのがおすすめです。

SWELLでヘッダーやメニューを非表示にするメリット・デメリット

ヘッダー非表示のメリット・デメリットを整理

ヘッダーやメニューを非表示にしたときのメリット・デメリットを、ざっくり表にしてみます。

観点	メリット	デメリット
デザイン	画面上部がすっきりしてLPらしい雰囲気になる	サイト全体の構造が一目で分かりにくくなる
コンバージョン	他ページへのリンクが減り、申込フォームなどに集中してもらいやすくなる	「一旦戻りたい」ユーザーが戻り先を見失い、離脱につながることもある
ユーザビリティ	「このページで完結させたい」動線を作りやすい	サイト全体を色々見たい人にとっては不便になる
SEO	導線を絞ることで、内部リンク構造をシンプルに整理しやすい	メニューを消しすぎると、重要ページ同士のリンクが減ってしまう

私の経験では、LPやキャンペーンページでヘッダーメニューを消したことで、申込率が上がったケースもあります。その一方で、ブログ全体のヘッダーメニューを極端に削ったら、「他の記事が見つけづらい」という感想をもらったこともあります。

大事なのは、「このページに来た人に、最終的に何をしてほしいか」です。その目的を明確にしたうえで、ヘッダーバーやヘッダーメニューの非表示を考えると、判断しやすくなります。

ヘッダーメニュー非表示で注意したいSEOと導線

SEOの観点から見ると、ヘッダーメニューは重要な内部リンクの集合体です。カテゴリーページや主要ページへのリンクが集まっているので、検索エンジンにサイト構造を伝える役割もあります。

そのため、SWELLでヘッダーメニューを非表示にしすぎると、次のようなリスクが出てきます。

ただし、LPのように「そのページだけで完結させたい」ケースでは、ヘッダーを非表示にしても大きな問題にならないことも多いです。むしろ、余計なリンクが減ることで、フォーム送信やボタンのクリックに集中してもらえることもあります。

私がよく提案しているのは、次のような使い分けです。

• サイト全体の基本テンプレートでは、ヘッダーメニューをしっかり残す
• LPや申し込み専用ページだけ、ヘッダーメニュー非表示を検討する
• ヘッダーを消す場合でも、フッターや本文内に最低限の導線を用意する

このくらいのバランスであれば、SEOとユーザビリティの両方を比較的守りやすいと感じています。

ヘッダーを非表示にするのが向いているページ例

最後に、SWELLのヘッダーバーやヘッダーメニューを非表示にしやすいページの例を挙げておきます。

こういったページでは、「ほかのページを回遊してもらうこと」より、「その場で申し込んでもらうこと」の方が優先されます。余計なメニューを減らして、やることを一つに絞るイメージです。

逆に、次のようなページでは、ヘッダーメニュー非表示には慎重になったほうがいいです。

• ブログのトップページやカテゴリーページ
• 会社概要、採用情報など、複数ページを行き来しながら読むことが多いページ
• ポートフォリオや制作実績を一覧で見せたいページ

こういうページは、「あちこち見ながら検討したい」というユーザーが多いので、ヘッダーを消しすぎると不便になりがちです。ヘッダーメニューを減らす場合でも、パンくずリストやフッターメニューなど、別の形で導線を用意しておくと安心です。

よくある質問（SWELLのヘッダーバー・ヘッダーメニュー編）

Q1.SWELLでヘッダーバーを非表示にするとスマホの表示はどうなりますか？

A. デフォルトの仕様では、SWELLのヘッダーバーはPCサイズのときだけ表示されます。もともとスマホ表示ではヘッダーバーが出ていない状態になっているテーマが多いです。

そのため、カスタマイザーでヘッダーバーを非表示にしても、スマホ側の見た目が大きく変わらないケースが多いです。ただし、カスタマイズでスマホにもヘッダーバーを出すよう調整している場合は影響が出ることもあるので、設定を変更したあとはPCとスマホの両方で表示を確認するようにしてください。

Q2.SWELLヘッダーメニューを非表示にしたら、パンくずリストも消したほうがいいですか？

A. パンくずリストは、消さずに残しておくことをおすすめする場面が多いです。ヘッダーメニューを非表示にしても、パンくずリストがあれば、ユーザーは一つ上の階層やトップページに戻りやすくなります。

LPのように「他のページに極力行ってほしくない」構成にしたい場合でも、「トップページに戻る」程度の導線があると不安なく利用してもらえます。ヘッダーメニューを消すかどうかとは切り離して、パンくずリストは一度残す前提で検討してみてください。

Q3.CSSを使わずにSWELLヘッダーメニューを非表示にできますか？

A. 完全にヘッダーエリアを消すことは難しいですが、「中身のないメニューをグローバルナビに割り当てる」という方法で、ヘッダーメニューの文字だけを実質非表示にすることはできます。

「外観」→「メニュー」で新しいメニューを作成し、項目を一つも入れないまま「グローバルナビ」にチェックを入れて保存すると、メニューリンクの文字が出なくなります。ヘッダー自体を丸ごと隠したい場合は、やはりCSSで調整する必要がありますが、まずはこの方法から試してみると安心です。

まとめ：SWELLのヘッダーバー非表示とヘッダーメニュー非表示を使いこなそう

要点のおさらい

• ヘッダーバーはPC上部に出る細いバーで、キャッチフレーズやSNSアイコンなどを表示できるが、テーマ設定だけでかなり非表示にできる。
• ヘッダーメニューはサイトの主要導線なので、LPなど特別なページ以外では、SWELLでも消しすぎないほうが使いやすい。
• CSSを使うと、ページ単位やPC・スマホごとに、ヘッダーやメニューを細かく出し分けできる。
• ヘッダー非表示には、デザインやコンバージョンのメリットがある一方で、回遊性やSEOへの影響もあるので、ページの目的に合わせた使い分けが大切。
• 「このページでユーザーに何をしてほしいか」を決めてから、ヘッダーバーやヘッダーメニューを非表示にするかどうかを判断すると、失敗しにくい。

今日から取るべき最初の一歩

いきなり本番ページのヘッダーを消すのは、やっぱり不安ですよね。そこで、私からの提案としては、次のステップで少しずつ慣れていくやり方がおすすめです。

• テスト用の固定ページを1つ作り、「このページは試し用」と割り切る。
• そのページで、カスタマイザーからヘッダーバーやヘッダーメニューの表示をいじって、見た目の変化を確認する。
• 必要であれば、そのテストページだけに適用するCSSを書いて、ヘッダーメニューを非表示にしてみる。

この流れなら、SWELLの設定やCSSに少しずつ慣れながら、自分のサイトに合ったヘッダーの見せ方を安全に探っていけます。SWELLのヘッダーバーとヘッダーメニューを上手にコントロールして、デザインと成果の両方を取りにいきましょう。