【CSS】WordPressで画像キャプションの行間を詰める方法。line-heightで詰まらない場合の対処法

HTML／CSS

2022.02.022024.04.17

WordPressの記事内で、画像キャプションの行間がline-heightで詰まらない時の解説です。

WordPressでキャプション付き画像を乗せる場合、ショートカットから以下のように展開されます。

【caption】
<img src=" ... />
キャプション内容
【/caption】

　　↓　（以下のように展開される）

<img src=" ... >
<span class="wp-caption-text">キャプション</span>

注目は、9行目のspanタグです。

spanタグは、インライン要素なので、line-heightで行間を詰めることができません。
（広げることはできます。）

ですので、以下のようにキャプションのクラス名にブロック要素に変更してあげれば、
line-heightで行間を詰めることできるようになります。

.wp-caption-text {
  display: inline-block; /*block等でも可*/
  line-height:1.1;
}