- 画像の説明文（キャプション）について知りたい人
- ブログの記事を見やすくしたい人
- 画像の説明文（キャプション）を自分の好みにカスタマイズしたい人
WordPressで記事を作成するに際に、画像に説明文を追加する時があると思います。
この部分のことを『キャプション』といいます。（下記画像参照）
画像や図が何を示しているかを表す際に、役に立つ説明文です。
ただ、このキャプションですがWordpressのデフォルト設定だと以下の通りに表示されてしまいます。
画面の左端に寄っていて、画像との隙間も文字も大きいです。
なんかイケてないね…
そうなんだよ！
これをもっとスマートな表示方法に変えるよ！
今回は、このキャプションの表示方法について、自分好みにカスタマイズする方法をご紹介します。
具体的には、以下の５つの項目を変更できるようになります。
- 文字の揃え方
- 文字色
- 文字サイズ
- 画像との間隔
- 次の文章・装飾・画像との距離
では、どうぞ！！
運営者プロフィール・ Twitter（＠ririmannonline）
追加CSSでキャプションのカスタマイズ
設定方法は簡単です。
以下のコードを『追加CSS』に入力するだけです。
/*キャプション位置変更*/
.wp-block-image figcaption {
text-align: center;
color: #808080;
font-size: 12px;
margin-top: -1.9em;
padding-bottom: 10px;
}
３～７行目の以下の項目を変更することで、さらに自分の好みにカスタマイズできます。
- 文字の揃え方（３行目）
- 文字色（4行目）
- 文字サイズ（5行目）
- 画像との間隔（6行目）
- 次の文章・装飾・画像との距離（7行目）
１つずつ説明していきます。
文字の揃え方
先に紹介したコードの３行目に記載しているコードの『center』の部分を変えると、キャプションの文字の揃え方を変更することができます。
centerの部分を『right』とすると右にキャプションが寄った表記になります。
text-align: right;
その逆で『left』にすると左に寄ります。
text-align: left;
個人的には中央揃えでいいと思うな～
文字色
文字色も変更することができます。
こちらの方法も至って簡単。
下記コードの『#808080』の部分を好みの色に変更すればOKです。
color: #808080;あまり色付きは見たことがないので、黒や灰色が一般的かと思います。
文字サイズ
文字サイズも変更可能です。
基本的には本文より少し小さめが良いのではないかと思います。
筆者の場合、本文のサイズが「16px」なので、キャプションは「12px」にしています。
font-size: 12px;画像との間隔
画像との間隔を変更できます。
少し分かりにくいと思いますので、以下の画像を確認ください。
デフォルト設定のキャプション位置を「０」とした時に、画像に近づく方向を「－（マイナス）」、遠ざかる方向を「＋（プラス）」で調整できます。
先にご紹介したコードは「－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つの楽しみかも知れません。
今回のようなブログ関連の内容を『ブログのノウハウ全て公開』という記事でまとめていますので、お時間がある方は見てみてください。
今後もちょっとした役に立つ情報等を発信していきますので、よろしくお願いします！
では、また！！
りりまん