ウィジェット間の隙間を無くしたい・狭くしたい・広くしたい場合の設定方法【WordPress】

WordPressを使っていると、サイドバーやフッターに配置したウィジェット同士の隙間が気になる事があります。

・少し広すぎて間延びして見える
・逆に詰まりすぎて見づらい
・スマホだけ違和感がある

このような悩みは珍しくありません。

テーマごとに初期設定は違いますが、余白の好みは人それぞれです。今回は、ウィジェット間の隙間を安全に調整する方法を紹介します。

昔はfunctions.php編集が定番だった

以前は、ウィジェットの間隔変更といえば

・functions.php
・style.css
・テーマファイル直接編集

このような方法が主流でした。

しかし初心者には少し危険です。

・記述ミスで画面真っ白
・管理画面に入れない
・テーマ更新で元に戻る

こうしたトラブルも珍しくありません。

今は追加CSSで安全に変更できる

現在は、WordPress管理画面の

外観 → カスタマイズ → 追加CSS

ここへコードを入れる方法が簡単で安全です。

ウィジェット間の隙間を狭くしたい場合

.widget {
  margin-bottom: 10px;
}

初期状態より下の余白が狭くなります。

広くしたい場合

.widget {
  margin-bottom: 30px;
}

数値を大きくするほど隙間は広がります。

サイドバーだけ変更したい場合

#sidebar .widget {
  margin-bottom: 15px;
}

これでサイドバーのウィジェットだけ変更できます。

フッターだけ変更したい場合

#footer .widget {
  margin-bottom: 20px;
}

場所ごとに調整できるのがCSSの便利なところです。

Cocoon利用者なら特に相性が良い

Cocoonテーマは追加CSSとの相性も良く、細かな微調整がしやすいテーマです。

・サイドバー
・フッター
・記事下ウィジェット
・モバイル表示

こうした部分も整えやすいです。

おすすめは少しずつ調整する事

いきなり大きく変えず、

10px → 15px → 20px

このように少しずつ確認しながら変えると失敗しません。

PC表示だけでなく、スマホ表示も必ず確認しましょう。

まとめ

WordPressのウィジェット間の隙間は、今なら危険なテーマ編集をしなくても調整できます。

・狭くする
・広くする
・場所ごとに変える

すべて追加CSSで対応可能です。

見た目の違和感は、少し整えるだけでサイト全体の印象がかなり変わります。