SWELL固定ページ上部の余白を消す方法｜タイトル非表示後の対処

WordPressテーマ「SWELL」で固定ページを作成していると、「タイトルを非表示にしたのに、ページ上部の白い余白が消えない」ということがあります。

特にサービスページやランディングページでは、ヘッダーのすぐ下からファーストビューを表示したいケースも多いため、大きな空白があるとデザインが崩れたように感じるかもしれません。

このような場合、原因はページタイトルそのものではなく、タイトルを配置していた領域やコンテンツ側に設定された余白にある可能性があります。

SWELLの設定で確認するポイントから、必要に応じてカスタムCSSで調整する方法まで、専門知識がない方にも分かるように順番に解説します。

SWELLで固定ページ上部に白い余白ができるのはなぜ？

結論からいうと、SWELLでページタイトルを非表示にしても、その周辺に設定された余白まで必ずなくなるとは限りません。

Webページは、タイトル、本文、ブロックなど複数の要素を組み合わせて作られています。

そのため、

「タイトルの文字を非表示にする設定」

と

「タイトル周辺のスペースをなくす設定」

は別になっていることがあります。

例えば、サービスページの先頭にフルワイドのファーストビューを置いた場合でも、その手前にタイトル用の領域が残っていれば、

ヘッダー
↓
パンくずリスト
↓
大きな白い余白
↓
ファーストビュー

という表示になることがあります。

デザイン上、意図した余白であれば問題ありません。

一方、ファーストビューをできるだけ上から表示したい場合には、この余白を調整した方がページ全体をすっきり見せられます。

まず確認したいSWELLの固定ページ設定

いきなりCSSを書くのではなく、最初にWordPressとSWELLの設定を確認しましょう。

設定だけで解決できれば、後からサイトを管理する際にも分かりやすくなります。

固定ページのタイトル表示を確認する

WordPress管理画面から、

「固定ページ」→「対象のページ」→「編集」

と進みます。

ページ編集画面の右側には、固定ページに関する設定があります。

環境によって項目名は異なりますが、ページタイトルを非表示にする設定が用意されている場合は、まずそこを確認します。

「Hide Page Title」などの項目がある場合は、必要に応じて有効にしてください。

設定後は必ず「保存」または「更新」を行い、公開ページを確認します。

ここでタイトルと余白の両方が消えれば、CSSを追加する必要はありません。

ページタイトルを消しても白い余白が残る主な原因

タイトル文字だけが消えて空白が残る場合には、いくつかの原因が考えられます。

タイトルを囲んでいた領域が残っている

ページタイトルは、文字だけが単独で配置されているとは限りません。

タイトルを囲む要素に、

• 上下の余白
• 横線
• 背景
• 最大幅

などが設定されていることがあります。

そのため、タイトル文字を非表示にしても、外側の領域だけが残ってしまう場合があります。

paddingが設定されている

CSSでは、要素の内側に作る余白を「padding」と呼びます。

例えば、

padding-top: 80px;

と設定されている場合、その要素の上側に80pxのスペースが入ります。

ページタイトルを消しても、コンテンツ全体にこのpaddingが設定されていれば、白い余白は残ります。

marginが設定されている

一方、「margin」は要素の外側の余白です。

例えば、

margin-top: 60px;

が設定されていると、対象要素の上に60pxのスペースができます。

見た目としてはpaddingと似ていますが、仕組みは異なります。

余白を調整するときは、どちらが原因なのか確認することが大切です。

ファーストビュー側のブロックに余白がある

ページタイトルではなく、最初に配置しているフルワイドブロックなどに上余白が設定されている場合もあります。

そのため、

「タイトルを非表示にしたのに直らない」

という場合は、最初のブロック設定も確認してみましょう。

SWELL固定ページ上部の余白を消す具体的な方法

設定を確認しても改善しない場合は、カスタムCSSによる調整を検討します。

CSSとは、文字の大きさ、色、余白、配置など、Webサイトの見た目を指定するための仕組みです。

今回のような余白調整であれば、数行のコードで対応できる場合があります。

方法1：ページタイトルの領域を非表示にする

タイトル部分の要素自体が残っている場合は、次のようなCSSを使用します。

.c-pageTitle {
    display: none;
}

display: none;は、対象の要素を画面上から表示しないための指定です。

ただし、サイト全体のCSSへ追加すると、他の固定ページのタイトルまで消える可能性があります。

そのため、特定のページだけ変更する場合は、ページ専用のCSS欄を使用するか、そのページだけに適用される指定にすることをおすすめします。

方法2：メインコンテンツ上部の余白を調整する

タイトル領域を非表示にしても余白が残る場合は、コンテンツ側のpaddingを確認します。

例えば次のようなCSSです。

.l-content {
    padding-top: 0;
}

これでページ全体の上側に設定されていたpaddingをなくせる場合があります。

さらに、環境によっては次の指定が必要になることもあります。

.l-mainContent__inner {
    padding-top: 0;
}

SWELLの設定状況やページ構成によって対象となるクラスは異なるため、一つずつ試すのが安全です。

方法3：本文側のmarginを確認する

本文の先頭に余白が設定されている場合は、次のような調整も考えられます。

.post_content {
    margin-top: 0;
}

ただし、余白があるからといって、すべてのコードをまとめて入れる必要はありません。

原因ではない場所まで変更すると、別のレイアウトに影響する可能性があります。

「どのCSSで直ったか」が分かるように、少しずつ追加して確認しましょう。

特定の固定ページだけ余白を消す方法

今回のような調整で特に重要なのが、CSSの適用範囲です。

例えばサービスページだけファーストビューを上に詰めたい場合、会社概要やお問い合わせページまで同じ表示にする必要はありません。

サイト全体に、

.c-pageTitle {
    display: none;
}

と設定すると、意図していないページにも影響する場合があります。

そのため、特定ページだけを変更する方法が適しています。

ページごとのカスタムCSSを利用する

固定ページの編集画面にページ単位でCSSを記述できる機能がある場合は、そこへコードを追加します。

例えば、

.c-pageTitle {
    display: none;
}

.l-content {
    padding-top: 0;
}

のように記述します。

この方法なら、他のページへ影響するリスクを抑えやすくなります。

page-idを利用する

WordPressでは、各固定ページにページ固有のIDがあります。

例えばページIDが123の場合、body要素に、

.page-id-123

というクラスが付与されることがあります。

これを利用すると、

.page-id-123 .c-pageTitle {
    display: none;
}

.page-id-123 .l-content {
    padding-top: 0;
}

のように、そのページだけを指定できます。

複数ページを管理している場合に便利な方法です。

!importantは最初から使わない方がよい

CSSを調べていると、

padding-top: 0 !important;

という書き方を目にすることがあります。

!importantを付けると、そのCSSの優先度を強くできます。

他のCSSに上書きされてしまう場合には有効ですが、最初から多用するのはおすすめできません。

例えば、

.l-content {
    padding-top: 0;
}

で反映されるのであれば、そのままの方が後から管理しやすくなります。

どうしても他のCSSが優先される場合に、

.l-content {
    padding-top: 0 !important;
}

を検討するとよいでしょう。

CSSを変更しても余白が消えない場合の確認ポイント

コードを追加しても変化がないと、「CSSが間違っているのでは」と考えがちです。

しかし、別の原因で変更が反映されていないこともあります。

保存・更新ができているか

基本的なことですが、CSSを入力しただけでは公開ページへ反映されません。

ページ編集画面の「保存」または「更新」を行ったか確認します。

ブラウザのキャッシュが残っていないか

キャッシュとは、Webページを速く表示するために、以前の情報を一時的に保存する仕組みです。

CSSを変更しても、ブラウザが変更前のデータを表示していることがあります。

その場合は、

• ページを再読み込みする
• シークレットウィンドウで確認する
• ブラウザキャッシュを削除する

などを試してみます。

キャッシュ系プラグインを使用している場合は、WordPress側のキャッシュ削除が必要になることもあります。

CSSの対象が違っていないか

同じ「白い余白」に見えても、原因となっている要素はサイトによって異なります。

ページタイトルではなく、

• メインコンテンツ
• フルワイドブロック
• グループブロック
• セクション
• パンくずリスト周辺

などが原因になっている可能性もあります。

ブラウザの「開発者ツール」を使うと、どの要素に余白が設定されているのか確認できます。

開発者ツールとは、WebページのHTMLやCSSをブラウザ上で確認できる機能です。

ChromeやSafariなど、多くのブラウザに標準で用意されています。

ファーストビューを上に詰めるときの注意点

余白を消すこと自体が目的にならないように注意しましょう。

Webサイトでは、適度な余白もデザインの重要な一部です。

ヘッダーとファーストビューが近すぎないか

余白を完全にゼロにすると、ヘッダーとメインビジュアルが詰まりすぎて見える場合があります。

実際の公開画面を確認しながら、必要であれば10〜30px程度の余白を残す方法もあります。

例えば、

.l-content {
    padding-top: 20px;
}

のように調整できます。

パンくずリストとのバランスを確認する

パンくずリストとは、

「ホーム ＞ サービス ＞ Web制作」

のように、現在いるページの位置を示す表示です。

パンくずリストを残す場合は、

ヘッダー
↓
パンくずリスト
↓
ファーストビュー

という流れになるため、ファーストビューとの距離を確認します。

タイトルを消しても、パンくずリストまで無理に消す必要はありません。

スマートフォンでも確認する

PCでは問題なくても、スマートフォンでは余白の見え方が変わる場合があります。

特に確認したいのは、

• ヘッダーとの距離
• 見出しの改行
• ファーストビュー画像のトリミング
• CTAボタンの位置
• テキストの読みやすさ

です。

公開前にはPCとスマートフォンの両方で確認しましょう。

ファーストビューの余白を整えるメリット

ファーストビューとは、ページを開いた直後にスクロールせず見える範囲のことです。

サービスページでは、この部分で、

• 誰向けのサービスなのか
• 何を提供しているのか
• どんな特徴があるのか
• 次に何をしてほしいのか

を伝えることが重要です。

例えば、Web制作サービスのページで大きな白い余白の後に、

「企業向けWeb制作をサポートします」

というメッセージが表示されるよりも、ページを開いた段階からメインメッセージが見えた方が内容を理解しやすくなります。

ただし、余白が少ないほど良いというわけではありません。

必要な情報を見つけやすくし、読みやすさを保つことが目的です。

よくある質問

SWELLでタイトルを非表示にすれば余白も消えますか？

ページ設定や使用しているレイアウトによって異なります。

タイトル文字と一緒に余白もなくなる場合もありますが、タイトル周辺の領域やコンテンツ側に余白が設定されていると、スペースだけ残ることがあります。

CSSを使わずに直せますか？

SWELLやブロック側の設定で余白を変更できる場合は、CSSを使わずに対応できます。

まず設定を確認し、それでも解決できない場合にCSSを検討するのがおすすめです。

CSSを追加すると他のページも変わりますか？

記述する場所とCSSの指定方法によります。

サイト全体に適用されるCSSへ記述すると他ページにも影響する可能性があります。

特定ページだけを変更する場合は、ページ専用CSSやpage-idを利用すると安全です。

白い余白をすべて0にしても問題ありませんか？

必ずしも0が最適とは限りません。

ページデザインによっては適度な余白を残した方が読みやすくなります。

公開画面を確認しながら調整しましょう。

変更前にバックアップは必要ですか？

簡単なCSS変更であっても、事前にバックアップを取っておくと安心です。

特にWordPress本体やテーマファイルを直接編集する場合は、バックアップをおすすめします。

まとめ

SWELLで固定ページ上部の白い余白を消したい場合は、最初にページタイトルの設定を確認しましょう。

タイトルを非表示にしても余白が残る場合は、タイトル領域やコンテンツ側に設定されているpaddingやmarginが原因になっている可能性があります。

対応の基本的な流れは、

1. SWELLの固定ページ設定を確認する
2. 最初のブロックの余白を確認する
3. 必要な場合だけカスタムCSSを追加する
4. PCとスマートフォンの両方で確認する

という順番です。

CSSで無理にすべてを上書きするのではなく、まず設定で解決できないか確認することが、後から管理しやすいWebサイトにつながります。

特にサービスページやLPでは、ファーストビューの見え方がページ全体の印象を左右します。

「余白が気になる」「タイトルを消したのにスペースが残る」といった小さな違和感も、一つずつ原因を確認していけば改善できるケースは多くあります。

サイトを作って終わりにするのではなく、実際の表示を見ながら細かく整えていくことが、見やすく使いやすいWebサイトを作るうえで大切です。