【THE THOR カスタマイズ】キャプション(画像説明文)を見やすくするCSS

悩めるクマ
THE THORのキャプション(画像説明文)を見やすくしたい

こんな悩みを解決いたします。

当記事を読んでいただくと、キャプションを次のように変更できます。

  • キャプション位置を中央寄せ
  • 文字サイズの調整
  • テキスト色を変更
しろくま
画像を交えながら「キャプションが見やすくなるCSS」をご紹介します。
スポンサーリンク

キャプション変更前・変更後のイメージを確認する

キャプション変更前

キャプション変更前

変更前のキャプションは、

  • 位置:左寄せ
  • 文字サイズ:本文と同じサイズ
  • テキスト色:本文と同じ黒

となっていて、本文とキャプションの区別がつかず、読者に混乱を与えてしまいます。

そこで、キャプションを次のように変更します。

キャプション変更後

キャプション変更後

変更後のキャプションは、

  • 位置:中央寄せ
  • 文字サイズ:サイズ小
  • テキスト色:グレー

として、本文とキャプションを区別できるように変更します。

キャプションの見た目は、CSSの追加で対応します。

しろくま
次は、キャプションが見やすくなるCSSと、CSSの記述場所をご紹介します。

【コピペで簡単】キャプションのカスタマイズ方法

キャプションを見やすくする為に、CSSを追加します。

CSSの記述場所は次の通りです。

(1)[外観] → (2)[カスタマイズ] → (3)[追加CSS]

THE THORの追加CSS欄に、下記コードをコピペすれば、カスタマイズ完了です。

.wp-block-image figcaption {
    text-align: center;
    font-size: small;
    color: #a9a9a9;
}
しろくま
最後に、CSSが適用されているかキャプションを確認しておきましょう。

まとめ

今回はTHE THORで「キャプションが見やすくなるCSS」をご紹介しました。

画像説明やクレジット表記で利用するキャプション。

キャプションの位置・文字サイズ・色を変更して、記事を読みやすくしていきましょう。

スポンサーリンク