SWELLでヘッダーロゴを非表示にする方法と注意点

SWELLでヘッダーロゴを消したいのにどこを触ればいいか分からない、気づいたらロゴが表示されなくなっていて焦っている、そんな状況になっていませんか。

SWELLでヘッダーロゴを非表示にしたい人がまず知っておきたいこと

ヘッダーロゴを非表示にしたい主な3パターン

まずは、私がよく相談を受けるパターンをざっくり整理してみます。

パターン	状況・よくある悩み	おすすめの解決方法
サイト全体でロゴを隠したい	ロゴ画像がまだ用意できていない、仮ロゴを見せたくない	カスタマイザーでロゴを未設定にするか、CSSでロゴ部分を非表示にする
特定ページだけロゴを消したい	LPやセールスページでは余計な要素を見せたくない	ページIDなどを使って、そのページだけヘッダーロゴを非表示にするCSSを書く
ロゴが勝手に表示されなくなった	設定を触っていたらいつの間にかロゴが消えた、原因が分からない	設定・キャッシュ・CSS・プラグインなどを順番に確認して原因を特定する

私自身も、LPを作るときにヘッダー周りの装飾が邪魔に感じて、ロゴを消す方法をかなり調べました。

そのとき痛感したのは、「ロゴだけを消したいのか」「ヘッダーごと全部消したいのか」を最初に決めておかないと、設定画面で延々と迷うことになるということです。

ヘッダーロゴ非表示とヘッダー全体非表示の違い

ここを混同すると、「あれ、メニューまで消えちゃった…」という事故が本当に起きやすいです。

ざっくり違いを書くと、次のようなイメージです。

この記事では「ヘッダーロゴを非表示にする方法」をメインにしつつ、途中でヘッダー全体を軽く消したい人向けの話も入れていきます。

カスタマイザーでSWELLヘッダーロゴを非表示にする基本手順

テーマ標準機能だけでロゴを出さない設定にする

SWELLでは、ヘッダーロゴは「カスタマイザー」の中で画像を設定するようになっています。

ロゴを非表示にしたいだけなら、この部分をあえて「何も設定しない」状態にしておくのが一番シンプルです。

設定画面の場所	主な項目	ロゴ非表示のポイント
外観 → カスタマイズ → ヘッダー	ヘッダーロゴの画像設定	ロゴ画像を新規で設定しない、または設定済みの画像を削除する
外観 → カスタマイズ → サイト基本情報	サイトタイトル・キャッチフレーズ	ヘッダー付近にテキストを出すかどうかを選べる
外観 → カスタマイズ → カラー設定など	背景色やヘッダー周りの色	背景色とロゴの色が同じだと、ロゴが消えたように見えるので注意

実際の操作イメージはこんな感じです。

• ヘッダーロゴの設定画面を開く
• すでにロゴ画像が入っていれば「削除」ボタンでいったん消す
• ヘッダーを完全にスッキリさせたいときは、サイトタイトルなどのテキスト表示もオフにする

この方法の良いところは、CSSを書かなくても済むところです。

その一方で、「特定のページだけロゴを消したい」「パソコンとスマホで表示を分けたい」といった細かい制御は苦手なので、後半で紹介するCSSの方法と組み合わせて使うイメージを持っておくと安心です。

サイトタイトル・キャッチフレーズとの関係を整理しよう

SWELLでは、ロゴがないときにサイトタイトルやキャッチフレーズをヘッダー付近に表示させることができます。

ここをきちんと理解していないと、「ロゴは消えたのに、なぜか文字だけ残っている」という状態になりがちです。

私のおすすめは、ブログ型のサイトなら「ロゴなし＋テキストタイトル表示」、LPなら「ロゴもタイトルも非表示」というように、ページの役割ごとに切り替えて使うことです。

デモロゴを消して自分のロゴをあとから入れたいとき

SWELLを導入した直後は、デモ用のロゴ画像が入っていることがあります。

この状態でいきなりロゴを非表示にしようとすると、「どこまでがデモの設定なのか」「自分の設定がどこからなのか」が分かりづらくて混乱しやすいです。

迷わないための流れとしては、次のようなステップがおすすめです。

• まず自分用のロゴ画像を1枚でいいのでアップロードして、デモのロゴと入れ替える
• どの位置にどれくらいの大きさで表示されるか、ざっくり見え方を確認する
• 「やっぱりロゴは出したくない」と思ったら、そのロゴ画像を削除して非表示にする

こうしておくと、「ロゴを出す」「ロゴを消す」の切り替えが自分の中でイメージしやすくなります。

あとからブランド用のロゴをしっかり作り込みたくなったときも、すぐ再設定しやすいのでおすすめです。

CSSでヘッダーロゴだけをサクッと非表示にする方法

追加CSSに書く基本コードと考え方

環境によって細かいクラス名は違うこともありますが、考え方自体はとてもシンプルです。

「ヘッダーロゴの要素に display:none; を指定する」だけです。

目的	CSSのイメージ	補足
サイト全体でロゴを隠す	ヘッダーロゴのクラス名に display:none; を指定	すべてのページでロゴを非表示にしたいとき向け
特定ページだけロゴを隠す	page-idなどのクラスとヘッダーロゴのクラスを組み合わせる	LPやキャンペーンページだけロゴを隠したいときに便利
特定のテンプレートだけロゴを隠す	テンプレート専用のクラスとヘッダーロゴのクラスを組み合わせる	固定ページテンプレートや着せ替え用テンプレと相性がいい

具体的なクラス名は、ブラウザの検証ツールでヘッダーロゴ部分を右クリックして調べるのが一番確実です。

SWELLのHTML構造は比較的素直なので、「logo」「header」といった単語を手がかりに探すと見つけやすいですよ。

特定ページだけSWELLのヘッダーロゴを非表示にする手順

LPやセミナー案内など、「このページだけはロゴを隠して読み込みに集中してもらいたい」という場面も多いと思います。

そういったときは、WordPressがページごとに自動で付けてくれている「page-id-◯◯」というクラスを使います。

手順をざっと並べると、次のような流れです。

私も最初はこの「page-id」の存在を知らず、全部のページで同じ見た目になってしまって困っていました。

一度使い方を覚えると、ロゴ以外の装飾もページごとに変えられるようになるので、ぜひ覚えておいてほしいテクニックです。

PCだけ／スマホだけロゴを隠したいときのポイント

「スマホではロゴが大きくて邪魔に感じるけれど、パソコンでは見せておきたい」「逆にスマホだけロゴを出したい」といった相談もよくあります。

この場合は、メディアクエリという仕組みを使って、画面幅ごとにロゴの表示・非表示を切り替えます。

やりたいこと	指定のイメージ	注意点
パソコンだけロゴを非表示にする	一定以上の画面幅のときだけ display:none; を指定	どこからをパソコンとみなすか、幅の基準を決めておく
スマホだけロゴを非表示にする	一定以下の画面幅のときだけ display:none; を指定	タブレットの扱いをどうするかを先に決めておく
スマホだけロゴを表示する	全体では display:none; にして、スマホ幅だけ display:block; などで上書きする	!importantの多用は後から見返しづらくなるので控えめにする

書き始める前に、「スマホではどう見せたいか」「パソコンではどう見せたいか」を紙にざっとメモしておくと、CSSで迷いづらくなります。

私はいつも、スマホの見え方を先に決めてから、あとでパソコン用の調整を足していくやり方にしています。

ヘッダーロゴが勝手に非表示になったときのチェックリスト

設定まわりで確認しておきたいポイント

ヘッダーロゴが表示されないとき、意外と多いのが「設定のちょっとした変更が原因だった」というパターンです。

症状	確認する場所	よくある原因・対処
ロゴ画像がまったく表示されない	ヘッダーロゴの設定画面	ロゴ画像が設定されていない、または誤って削除していることが多い
ロゴのスペースはあるのに真っ白に見える	カラー設定や背景色の設定	背景色とロゴの色が似すぎていて、消えたように見えている可能性がある
一部のページだけロゴが出ない	固定ページ・投稿の設定、追加CSS	ページ単位の設定やCSSで、そのページのロゴだけ非表示にしている場合がある
ある日を境にロゴが突然消えた	プラグインの設定やテーマの更新履歴	高速化プラグインやキャッシュの設定変更が影響していることがある

私が相談を受けたケースでは、「キャッシュが残っていて、実際にはロゴ設定を変えたのに画面上は変化していなかった」ということもありました。

SWELL側のキャッシュ機能や、キャッシュ系のプラグインを使っている場合は、一度キャッシュ削除を試してみるのがおすすめです。

キャッシュ・プラグイン・CSSの落とし穴

設定を見直してもヘッダーロゴが戻らないときは、次の3つを疑ってみてください。

• キャッシュが効きすぎている
  SWELLの設定画面やキャッシュ用プラグインからキャッシュ削除を行い、ブラウザのキャッシュも一度リセットしてみましょう。
• 高速化やデザイン系プラグインの影響
  画像の遅延読み込みやHTMLの縮小機能が、ロゴの表示と相性が悪いケースがあります。いったんそれらのプラグインを停止して、ロゴが戻るか試してみると原因切り分けに役立ちます。
• 自分で書いたCSSがロゴを消している
  過去に書いたCSSの中に、意図せずロゴにも効いてしまっている指定が紛れていることがあります。ヘッダーロゴに関係しそうなクラス名で検索し、不要な display:none; がないか確認してみてください。

特に、ロゴを非表示にするCSSを何パターンか試したあとだと、どのコードが今効いているのか分からなくなりがちです。

そういうときは、追加CSSを一度コメントアウトしてロゴが戻るかどうかを確認するのが、最短ルートだったりします。

ロゴを非表示にする前に知っておきたいデザインとSEOの話

SWELLでヘッダーロゴを非表示にするメリット・デメリット

見た目をスッキリさせたいからといって、何も考えずにロゴを消してしまうと、サイト全体の印象が弱くなることもあります。

観点	メリット	デメリット
デザイン	余計な装飾が減り、LPなどで内容に集中してもらいやすい	サイトの個性や世界観が伝わりにくくなる
ブランド	顔出しやブランドを前面に出さない構成にしやすい	読者の記憶に残りづらく、リピーターが作りにくい
ユーザー体験	画面上部の占有スペースが減り、本文が見やすくなる	「どこのサイトを見ているのか」が一目で分かりにくくなる

私の感覚としては、LPやセールスページのような「一点集中で読ませたいページ」はロゴを消してもありですが、通常の記事ページはロゴを表示しておいたほうが安心だと感じています。

SWELLならページごとの調整もしやすいので、「全部のページでロゴを消す」か「全部のページでロゴを出す」の二択にする必要はありません。

ロゴの代わりに何を見せるかを考えよう

ヘッダーロゴを非表示にしたいということは、ヘッダーの見た目を変えたいということでもあります。

単純にロゴだけを消して終わりではなく、「代わりに何を見せると読者にとって親切か」まで考えておくと、デザインの完成度がぐっと上がります。

SWELLはヘッダー周りの設定がかなり細かく用意されているので、「ロゴ」「ヘッダーバー」「メニュー」を別パーツとして考えると、デザインの自由度が一気に上がります。

ヘッダーロゴを非表示にする設定は、その入り口だと思ってもらえるとイメージしやすいかなと思います。

ヘッダーロゴではなくヘッダー全体を非表示にしたい場合

テーマ設定でヘッダーをできるだけシンプルにする

いきなりCSSでヘッダーを丸ごと消してしまう前に、まずはSWELLのテーマ設定でどこまでシンプルにできるかを試してみましょう。

• ヘッダーバーをオフにする
• キャッチフレーズの表示位置を「表示しない」に変更する
• グローバルナビ（ヘッダーメニュー）の表示場所を調整する、またはメニュー自体を未設定にする

ここまでやるだけでも、「ロゴとメニューだけが並ぶ、かなりシンプルなヘッダー」までは持っていけます。

そのうえで、どうしてもヘッダーエリア自体を消したいときだけ、CSSで display:none; を使うようにすると、トラブルも少なく済みます。

LP向けにヘッダーごと非表示にするときの注意点

LPなどでヘッダーを完全に消すと、画面がスッキリする一方で、サイト内の他のページに移動しづらくなるというデメリットもあります。

• ヘッダーを消す代わりに、フッターやページ下部に「トップに戻る」「他の記事を見る」ためのリンクを用意する
• お問い合わせや申し込みページへのリンクは、ヘッダーがないぶん本文中でしっかり目立たせる
• 特にスマホユーザーはブラウザの戻るボタンだけに頼ることになりがちなので、ページ遷移の導線を意識して配置する

ヘッダーロゴを非表示にする設定をきっかけに、サイト全体の導線や見せ方も一緒に見直してみると、結果的に成果につながることも多いです。

よくある質問（FAQ）

Q1. SWELLでトップページだけヘッダーロゴを非表示にして、他のページでは表示させることはできますか？

A1. できます。

トップページのbodyタグには専用のクラスが付いているので、そのクラスとヘッダーロゴのクラスを組み合わせてCSSを書けば、トップだけロゴを非表示にできます。

固定ページをトップに設定している場合は、そのページのpage-idを使っても同じような制御が可能です。

Q2. SWELLでヘッダーロゴを非表示にしたら、検索的に不利になることはありますか？

A2. ロゴを非表示にしたこと自体が、直接検索順位に大きなマイナスを与えるケースはあまり考えにくいです。

ただ、サイトタイトルや見出しなど、ページ構造を判断するための情報は検索エンジンにとっても大事です。

ヘッダーロゴを隠すときは、「どこかにサイト名がきちんと表示されているか」「タイトルが分かりやすいか」だけ意識しておくと安心です。

Q3. ヘッダーロゴを非表示にしたのに、スマホメニューの中に小さなロゴが残ってしまいます。

A3. テーマによっては、ヘッダー部分のロゴとスマホメニュー内のロゴが別の要素になっていることがあります。

この場合は、スマホメニュー内のロゴ要素のクラス名も検証ツールで確認し、そのクラスに対しても display:none; を指定する必要があります。

SWELLの構造をよく見て、「どのロゴを消したいのか」をピンポイントで指定するのがポイントです。

まとめ：SWELLでヘッダーロゴを非表示にする今日からの一歩

ここまでの内容を振り返っておきます

今日からできる一歩としては、まず自分のサイトを開いて、「どのページでロゴを見せたいか」「どのページではロゴを隠したいか」をざっくり書き出してみてください。

そのうえで、この記事で紹介したカスタマイザーの設定とCSSの使い方を一つずつ試していけば、きっとイメージに近いヘッダーに近づいていきます。

私も最初は手探りでしたが、一度仕組みを理解してしまえば、SWELLのヘッダーロゴは思った以上に自由にコントロールできます。あなたのサイトに合ったベストな見せ方を、少しずつ調整しながら探ってみてくださいね。