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

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;
}
\ ドメインは早いもの勝ち /

国内最安値のドメイン会社。
新規でドメイン取るなら「お名前.com」で間違いないです。
他社からの移行も簡単なのでオススメ。

CSS
スポンサーリンク
\気になるあの子に教えてあげよう/
Tamoc

コメント

タイトルとURLをコピーしました