SWELLの固定ページ上部の余白を消す方法｜CSSだけで消えない原因とパンくずリスト設定も解説

SWELLで固定ページを作成していると、ページタイトルの下に、余白ができるので気になりますよね。

この余白をすっきり消したい場合は、CSSの追加とパンくずリストの位置変更をセットで行うのがおすすめです。

CSSだけでもある程度余白は減らせますが、パンくずリストがページ上部に表示されたままだと、スペースが残ってしまいます。

結論｜CSS追加＋パンくずリストを「ページ下部」に変更する

まずは、以下のCSSを追加します。

.l-mainContent__inner > .post_content {
  margin-top: 0;
}

#content {
  padding-top: 0;
}

さらに、パンくずリストの表示位置を「ページ下部」に変更します。

設定場所はこちらです。

外観 → カスタマイズ → サイト全体設定 → パンくずリスト → ページ下部

この2つを設定することで、固定ページ上部の余白をなくすことができます。

CSSを追加する場所

CSSを追加する場所は、反映したい範囲によって変わります。

特定の固定ページだけ反映したい場合

固定ページ編集画面下部にある「CSS用コード」に入力します。

固定ページ全体に反映したい場合

以下に入力してください。

外観 → カスタマイズ → 追加CSS

全ページに影響させたくない場合は、まず個別ページ側で試すのがおすすめです。

CSSだけで消えない場合はパンくずリストを確認

CSSを追加しても、パンくずリストが上部になっているとちょっと見た目が気になりますよね。

SWELLでは、パンくずリストをページの上部や下部に表示できます。

固定ページのファーストビューをすっきり見せたい場合は、パンくずリストを「ページ下部」に変更しましょう。

設定場所はこちらです。

外観 → カスタマイズ → サイト全体設定 → パンくずリスト

ここで表示位置を「ページ下部」に変更します。

余白が消えないときの確認ポイント

設定しても反映されない場合は、以下を確認してください。

キャッシュが残っている

ブラウザやキャッシュ系プラグインの影響で、変更が反映されていない場合があります。

一度キャッシュを削除して確認しましょう。

CSSの入力場所が違う

反映範囲によって、入力場所が変わります。

• 特定ページのみ → 固定ページ内のCSS用コード
• 固定ページ全体 → 追加CSS

他のCSSが影響している

それでも変わらない場合は、別のCSSが余白に影響している可能性があります。

まとめ

SWELLの固定ページ上部の余白を消すには、CSS追加だけでなく、パンくずリストの位置変更も重要です。

追加するCSSはこちら。

.l-mainContent__inner > .post_content {
  margin-top: 0;
}

#content {
  padding-top: 0;
}

さらに、以下からパンくずリストを「ページ下部」に変更します。

外観 → カスタマイズ → サイト全体設定 → パンくずリスト → ページ下部

固定ページ上部をすっきり見せたい場合は、ぜひこの2つをセットで試してみてください。