【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;
}
\ 第三のエックスサーバー /
進化の極限を目指した 「エックスサーバー」の新たなカタチ。

「シン・レンタルサーバー」は、エックスサーバーのシステムをベースとしつつ、最新技術を盛り込んだ国内最速のレンタルサーバーです。
エックサーバーとの違いは、「スピード」「リソース確保」「アダルティサイト可能」。
それでいてこの価格。
ブログをこれから始める人も、他社サーバーからの乗り換えの人も超絶おすすめなレンタルサーバーです。

しかも、今ならドメインが無料!

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

コメント

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