【SWELL】TOPページのフッター真上にある余白を簡単に無くす方法

ケケンタ

SWELLでTOPページを固定ページでカスタマイズしていたらフッターの真上に謎の余白が残ってしまいました……。
バランスが悪いので消したい！

SWELLのTOPページを固定ページでカスタマイズしていると、以下のようにフッターの真上に謎の余白が残ってしまいました。

今回はこの謎の余白を無くす方法を解説します。

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

【解決方法】TOPページとして使用する固定ページにCSSを追記する

早速ですが、解決方法はこちら

.l-content {
  margin-bottom: 0 !important;
}

このコードを、TOPページ用の固定ページの「カスタムCSS＆JS」の「CSS用コード」に記述します。

すると、以下のように綺麗に余白が無くなりページバランスが整います。

SWELLのTOPページのフッターの真上に残る余白の正体

Googleの検証ツールで余白の正体を調べてみると、どうやらコンテンツであるmainタグを囲うラッパー要素（.l-contentクラス）にmarginが付いている様子でした。

先ほど記述したCSSは、そのmarginのbottom（下部）だけを０にするためのものです。

このmarginは僕の環境ではTOPページに設定した固定ページでのみ設定されている様子でした。
そのため、先ほど記述したCSSはTOPページとして使用する固定ページにのみ設定をしています。

もしその他のページでも同様の余白が見られるようであれば、そのページにも先ほどのCSSを設定してみて下さい。

ケケンタ

これでSWELLのTOPページの見栄えがまた一段と良くなりました！

この記事がお役に立ったなら何よりです。

最後までお読みいただきありがとうございました！

SWELLのデモサイトを見てみる

SWELLのその他の記事はこちら

 SWELL記事一覧

今回ご紹介した内容のテーマ 

SWELLを見てみる　>>