SWELLでフッター直前の余白を消す方法｜コンテンツ下の白い余白をCSSで調整

SWELLで固定ページを作っていると、コンテンツの終わりとフッター直前ウィジェットの間に、白い余白が入ることがあります。

サイト全体が白背景ならあまり気になりませんが、フッター直前ウィジェットに背景色や背景画像を使っていると、この余白がかなり目立ちます。

今回は、SWELLでフッター直前の余白を消す方法を紹介します。

「固定ページのコンテンツ下の余白をなくす」にチェックを入れても変わらなかった場合にも使える方法です。

あわせて読みたい

SWELLの固定ページ上部の余白を消す方法｜CSSだけで消えない原因とパンくずリスト設定も解説 この記事で分かること 固定ページ上部の余白を消す「CSS」 完全に余白をなくすパンくずリストの設定方法 余白が消えないときの確認ポイント SWELLで固定ページを作成し…

結論｜CSSで余白を調整する

SWELLでフッター直前の余白が消えない場合は、以下のCSSを追加します。

#content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#before_footer_widget {
  display: block !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#before_footer_widget > *,
#before_footer_widget .l-container,
#before_footer_widget .w-beforeFooter__inner,
#before_footer_widget .widget {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#footer {
  margin-top: 0 !important;
}

このCSSを入れることで、コンテンツ下からフッター直前ウィジェットまでの余白を調整できます。

CSSを追加する場所

固定ページだけに反映させたい場合は、編集画面の下にあるCSS用コードに追加します。

固定ページのCSS用コードに入れる場合は、上記のCSSをそのまま貼り付ければOKです。

サイト全体の「追加CSS」に入れる場合は、ほかのページにも影響する可能性があるのでご注意ください。

実際に困ったポイント

私の場合も、固定ページの最後とフッター直前ウィジェットの間に白い余白ができていました。

サイトが白背景なら目立たないのですが、フッター直前に色付きの背景や画像を入れていたため、白い帯のように見えてしまう状態でした。

固定ページの「コンテンツ下の余白をなくす」にチェックを入れても変わらなかったので、最終的にCSSで調整しました。

日本語コメントを入れると効かない場合がある

固定ページのCSS用コードに追加する場合、CSS内に日本語コメントを入れると反映されませんでした。

CSSの仕様上、日本語コメントが絶対にダメというわけではありません。

ただ、WordPress側の保存処理やテーマ側の処理との相性で、うまく反映されないことがあるので、固定ページのCSS用コードに入れる場合は、コメントなしで貼り付けるのが安全です。

まとめ

SWELLでフッター直前に白い余白ができる場合、「コンテンツ下の余白をなくす」にチェックを入れても変わらないことがあります。

特に、フッター直前ウィジェットに背景色や背景画像を使っていると、この白い余白がけっこう気になりますよね。

同じように「SWELLのフッター直前に余白ができて気になる…」という方は、ぜひ試してみてください。ページ下部のつながりが自然になって、かなりスッキリした印象になります！

あわせて読みたい

SWELLのリンクリストを横並びにすると左揃えになる問題の解決方法 この記事で分かること SWELLのリンクリストを横並びにすると左揃えになる理由 CSSなしで中央揃えを再現する方法 スマホでダサくならない調整方法 PCとスマホで表示を分…