「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」をご紹介しました。
画像説明やクレジット表記で利用するキャプション。
キャプションの位置・文字サイズ・色を変更して、記事を読みやすくしていきましょう。
