【WordPress】ネストしたリスト（箇条書き）の不自然な行間をCSSで詰める方法

Wordpress
2026.06.23

以下は、ブロックエディタ（Gutenberg）でリストをネスト（入れ子）にした際に、行間や子リストの上下に不自然な空白が空いてしまう問題を解決

１．WordPress管理画面にログインします。
２．左メニューから 「外観」 ＞ 「カスタマイズ」 をクリックします。

３．メニュー内にある 「追加CSS」 を開きます。

４．上記のコードを貼り付け、上部の 「公開」 ボタンを押して保存します

以下のCSSコードをコピーして、WordPressの指定の場所に貼り付けます。

CSS
/* ===================================================
 * WordPress：ネストしたリストの間の不要な余白を消す
 * =================================================== */
.wp-block-list li > ul,
.wp-block-list li > ol {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/* 子リスト内の各項目の間隔も少し詰めたい場合（数値は好みで調整） */
.wp-block-list li li {
    margin-top: 0.2em !important;
    margin-bottom: 0.2em !important;
}

💡 このコードのポイント（解説）

  • li > ul（または li > ol）と指定することで、親リストの項目の中に子リストが入り込んだときに発生する「重複マージン」を確実に狙い撃ちしてゼロにします。
  • !important を付与しているため、テーマが持っている強力なデフォルトの余白設定（ブロックギャップ等）に負けることなく、強制的にデザインをスッキリと詰められます。
  • 後半の li li の数値を書き換えることで、箇条書きの2階層目（孫階層以降も含める）の項目同士の行間を自分好みの細かさに微調整できます。

コメント