画像のキャプションに表示させる文字サイズを変更する方法【CSSの追加で可能です】

2019-11-29 2022-12-03

WordPress で記事内に画像を挿入すると、画像のすぐ下にキャプションという形で好きな文字を表示させることができます。

文字を入れてみたんだけど、文字の大きさって変えられないの？

どろいもん

Gutenberg の管理画面から変えることは、現状ではできないね。でも、CSS を追加すると可能だよ！

ということで、WordPress で画像のキャプションに表示させる文字サイズを変更する方法を紹介します。

WordPress で画像のキャプションに表示させる文字サイズを変更する手順

プラグイン Advanced Editor Tools などを使って投稿画面を昔のバージョンへ戻している場合には、普通に文字サイズを変更ができます。

ただ、WordPress 5.0 以降に導入された Gutenberg では、画像のブロックを選ぶとキャプションを入力する欄が表示されるのですが、文字サイズを変更することが現状ではできません。

どろいもん

もしかすると、そのうちオプションとして変更できるようになるかもしれないけどね。

そのため、表示される文字が大き過ぎると思っている人、または小さいと思っている人は、CSS を追加することで全てのキャプションの文字のサイズを変更させることができます。

文字サイズを変更させたい場合には、「外観 > カスタマイズ > 追加 CSS」から下記を追加してみてください。

すると、キャプションに入力した文字が 12px の大きさで表示されるようになります。

もし、もっと小さくしたい場合には 12px の値を小さくして、逆に大きくしたい場合にはもっと大きな数字を設定すれば OK です。

キャプションの文字は、テーマによって位置がデフォルトで中央になっていたり左寄りになって表示されます。

もし文字の位置を変更したい場合には、下記を先ほどのコードに追加してあげます。

text-align: 位置;

位置には、「left」「center」「right」のいずれかを設定します。

もし、文字を 12px の大きさに変えて左寄りに表示させたいとするならば、下記のようになります。

Gutenberg はまだ発展途上なところもあるので、正直なところ使いにくい箇所も多々あると思います。

WordPress 5.3 のアップデートでは大幅な変更もあったりもしたので、そのうち画像のキャプションについても自由に変更できる日が来るかもしれませんけどね。

どろいもん

「副業ベース」は、「副業を成功させたい人のためのベース（根拠地）」をコンセプトに、副業・WordPress・アフィリエイトに関する情報を発信するメディアです。ブログやアフィリエイトに関する情報だけでなく、これから副業を始めようとする人のコンテンツ全般も扱っています。