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

ケケンタ

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

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

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

＼Web制作を仕事にしたいなら／

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE

まずは無料相談してみる >>

￣￣￣

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス 

　Amazon Prime　

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る　
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法 

• Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
• 会員の自動更新を解除しておく＝期限が来たら自動解約
• １～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも３回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

Amazonで買い物をする　>>

【解決方法】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を見てみる　>>