WordPress のブロックエディターで箇条書き（リスト）を入れ子にすると、子のリストの上下に大きなすき間が空いて、間延びした見た目になることがあります。テーマがリストの上下に余白を付けていて、それが入れ子のリストにもかかるためです。このブログで使っている、そのすき間を詰める CSS を紹介します。
詰めるための CSS
CSS
/* 入れ子のリストの上下のすき間をなくす */
.wp-block-list li > ul,
.wp-block-list li > ol {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* 入れ子のリストの項目どうしの間も少し詰める（数字は好みで） */
.wp-block-list li li {
margin-top: 0.2em !important;
margin-bottom: 0.2em !important;
}やっていること
| 書き方 | 当たるもの |
|---|---|
.wp-block-list | ブロックエディターで作ったリスト（ほかの場所のリストには当たらない） |
li > ul、li > ol | 項目の中に入った子のリストそのもの。この上下の余白を 0 にする |
li li | 2段目より内側の項目。項目どうしの間を 0.2em にする |
!important は、テーマの設定よりこの CSS を優先させるためのものです。付けなくても効くテーマもあるので、まずは外して試し、効かないときだけ付けると、あとからほかの CSS を足すときに困りません。
追加 CSS に入れる
クラシックテーマの場合
管理画面の左のメニューから「外観」→「カスタマイズ」を開きます。
「追加 CSS」を開きます。
上の CSS を貼り付け、「公開」を押して保存します。入力しながら、右側のプレビューで見た目を確かめられます。
ブロックテーマの場合
Twenty Twenty-Four のようなブロックテーマでは、「外観」の中に「カスタマイズ」がありません。「外観」→「エディター」でサイトエディターを開き、「スタイル」のメニュー（「…」）にある「追加 CSS」に貼り付けます。
効かないとき
- キャッシュを消す：
キャッシュのプラグインや Cloudflare を使っていると、古い CSS のまま表示されることがあります。キャッシュを消してから、ブラウザでCtrl+F5を押して読み込み直します - 開発者ツールで確かめる：
記事の入れ子のリストを右クリックして「検証」を選ぶと、そのリストにどの CSS が当たっているかが右側に出ます。この CSS が線で消されていたら、テーマの設定に負けているので!importantを付けます。そもそも出てこなければ、リストにwp-block-listが付いているかを確かめます
まとめ
- 入れ子のリストのすき間は、テーマが付けた余白が子のリストにもかかるため
.wp-block-list li > ulとli > olの上下の余白を 0 にし、li liで項目どうしの間を調整する- クラシックテーマは「外観」→「カスタマイズ」→「追加 CSS」、ブロックテーマはサイトエディターの「スタイル」から入れる
- 効かないときはキャッシュを消し、開発者ツールで確かめる
記事の見た目で困ったことは、ほかに、例の URL が勝手にブログカードになった件や、Code Block Pro でエスケープした文字が元に戻った件の記事にも書いています。
コメント