WordPressテーマ「SWELL」でサイトを作っていると、フッター1・2・3エリアの上に、少し大きめの空きができることがあります。
デザインとして余白があるのは悪いことではありません。しかし、広告やバナー、プロフィール、リンク集などをフッター付近に配置している場合、余白が広すぎると間延びして見えることがあります。
私の環境では、フッター1・2・3の上に空きができていたため、CSSで上に詰める調整をしました。
この記事では、SWELLのフッター1・2・3上の空き部分を、追加CSSで詰める方法を紹介します。
SWELLのフッター下部に空きができる状態
SWELLでは、フッター周辺に複数のウィジェットエリアがあります。
たとえば、次のようなエリアです。
- フッター直前ウィジェット
- フッター1
- フッター2
- フッター3
このあたりに広告やリンク、プロフィール、ランキングバナーなどを入れると、配置自体は問題なくても、上下の余白が広く見えることがあります。特に、フッター1・2・3の上に間隔が空きすぎると、ページ下部がスカスカに見えることがあります。
そこで、CSSのを使って、フッター1・2・3エリアを少し上に引き上げます。
フッター1・2・3の空き部分を詰めるCSS
私の環境では、以下のCSSでうまく詰めることができました。
/*
フッター直前ウィジェットと
フッター1・2・3エリアの間隔を狭くする
margin-top: -20px
→ 要素を20px上へ引き上げる
→ 数値を大きくするとさらに詰まる
→ 例：-10px（少し詰める）、-30px（さらに詰める）
!important
→ SWELL標準CSSより優先して適用する
*/
.l-footer__widgetArea,
.l-footer__widgets,
.l-footerWidget {
margin-top: -100px !important;
}このCSSを追加することで、フッター1・2・3エリア全体が上に引き上げられ、空白部分がなくなりました。
CSSを貼る場所
CSSは、WordPress管理画面から追加できます。
手順は次の通りです。
- WordPress管理画面を開く
- 「外観」をクリック
- 「カスタマイズ」をクリック
- 「追加CSS」を開く
- 上記のCSSを貼り付ける
- 公開をクリックする
これで、サイト全体にCSSが反映されます。
ただし、すぐに反映されない場合は、ブラウザキャッシュやキャッシュ系プラグインの影響があるかもしれません。その場合は、キャッシュを削除してから再確認してください。
margin-top: -100px の意味
今回のCSSで重要なのは、次の部分です。
margin-top: -100px !important;通常、「margin-top」は要素の上側の余白を調整するCSSです。たとえば、次のように指定すると、上に20px分の余白ができます。
margin-top: 20px;一方で、マイナスの値を指定すると、要素を上方向に引き上げることができます。
margin-top: -20px;つまり、今回のように「margin-top: -100px;」と指定すると、対象のフッターエリアを100px分、上に引き上げるという意味になります。
数値はサイトに合わせて調整する
私の環境では「-100px 」でうまく詰めることができましたが、すべてのサイトで同じ数値が合うとは限りません。フッターに入れているウィジェットの内容、広告のサイズ、余白設定、スマホ表示などによって、ちょうどよい数値は変わります。
最初は、小さめの数値から試すのがおすすめです。
ただし、詰めすぎると、フッター内の文字や広告、リンクが重なって見える可能性があります。そのため、CSSを追加した後は、必ず表示確認をしてください。
PCとスマホの両方で確認する
フッターまわりのCSSを調整するときは、PC表示だけで判断しない方が確実です。PCではきれいに見えていても、スマホでは詰まりすぎて見えることがあります。
確認したいポイントは、次の通りです。
- 上の表示とフッター1・2・3が重なっていないか
- 広告やバナーの上下が切れていないか
- 文字リンクが読みにくくなっていないか
- スマホで余白が詰まりすぎていないか
- フッター全体のデザインが不自然になっていないか
特に広告を入れている場合は、余白を詰めすぎると見た目が窮屈になるかもしれません。「空きすぎず、詰まりすぎない」くらいがちょうどよいです。
!important を使う理由
今回のCSSでは、最後に「 !important」を付けています。
margin-top: -100px !important;「!important 」は、CSSの優先度を上げるための指定です。
SWELLにはテーマ側の標準CSSがあるため、通常のCSS指定だけでは反映されない場合があります。そのようなときに 「!important 」を付けると、こちらで追加したCSSが優先されやすくなります。ただし、多用しすぎると、後からCSSを修正するときに分かりにくくなります。
そのため、今回のように「この部分だけ確実に反映させたい」という場面で使うのがよいです。
まとめ
SWELLのフッター1・2・3上エリアの間に空きができる場合は、CSSで余白を調整できます。
今回使ったCSSはこちらです。
フッターまわりは、サイト全体の印象に関わる部分です。余白が広すぎるとスカスカに見えますが、詰めすぎると窮屈に見えます。
そのため、数値を変えながら、自分のサイトに合う余白を探すのがおすすめです。
SWELLのフッター下部の空きが気になる場合は、追加CSSで調整してみてください。
コメント