「Swellのヘッダーとフッター非表示にしたい！」
そう思ったことはありませんか？
デザインの自由度が高く人気のWordPressテーマ「Swell」ですが、ちょっとした表現や演出を加えたいとき、ヘッダーやフッターが邪魔に感じる場面もあります。特にランディングページ風に仕上げたいときなど、「余計な装飾なしでページを見せたい！」というニーズは意外と多いんですよね。
結論から言えば、Swellのカスタマイズ機能だけではヘッダー・フッターの完全な非表示は難しいですが、追加CSSを使えばすぐに実現できます。
この記事では、初心者でも実践できるヘッダー・フッターを非表示にする方法をわかりやすく解説します。コードもそのままコピペOK。不要なパーツを取り払って、思い通りのページを作ってみましょう！
Swellでヘッダーとフッターを消す一番シンプルな方法
Swellは使いやすく高機能なWordPressテーマとして知られていますが、デフォルトではすべてのページに共通してヘッダーとフッターが表示されます。しかし、特定の用途ではこの共通レイアウトがかえって邪魔になることも。たとえば、ランディングページやミニマルなデザインを目指したい場合などですね。
とはいえ、Swellのカスタマイズ画面からヘッダーやフッターを完全に削除する設定は用意されていません。ウィジェットやロゴの非表示はできますが、構造そのものを取り除くには一手間必要です。
そこで最も手軽に実現できるのが、追加CSSを使って該当のHTML要素を非表示にする方法です。やり方はとても簡単で、以下のCSSを「外観」→「カスタマイズ」→「追加CSS」にコピペするだけ。
.l-header {
display: none;
}
.l-footer {
display: none;
}このコードを使えば、全ページからSwellのヘッダーとフッターをまとめて非表示にできます。どのテンプレートでも効果が反映されるため、わざわざ条件分岐を加える必要もありません。
ヘッダー・フッター非表示の注意点と副作用
CSSでヘッダーとフッターを非表示にする方法はとてもシンプルですが、便利な一方でいくつか注意すべき点もあります。特にサイト全体のUXやSEOに関わる部分なので、意図しない影響が出ないように理解しておくことが大切です。
まず、ヘッダーとフッターにはグローバルメニューやロゴ、コピーライト、SNSリンクなど、ユーザーにとって重要な情報が含まれている場合があります。これらをすべて非表示にすると、ナビゲーションの導線が途絶えてしまうため、回遊率や直帰率に悪影響を及ぼすことも考えられます。
また、検索エンジンのクローラーも、フッターにあるサイトマップリンクやナビゲーション情報を参考にしています。完全に表示をカットしてしまうことで、SEO面で若干のマイナス評価になる可能性もゼロではありません。
このため、以下のようなケースでは注意が必要です：
- ブログ全体や通常の投稿ページに適用する場合
- フッターに重要リンク（プライバシーポリシー・問い合わせなど）が含まれている場合
- 内部リンク構造を意識しているサイト設計の場合
一時的な用途や限定的なページ（LPや一枚物の告知ページ）に絞って使うなら特に問題ありませんが、恒常的に全ページに適用する場合は、それなりの設計と意図が必要になります。
この方法が効果的なケースと避けたほうがいいケース
ヘッダー・フッターの非表示という手法は、すべてのWebサイトにとって万能というわけではありません。ページの目的や構造によっては効果的に働くこともあれば、逆にユーザー体験を損ねてしまうケースもあります。
向いているケース
- ランディングページ（LP）やキャンペーンページなど、1ページ完結型の設計
- 外部広告やSNSからの流入に限定されたページで、ユーザーを迷わせたくない場合
- 「余計な情報を省いてコンバージョン率を高めたい」といったシンプル設計の狙いがあるとき
- 会員専用のサブページなど、ナビゲーション不要な閉じた導線を前提としたコンテンツ
このようなケースでは、むしろヘッダーやフッターがあると目的から逸れてしまうため、非表示にすることでコンテンツへの集中力を高める効果が期待できます。
向いていないケース
- 一般的なブログ記事や、カテゴリー構造が重要なWebメディア
- ユーザーがサイト内を自由に回遊することを想定した設計
- 企業サイトなどで、フッターに法的リンク（利用規約・特商法表記など）をまとめている場合
こうしたケースでは、ヘッダーやフッターがユーザーの道標になるため、削除することで利便性を損なうリスクがあります。特にSEOやアクセシビリティへの配慮が求められるサイトでは、十分に検討してから適用するべきです。
まとめ
Swellの標準機能では対応が難しいヘッダー・フッターの非表示も、CSSを使えば意外なほど簡単に実現できます。コードを少し追加するだけで、サイト全体の印象を大きく変えることができるため、表現の幅が広がります。
