- 画像の説明文(キャプション)について知りたい人
- ブログの記事を見やすくしたい人
- 画像の説明文(キャプション)を自分の好みにカスタマイズしたい人
WordPressで記事を作成するに際に、画像に説明文を追加する時があると思います。
この部分のことを『キャプション』といいます。(下記画像参照)

画像や図が何を示しているかを表す際に、役に立つ説明文です。
ただ、このキャプションですがWordpressのデフォルト設定だと以下の通りに表示されてしまいます。

画面の左端に寄っていて、画像との隙間も文字も大きいです。
なんかイケてないね…
そうなんだよ!
これをもっとスマートな表示方法に変えるよ!
今回は、このキャプションの表示方法について、自分好みにカスタマイズする方法をご紹介します。
具体的には、以下の5つの項目を変更できるようになります。
- 文字の揃え方
- 文字色
- 文字サイズ
- 画像との間隔
- 次の文章・装飾・画像との距離
では、どうぞ!!
運営者プロフィール・ Twitter(@ririmannonline)
追加CSSでキャプションのカスタマイズ
設定方法は簡単です。
以下のコードを『追加CSS』に入力するだけです。
/*キャプション位置変更*/
.wp-block-image figcaption {
text-align: center;
color: #808080;
font-size: 12px;
margin-top: -1.9em;
padding-bottom: 10px;
}
3~7行目の以下の項目を変更することで、さらに自分の好みにカスタマイズできます。
- 文字の揃え方(3行目)
- 文字色(4行目)
- 文字サイズ(5行目)
- 画像との間隔(6行目)
- 次の文章・装飾・画像との距離(7行目)
1つずつ説明していきます。
文字の揃え方
先に紹介したコードの3行目に記載しているコードの『center』の部分を変えると、キャプションの文字の揃え方を変更することができます。
centerの部分を『right』とすると右にキャプションが寄った表記になります。
text-align: right;

その逆で『left』にすると左に寄ります。
text-align: left;

個人的には中央揃えでいいと思うな~
文字色
文字色も変更することができます。
こちらの方法も至って簡単。
下記コードの『#808080』の部分を好みの色に変更すればOKです。
color: #808080;
あまり色付きは見たことがないので、黒や灰色が一般的かと思います。
文字サイズ
文字サイズも変更可能です。
基本的には本文より少し小さめが良いのではないかと思います。
筆者の場合、本文のサイズが「16px」なので、キャプションは「12px」にしています。
font-size: 12px;
画像との間隔
画像との間隔を変更できます。
少し分かりにくいと思いますので、以下の画像を確認ください。

デフォルト設定のキャプション位置を「0」とした時に、画像に近づく方向を「-(マイナス)」、遠ざかる方向を「+(プラス)」で調整できます。
先にご紹介したコードは「-1.9」で設定していますので、程よい感じにはなっていると思います。
お好みで変更してみてください。
margin-top: -1.9em;
次の文章・装飾・画像との距離
キャプションの下から次の画像(文章、装飾)までの距離を変更できます。
距離をもう少し狭めたい・拡げたいと思う方は変更してみてください。
上記の画像は「10px」での間隔を示してます。
padding-bottom: 10px;
まとめ:追加CSSを入力するだけ
画像の説明文(キャプション)の表示方法についてまとめます。
画像の説明文(キャプション)の表示を変更するには
- 追加CSSを入力
/*キャプション位置変更*/
.wp-block-image figcaption {
text-align: center;
color: #808080;
font-size: 12px;
margin-top: -1.9em;
padding-bottom: 10px;
}
カスタマイズできる5つの項目
- 文字の揃え方
- 文字色
- 文字サイズ
- 画像との間隔
- 次の文章・装飾・画像との距離
いかがだったでしょうか。
とても簡単なので、細かい設定をしなければ1分(追加CSSを入力)で完了できると思います。
デフォルト設定の時点である程度見やすくしておいて欲しい、という思いはありますが、自分でカスタマイズできるのも1つの楽しみかも知れません。
今回のようなブログ関連の内容を『ブログのノウハウ全て公開』という記事でまとめていますので、お時間がある方は見てみてください。

今後もちょっとした役に立つ情報等を発信していきますので、よろしくお願いします!
では、また!!
りりまん