SWELLのフッター直前の余白を消す5つの手順

フッターの少し上に、よく分からないスキマができてモヤモヤしていませんか。

この記事ではSWELLのフッター直前の余白を消す方法をお伝えします。

最後まで読んでもらえれば、「どこをどう触ればいいのか」が具体的にイメージできて、すぐにフッター直前の余白を自分の手で調整できるようになります。

SWELLのフッター直前にできる余白の正体を整理しよう

SWELLで発生しやすいフッター直前の余白パターン

ひとことで「余白」と言っても、発生源はいくつかあります。代表的なパターンを先に表にまとめておきます。

パターン	見た目の症状	主な原因候補	よく見る場所
コンテンツ下の余白	本文とフッターの間がやたら広い	固定ページの「コンテンツ下の余白をなくす」がオフ	固定ページ、LP
フッター直前ウィジェットとの余白	ウィジェットエリアとフッターの間に妙なスキマ	カスタマイザーのフッター設定	共通フッター、全ページ
TOPページだけ余白	TOPだけフッター前が広く見える	TOP専用テンプレートやウィジェット構成	フロントページ
ブログパーツ・広告の余白	パーツを置いたときだけ空き方がおかしい	ブログパーツや広告タグ自体のmargin・padding	全ページ

私も最初は「テーマ側のバグかな」と疑っていたのですが、よくよく見ていくと、たいていはどれかのパターンに当てはまります。原因がぼんやりしたままCSSをいじると、別のページのデザインまで崩れたりするので、最初にここを整理しておくのが大事です。

どの位置の余白なのかを画面を見ながら確認する

次に、実際の画面を見ながら「どこに余白があるのか」をチェックしていきます。ここを雑に済ませると、調整しても「なんか違う…」となりがちです。

この確認をしながら、先ほどの表のどれに近いかを照らし合わせていくと、あとで設定やCSSを当てるときに迷いづらくなります。

設定だけでSWELLフッター直前の余白をなくす基本手順

固定ページ「コンテンツ下の余白をなくす」を見直す

固定ページやLPでよくあるのが、「コンテンツ下の余白をなくす」にチェックを入れ忘れているパターンです。私もランディングページを作ったときに、ここを見落としていて、フッターの手前に変な空白が残っていたことがあります。

まずは、次の順番で確認してみてください。

• 管理画面で対象の固定ページを編集画面で開く
• 画面右側の「SWELL設定」パネルを探す
• 「コンテンツ下の余白をなくす」にチェックを入れて更新する

ついでに見直しておきたい項目も、表にまとめておきます。

項目	場所	おすすめ設定
コンテンツ下の余白をなくす	固定ページ編集画面の「SWELL設定」	LPや縦長のページではオンにしてスッキリ
アイキャッチの表示	同じくSWELL設定	不要ならオフにして無駄なスペースを減らす
ページの余白設定	ブロックエディタ側の余白ブロック	必要に応じて最小〜中程度に調整

これだけで、「本文のすぐ下だけなぜか空いている」というタイプの余白は、そのページ単位でかなり解消できます。特にLPやプロフィールページなど、下までギュッと詰めたいページでは、一度確認してみてください。

カスタマイザーで「フッター」と「フッター直前ウィジェット」の余白を調整する

サイト全体で共通しているフッター直前の余白は、カスタマイザーで調整できます。ここを整えておくと、「どのページもなんとなく雰囲気がバラバラ」という状態から抜け出しやすくなります。

• 外観 → カスタマイズ → フッター を開く
• 「レイアウト」や「その他の設定」タブをチェックする
• フッター周りのpaddingや、フッター直前ウィジェットとの間隔を確認する

よく触る項目を整理すると、こんなイメージです。

設定項目	役割	こんなときに調整する
フッター上部の余白	フッターの上にあるスキマ全体	全ページでフッター前が広すぎるとき
フッター下部の余白	コピーライト部分の下のスキマ	最下部が間延びして見えるとき
フッター直前ウィジェットとの余白	ウィジェットエリアとフッターの境目	フッター直前ウィジェットを使っているときのスキマ調整

SWELLのフッター直前の余白に悩んでいる方は、この「フッター直前ウィジェットとの余白」を一度見直してみると、「あ、ここが原因だったのか」と分かることが多いです。

TOPページだけフッター直前の余白が違うときの確認ポイント

「記事ページは問題ないのに、TOPページだけフッターの手前に変な余白がある」という相談もよくもらいます。この場合、TOPページだけ別のルールで作られているケースがほとんどです。

• TOPページが「静的フロントページ（固定ページ）」に設定されているか
• TOP専用の固定ページで、余白が大きいセクションブロックやカバーブロックを使っていないか
• フッター直前ウィジェットに、TOP専用のウィジェットを入れていないか

TOPだけ余白が独特なときは、「TOPに使っている固定ページのSWELL設定」と「TOP専用のウィジェット周り」のどちらかにヒントがあることが多いです。特に、TOP用の固定ページでも「コンテンツ下の余白をなくす」のオン・オフは忘れずにチェックしてみてください。

CSSでフッター直前の余白をピンポイントで整える

よく使うSWELLフッター周りのCSS例

フッター直前の余白をCSSで調整するときに、よく出てくるのが「margin（マージン）」と「padding（パディング）」です。ざっくり違いを整理しておきます。

用語	ざっくりイメージ	よく使うシーン
margin	要素の外側のスキマ	ブロック同士の間隔を詰めたいとき
padding	要素の内側のスキマ	ボックスの中の余白を整えたいとき

例えば、メインコンテンツとフッターの間を少しだけ詰めたい場合は、「メインコンテンツを囲っている箱のmargin-bottomを少し小さくする」という考え方になります。どの要素を触ればいいかはテーマごとに違いますが、やること自体はどれも同じです。

同じように、フッター直前ウィジェットの下の余白を減らしたい場合は、「フッター直前ウィジェット全体を囲っている要素のmargin-bottomを調整する」というイメージになります。

難しく考える必要はなくて、「どの箱の外側のスキマを削るか」を意識して見るクセをつけておくと、検証ツールで原因を探しやすくなります。

スマホとPCでフッター直前の余白を変えたいときの考え方

よくあるのが、「PCではちょうどいいのに、スマホで見るとフッター直前の余白がやたら広く感じる」というパターンです。これは、画面の比率が違うので、同じ余白でも印象が変わって見えるからです。

実際には、メディアクエリを使って「スマホだけ余白を多めにする」といった書き方もできますが、まずはカスタマイザーや固定ページ側の設定でどこまで整えられるかを試し、それでも違和感が残る部分だけCSSで補う、という順番で考えると失敗しにくいです。

ブログパーツ・広告を置いたときのフッター直前の余白トラブル

ブログパーツをフッター直前に置くときのコツ

SWELLはブログパーツ機能が使いやすいので、フッター直前ウィジェットにブログパーツを表示させている人も多いと思います。そのときにありがちなのが、「ブログパーツ内のブロックに余白を盛り込みすぎて、フッター直前の余白が増えている」というパターンです。

ブログパーツをチェックするときのポイントをまとめると、こんな感じです。

チェック項目	見る場所	こうなっていると余白が増えやすい
ブロックの下余白	ブログパーツ編集画面の各ブロック	大きめの「下マージン」が設定されている
セクションブロックのpadding	セクションやカバーなどのブロック設定	上下paddingがかなり大きくなっている
余白ブロックの有無	レイアウト調整用の余白ブロック	フッター直前に余白ブロックを重ねて置いている

フッター直前のブログパーツは、「パッと見て内容が分かる」「フッターと一体感がある」くらいの詰まり具合にしておくと、全体としてまとまりが出ます。スキマが気になったときは、まずブログパーツ側の余白設定を落ち着いて見直してみてください。

広告タグや外部ウィジェットが原因の余白を見つける

アドセンスやアフィリエイト広告、外部サービスのウィジェットをフッター前に入れている場合、そのコード自体が余白を持っていることも多いです。ここは、SWELLの設定ではどうにもならない部分です。

たとえば次のようなケースがあります。

• 広告コード内の要素にmarginやpaddingが直接指定されている
• 高さを確保するために、上下にスキマを取る前提のデザインになっている
• レスポンシブ対応のために、周囲に余白を持たせるスタイルになっている

こういった場合は、ブラウザのデベロッパーツール（検証機能）で広告部分をクリックして、「どの要素がどれくらいの余白を持っているか」を目で確認すると原因が見えてきます。広告側でデザインが固定されていることも多いので、必要に応じて掲載位置自体を見直すのも一つの手です。

見た目と使いやすさを両立するフッター直前の余白デザイン

余白をゼロにしないほうがいいケース

余白は敵ではなく、「読みやすさを保つための空気」のような存在です。全部詰めてしまうと、かえって読みにくくなったり、ボタンが押しづらくなったりします。

ざっくりとしたイメージを表にすると、こんな感じです。

状態	見た目の印象	ユーザー体験
余白ゼロでベタ付き	情報が詰まりすぎて窮屈	リンクやボタンが押しづらく、誤タップも増えやすい
ほどよい余白あり	セクションが区切られて見やすい	視線の流れが整い、最後まで読みやすい
余白が多すぎ	間延びして最後まで見てもらいにくい	「ここまででいいか」と離脱されやすい

フッター直前には、プロフィールやメルマガ登録、関連記事など「最後の一押し」を置くことが多いと思います。この部分が詰まりすぎているとゴチャゴチャして見えますし、逆にスカスカだと弱々しく見えます。

余白を調整するときは、いきなり大きく変えずに、「今より一段階だけ狭くする」「一段階だけ広くする」といったイメージで、少しずつ触っていくと失敗しにくいです。

サイト全体とページ単位のバランスを意識する

フッター直前の余白だけに集中していると、「ここだけ完璧」にしたくなりますが、大事なのはサイト全体とのバランスです。SWELLのフッター直前の余白も、あくまで全体デザインの一部という感覚で見ると調整しやすくなります。

押さえておきたい視点を表にすると、次の通りです。

調整レベル	主に触る場所	目的
サイト全体	カスタマイザーのフッター設定	全ページの共通感や世界観を整える
ページ単位	固定ページのSWELL設定やブロック余白	LPや特別なページだけ雰囲気を変える
パーツ単位	ブログパーツや広告タグの余白	フッター直前に置いた要素を細かく微調整する

おすすめの順番は、「サイト全体 → ページ単位 → パーツ単位」です。いきなり部分だけをいじるのではなく、大きなところから順番に整えていくと、後から「やっぱり全体を変えたい」となったときも対応しやすくなります。

SWELL フッター直前の余白に関するよくある質問

Q1. SWELLでフッター直前の余白を「設定だけ」で完全になくせますか？

A. 多くのケースは設定だけでかなり近づけられますが、細かいこだわりまで反映したいならCSSも少し使ったほうが早いです。コンテンツ下の余白やフッター直前ウィジェットとの余白は、SWELLの設定できちんとコントロールできます。ただ、「広告タグ固有の余白」や「特定のブログパーツ内のmargin」など、テーマ側では触れない部分もあるので、そこだけ追加CSSでピンポイントに整えるイメージで考えるとよいと思います。

Q2. SWELLのフッター直前の余白をCSSでいじると、他のページが崩れそうで怖いです…

A. セレクタの範囲を適切に絞れば、フッター直前の余白だけを狙って調整することは十分可能です。「特定の固定ページだけ」「特定のブログパーツだけ」というように、クラス名やIDを指定してあげれば、他のページには影響しません。最初は「サイト全体に効くCSS」ではなく、「このページ限定」「このパーツ限定」という小さな範囲から慣れていくのがおすすめです。

Q3. SWELLのテーマ設定と追加CSS、どちらを優先してフッター直前の余白を調整すればいいですか？

A. 基本の方針としては「テーマ設定でできるところまで整える → それでも気になる部分だけCSSで補う」という順番が安心です。SWELLはカスタマイザーがかなり細かく作り込まれているので、フッター周りの余白もまずはそこで調整してみてください。そのうえで、「ここだけどうしても気になる」というところをCSSで微調整したほうが、あとからデザインを変えたいときにも柔軟に対応できます。

まとめ：SWELLのフッター直前の余白は「原因ごと」に順番に潰していこう

この記事でお伝えしてきたポイントをまとめます

今日からできる最初の一歩としては、まず1つのページで構わないので、フッター直前までゆっくりスクロールして、「どの箱のどの余白が気になるのか」をじっくり観察してみてください。

そのうえで、固定ページのSWELL設定とカスタマイザーのフッター設定を順番に見直していけば、「なんとなくモヤモヤしていたフッター直前の余白」が、自分でコントロールできるものに変わっていきます。