WordPressで画像の下にキャプションを入れる方法｜写真の説明文を追加する手順

WordPressで画像の下に短い説明文を表示したいときは、画像ブロックの「キャプションを追加」へ文章を入力すればOKです。

私もブログに写真を載せたとき、「この写真のことを、ひとことだけ書き添えたいな」と思って調べました。この記事では、ブロックエディタでの付け方から、altテキストとの違い、うまく表示されないときの確認点までまとめます。

Contents

画像のキャプションとは？

キャプションとは、写真のすぐ下に表示される説明文のことです。撮影した場所や、そのときの気持ち、写真だけでは伝わりにくい補足などを読者へ見える形で添えられます。

たとえば「風がそよそよ気持ちよかった」「あっついなか並んだ列」のような短い言葉でも、写真を見た人へ伝わる空気が少し変わります。

公開前に「プレビュー」で、文章が画像の下に表示されているか確認すると安心です。

たとえば、こんなふうに表示されます▼

画像の説明を書く場所として混同しやすいのが「キャプション」と「altテキスト」です。この2つは役割が違います。

項目	主な役割	読者への表示
キャプション	写真の補足や状況、気持ちを伝える	通常は画像の下に表示される
altテキスト	画像を見られない人や読み上げ機能へ、画像の内容を伝える	通常の閲覧画面には表示されない

写真の下に見える文章を付けたいならキャプション、画像そのものの内容を簡潔に説明するならaltテキストです。同じ文章を機械的に両方へ入れるのではなく、それぞれの目的に合わせて書くのがよさそうです。

編集画面で入力しただけでは、公開ページへ反映されていないことがあります。「下書き保存」または「更新」を押してから、プレビューを確認します。

段落ブロックではなく画像ブロック自体をクリックし、画像の下の入力欄へ書けているか確認します。普通の文章を画像の直後へ置いただけの場合、キャプションとは別の段落になります。

更新したのに公開ページが変わらない場合は、ブラウザやWordPressのキャッシュが古い表示を残している可能性があります。別のブラウザやシークレットウィンドウでも確認してみてください。

キャプションの文字色が背景と近い、文字が小さすぎるなど、テーマ側の装飾で見えにくくなっている場合もあります。HTML上には存在するのに見えないときは、テーマや追加CSSの設定を確認します。

通常は画像ブロックだけで十分ですが、HTMLを直接編集したい場合は、画像を<figure>で囲み、説明文を<figcaption>に入れます。

<figure>
  <img src="画像URL" alt="画像の内容を説明する文章">
  <figcaption>画像の下に表示したい文章</figcaption>
</figure>

テーマによって表示が異なるため、HTMLを使った場合もパソコンとスマホの両方で確認しておくと安心です。

写真の雰囲気に合わせて、気持ちをそっと添えられるのがキャプションの好きなところです。自分の記録としても、あとから見返したときに、その日のことをじんわり思い出せます。

WordPressでは、画像ブロックの「キャプションを追加」へ入力するだけで、写真の下に説明文を表示できます。表示されないときは、保存状態・入力したブロック・キャッシュ・テーマの装飾を順番に確認してみてください。

キャプションとaltテキストは役割が異なります。読者に見せたい補足はキャプション、画像の内容を伝える代替説明はaltテキスト、と分けて考えると迷いにくくなります。

WordPress公式の画像ブロックの説明も、画面表示が変わったときの確認に役立ちます。
WordPress公式：Image block

LINEやSNSへブログを送ったときに表示される画像を変えたい場合は、こちらの記事にまとめています。
CocoonでLINEやSNSのサムネイル画像を変える方法