WordPressキャプションの付け方・編集・非表示・デザイン変更まで初心者向けに徹底解説

はじめに

WordPressの記事に画像を挿入したとき、画像の下に短い説明文を表示できる機能が「キャプション」です。キャプションを適切に付けると、画像の意味や撮影場所、データの出典などを読者へわかりやすく伝えられます。

一方で、「キャプションの付け方がわからない」「編集したのに反映されない」「画像下の文字を非表示にしたい」「文字サイズや色を変更したい」と悩むことも少なくありません。WordPressでは、使用しているエディターやテーマによって、キャプションの設定方法やHTML構造、デザインが異なる場合があります。

この記事では、WordPressキャプションの基本から、追加・編集・削除・非表示の方法、CSSによるデザイン変更、よくあるトラブルの解決策まで初心者向けに解説します。

1. WordPressのキャプションとは？画像下に表示される説明文の基本

1-1. キャプションの役割と表示される場所

WordPressのキャプションとは、画像の内容を補足するために表示する短い説明文です。一般的には、記事本文に挿入した画像のすぐ下に表示されます。

たとえば、旅行記事の写真であれば、次のようなキャプションを付けられます。

京都・嵐山の竹林。平日の早朝は比較的混雑が少ない

商品画像であれば、型番やサイズ、使用例などを補足できます。

今回使用したWordPressテーマの設定画面

キャプションは画像そのものに書き込まれる文字ではありません。WordPressの記事データとして保存され、画像の下にHTMLテキストとして表示されます。そのため、あとから文章を変更したり、CSSで見た目を調整したりできます。

1-2. 代替テキスト・タイトル・説明との違い

WordPressのメディア設定には、キャプション以外にも「代替テキスト」「タイトル」「説明」といった入力項目があります。それぞれの役割は異なります。

代替テキスト

画像を表示できない環境や、画面読み上げソフトを利用している人に画像の内容を伝えるための文章です。通常は画像のalt属性として出力されます。

タイトル

メディアライブラリ内で画像を管理するときの名称です。テーマや設定によってはHTMLの属性などに使われることもありますが、記事上に必ず表示されるわけではありません。

キャプション

画像の下に表示され、読者が目で確認できる説明文です。画像の背景情報や補足、出典などを伝える目的で使用します。

説明

添付ファイルページなどで使われる、比較的長い説明文です。通常の記事本文に画像を挿入しただけでは、表示されないことが多い項目です。

代替テキストとキャプションは、どちらも画像を説明する文章ですが、読み手と用途が異なります。代替テキストは画像の代わりになる情報、キャプションは画像を見た読者に追加情報を伝える文章と考えるとわかりやすいでしょう。

1-3. キャプションを入れるべき画像と入れなくてもよい画像

すべての画像にキャプションを入れる必要はありません。画像の役割に応じて判断することが大切です。

キャプションを入れると効果的なのは、次のような画像です。

写真の場所や撮影時期を伝えたい画像
グラフや表の内容を補足したい画像
操作手順の重要なポイントを示すスクリーンショット
商品名、型番、サイズなどを伝えたい画像
出典や著作権情報の記載が必要な画像
本文だけでは伝わりにくい背景情報がある画像

一方、区切り線の代わりに使う装飾画像や、本文の内容を単純にイメージ化しただけの画像には、キャプションが不要な場合があります。

キャプションを付けるか迷ったときは、「この説明があることで、読者が画像を正しく理解しやすくなるか」を基準に判断しましょう。

1-4. SEO・ユーザー体験・アクセシビリティへの影響

キャプションを付けただけで、検索順位が直接大きく上がるとは限りません。しかし、画像と本文の関係を明確にし、読者の理解を助ける点ではSEOにも間接的な効果が期待できます。

画像の近くに関連する説明があると、検索エンジンもページ内で画像がどのような文脈に使われているかを把握しやすくなります。ただし、「ワードプレスキャプション」などの検索キーワードを不自然に繰り返すのは逆効果です。

また、キャプションは流し読みをしている読者の目に留まりやすい要素です。要点を簡潔に伝えれば、本文の理解を助け、ページを読み進めてもらいやすくなります。

アクセシビリティの観点では、キャプションだけで代替テキストの役割を完全に置き換えることはできません。画像の内容に応じて、適切な代替テキストも設定しましょう。

2. WordPressで画像にキャプションを付ける方法

2-1. ブロックエディターでキャプションを追加する手順

現在のWordPressで一般的に使われているブロックエディターでは、画像ブロックから簡単にキャプションを追加できます。

WordPressの投稿または固定ページの編集画面を開く
「＋」ボタンを押して「画像」ブロックを追加する
メディアライブラリから画像を選ぶか、新しい画像をアップロードする
挿入した画像をクリックする
画像の下にある「キャプションを追加」をクリックする
表示したい説明文を入力する
投稿を保存または更新する

入力中にキャプション欄が見つからない場合は、画像のすぐ下にカーソルを移動してみてください。使用しているWordPressのバージョンによって、「キャプションを追加」などの表示文言が多少異なることがあります。

キャプション欄では、太字やリンクなど一部の文字装飾を利用できる場合もあります。ただし、テーマによって表示結果が異なるため、公開前にプレビューで確認しましょう。

2-2. メディアライブラリからキャプションを設定する方法

WordPressのメディアライブラリから、画像にキャプション情報を登録することもできます。

WordPress管理画面で「メディア」を開く
「ライブラリ」を選択する
キャプションを設定したい画像をクリックする
添付ファイルの詳細画面にある「キャプション」欄へ文章を入力する
入力内容が保存されたことを確認する

この方法で登録しておくと、画像を新しく投稿へ挿入した際に、キャプションが引き継がれる場合があります。

ただし、メディアライブラリのキャプションと、すでに記事内へ挿入されている画像のキャプションは、常に自動で同期されるとは限りません。既存記事の表示を変えたい場合は、投稿編集画面の画像ブロックも確認してください。

2-3. ギャラリーブロックで複数画像にキャプションを付ける方法

複数の画像をまとめて表示するギャラリーブロックでも、画像ごとにキャプションを設定できます。

投稿編集画面で「ギャラリー」ブロックを追加する
複数の画像をアップロードするか、メディアライブラリから選ぶ
ギャラリー内のキャプションを付けたい画像をクリックする
画像下のキャプション入力欄へ文章を入力する
ほかの画像にも必要に応じてキャプションを入力する
プレビューで文字の位置や読みやすさを確認する

ギャラリーでは画像の表示領域が狭くなるため、長いキャプションを入力するとレイアウトが崩れたり、画像を覆ったりすることがあります。画像ごとに短く簡潔な説明を付けるのがおすすめです。

2-4. クラシックエディターでキャプションを追加する方法

クラシックエディターを使用している場合は、画像の挿入画面または画像編集画面からキャプションを設定します。

投稿編集画面で「メディアを追加」をクリックする
使用する画像を選択する
右側に表示される「キャプション」欄へ文章を入力する
配置やサイズを設定する
「投稿に挿入」をクリックする

すでに挿入済みの画像を編集する場合は、本文内の画像をクリックし、編集アイコンを選択します。画像詳細画面のキャプション欄から文章を変更できます。

クラシックエディターでは、キャプション付き画像がcaptionショートコードとして保存されることがあります。

2-5. 投稿後に実際の表示を確認するポイント

キャプションを追加したら、編集画面だけでなく実際の投稿ページも確認しましょう。

特に確認したいポイントは次のとおりです。

キャプションが画像の下に表示されているか
文字が小さすぎないか
文字色が背景色に埋もれていないか
画像とキャプションの幅が合っているか
スマートフォンで文字がはみ出していないか
ギャラリー内で画像や文字が重なっていないか
ダークモードなどで読みにくくなっていないか

WordPressの編集画面と公開ページでは、テーマのCSSが異なることがあります。編集画面で問題がなくても、公開ページでは位置や文字サイズが変わる場合があるため、必ずプレビューまたは実際のページで確認してください。

3. WordPressのキャプションを編集・削除する方法

3-1. 投稿編集画面からキャプションを変更する方法

ブロックエディターでは、キャプション付きの画像をクリックし、画像下の文章を直接書き換えます。

対象の記事を編集画面で開く
キャプションを変更したい画像をクリックする
画像下のキャプション欄を選択する
文章を修正する
「更新」をクリックする

画像が多く、目的の画像を選択しにくい場合は、画面上部の「リスト表示」を使うと便利です。画像ブロックやギャラリーブロックを一覧から選択できます。

3-2. メディアライブラリ側でキャプションを編集する方法

メディアライブラリに登録されたキャプションを変更する場合は、管理画面の「メディア」から対象画像を開き、キャプション欄を編集します。

ただし、メディアライブラリ側で変更しても、過去に作成した記事内のキャプションが自動更新されないことがあります。記事内の画像ブロックには、挿入時点のキャプションが個別に保存されている場合があるためです。

変更が反映されないときは、対象記事を開き、画像ブロック側のキャプションも修正しましょう。

3-3. キャプションを削除して画像だけ表示する方法

キャプションを削除するには、投稿編集画面で画像を選び、画像下の文章をすべて消します。

空白や改行だけが残っていると、テーマによってはキャプション用の余白が表示されることがあります。文章だけでなく、スペースや改行も削除してください。

クラシックエディターでは、画像編集画面からキャプションを消す方法に加え、テキスト編集画面でcaptionショートコードを取り除く方法もあります。ただし、HTMLやショートコードを直接編集すると画像まで消してしまう可能性があるため、作業前に本文をバックアップしておくと安心です。

3-4. 編集しても反映されないときの確認ポイント

キャプションを編集したのに公開ページへ反映されない場合は、次の点を確認します。

投稿の「更新」ボタンを押したか
ブラウザに古いページが残っていないか
WordPressのキャッシュプラグインを使用していないか
サーバー側のキャッシュが有効になっていないか
CDNのキャッシュが残っていないか
メディアライブラリだけを編集していないか
別の画像や別の記事を編集していないか

まず、ブラウザを再読み込みします。それでも変わらない場合は、キャッシュプラグインやサーバーのキャッシュを削除してください。

シークレットウィンドウや別のブラウザでページを開くと、キャッシュが原因かどうかを判断しやすくなります。

4. WordPressのキャプションを非表示にする方法

4-1. 画像ごとにキャプションを消す方法

特定の画像だけキャプションを表示したくない場合は、その画像のキャプション欄を空にするのが最も簡単です。

キャプション情報を残したまま非表示にする必要がなければ、CSSを使うよりも文章を削除したほうが管理しやすくなります。

一時的に隠したい場合や、管理上の理由でキャプション情報を残しておきたい場合は、CSSによる非表示を検討しましょう。

4-2. CSSでキャプションだけを非表示にする方法

サイト内のキャプションをまとめて非表示にする場合は、次のようなCSSを追加します。

.wp-block-image figcaption,.wp-block-gallery figcaption,.wp-caption-text {display: none;}

CSSの追加場所は、使用しているテーマやWordPressの構成によって異なります。代表的な追加場所は次のとおりです。

「外観」から利用できる追加CSS
サイトエディターのカスタムCSS機能
子テーマのstyle.css
CSS追加用プラグイン

ブロックエディターの画像キャプションでは、figcaptionや.wp-element-captionが使われる場合もあります。上記のCSSで消えない場合は、ブラウザの検証機能で実際のクラス名を確認してください。

次の指定を追加すると対応できる場合があります。

.wp-element-caption {display: none;}

4-3. 特定の記事・特定の画像だけ非表示にする方法

特定の記事だけキャプションを非表示にしたい場合は、WordPressがbody要素へ付与する投稿IDのクラスを利用できます。

たとえば、投稿IDが123の記事だけ非表示にするCSSは次のとおりです。

.postid-123 .wp-block-image figcaption,.postid-123 .wp-caption-text {display: none;}

固定ページの場合は、次のようにpage-id-123が使われることがあります。

.page-id-123 .wp-block-image figcaption {display: none;}

特定の画像ブロックだけを対象にする場合は、画像ブロックの設定から「高度な設定」を開き、「追加CSSクラス」に任意のクラス名を入力します。

たとえば、追加CSSクラスに次の名前を入力します。

hide-image-caption

そのうえで、次のCSSを追加します。

.hide-image-caption figcaption {display: none;}

これにより、hide-image-captionを設定した画像だけキャプションを非表示にできます。

4-4. テーマ設定やプラグインで非表示にできる場合

テーマによっては、カスタマイザーやテーマ独自の設定画面に、画像キャプションの表示・非表示を切り替える項目が用意されています。

確認する場所の例は次のとおりです。

外観のカスタマイズ画面
サイトエディターのスタイル設定
テーマ独自の投稿設定
画像・ギャラリー関連の設定
ページビルダーの画像ウィジェット設定

画像ギャラリーやスライダーのプラグインを使用している場合、WordPress標準のキャプションではなく、プラグイン独自の説明文が表示されていることもあります。その場合はCSSを追加する前に、プラグインの表示設定を確認しましょう。

4-5. 非表示にする前に注意したいSEOと読者への影響

キャプションを非表示にすると、画像の意味を補足する情報や出典情報が読者から見えなくなります。

特に次のようなキャプションは、安易に非表示にしないほうがよいでしょう。

グラフの調査対象や調査時期
写真の場所や日時
引用画像の出典
商品の型番や注意事項
画像だけでは判断できない操作説明

CSSのdisplay: none;で非表示にした文章は、読者が通常の画面で確認できません。検索対策のためだけに大量のキーワードを隠す使い方は避けてください。

見た目が気になるだけであれば、完全に非表示にするのではなく、文字サイズや色、余白を調整して読みやすくする方法がおすすめです。

5. WordPressキャプションのデザインを変更する方法

5-1. キャプションの文字サイズ・色・余白をCSSで変える方法

ブロックエディターとクラシックエディターの両方を考慮する場合は、複数のセレクターをまとめて指定します。

.wp-block-image figcaption,.wp-block-gallery figcaption,.wp-element-caption,.wp-caption-text {font-size: 14px;color: #555;line-height: 1.7;margin-top: 8px;margin-bottom: 16px;}

font-sizeは文字サイズ、colorは文字色、line-heightは行間を指定します。margin-topとmargin-bottomでは、画像や次の文章との間隔を調整できます。

テーマのCSSが優先されて変更できない場合は、より具体的なセレクターを使います。

.entry-content .wp-block-image figcaption {font-size: 14px;}

安易に!importantを付けると、あとから修正しにくくなります。まずはセレクターを具体的にする方法を試しましょう。

5-2. 中央寄せ・左寄せ・右寄せに調整する方法

キャプションを中央寄せにする場合は、次のCSSを使用します。

.wp-block-image figcaption,.wp-element-caption,.wp-caption-text {text-align: center;}

左寄せにする場合は、leftを指定します。

.wp-block-image figcaption,.wp-element-caption,.wp-caption-text {text-align: left;}

右寄せにする場合は、rightを指定します。

.wp-block-image figcaption,.wp-element-caption,.wp-caption-text {text-align: right;}

キャプションの配置は、記事全体のデザインと合わせることが重要です。短い写真説明は中央寄せ、出典や長めの補足は左寄せにすると読みやすくなる傾向があります。

5-3. 背景色や枠線を付けて目立たせる方法

キャプションを補足情報として目立たせたい場合は、背景色や枠線を設定できます。

.wp-block-image figcaption,.wp-element-caption {background: #f5f5f5;border-left: 4px solid #777;padding: 10px 12px;margin-top: 0;font-size: 14px;line-height: 1.7;text-align: left;}

画像と一体化したカード風のデザインにする場合は、画像下の余白とキャプション上の余白を調整します。

.wp-block-image img {display: block;}.wp-block-image figcaption {margin-top: 0;padding: 10px;background: #f5f5f5;}

背景色と文字色の差が小さいと読みにくくなります。デザイン性だけでなく、文字を無理なく読めるコントラストを確保しましょう。

5-4. スマホ表示で崩れないように調整する方法

スマートフォンでは画面幅が狭いため、固定幅や大きすぎる余白を設定するとキャプションがはみ出すことがあります。

基本的には、画像とキャプションを含む要素の最大幅を画面内に収めます。

.wp-block-image,.wp-caption {max-width: 100%;}
.wp-block-image img,.wp-caption img {max-width: 100%;height: auto;}.wp-block-image figcaption,.wp-element-caption,.wp-caption-text {overflow-wrap: anywhere;box-sizing: border-box;}

スマートフォンだけ文字サイズや余白を変えたい場合は、メディアクエリを使います。

@media screen and (max-width: 600px) {.wp-block-image figcaption,.wp-element-caption,.wp-caption-text {font-size: 13px;line-height: 1.6;padding: 8px;}}

長いURLをキャプションへ入力すると、画面からはみ出す原因になります。必要に応じて短いリンクテキストへ変更してください。

5-5. テーマごとにデザインが違う理由

WordPressのキャプションには基本的なHTML構造がありますが、文字サイズや色、余白、配置などはテーマのCSSによって決まります。

そのため、同じ記事データでもテーマを変更すると、次のような違いが生じることがあります。

キャプションの文字が小さくなる
中央寄せから左寄せへ変わる
文字色が薄くなる
画像との間隔が広がる
背景色や枠線が消える
ギャラリー内で文字が画像に重なる

ブロックテーマでは、テーマのtheme.jsonやサイトエディターのスタイル設定が影響することもあります。

CSSを追加するときは、テーマがもともと指定しているスタイルとの重複に注意しましょう。テーマ変更後は、追加CSSが新しいテーマでも正しく機能するか確認する必要があります。

6. WordPressキャプションのHTML・ショートコードの仕組み

6-1. キャプション付き画像のHTML構造

ブロックエディターで作成したキャプション付き画像は、一般的にfigure要素の中に画像とfigcaption要素が入る構造になります。

<figure class="wp-block-image size-large"><img src="example.jpg" alt="WordPressの画像設定画面"><figcaption class="wp-element-caption">WordPressの画像設定画面</figcaption></figure>

figureは、画像や図表などのまとまりを表すHTML要素です。figcaptionは、その画像や図表の説明文を表します。

WordPressのバージョンやテーマ、ブロックの種類によって、付与されるクラス名は異なる場合があります。

6-2. wp-caption・wp-caption-textとは

クラシックエディターや従来のテーマでは、次のようなクラスが使われることがあります。

<div class="wp-caption aligncenter"><img src="example.jpg" alt="WordPressの管理画面"><p class="wp-caption-text">WordPressの管理画面</p></div>

.wp-captionは画像とキャプション全体を囲む要素、.wp-caption-textはキャプション本文に付けられるクラスです。

古い記事と新しい記事が混在しているサイトでは、figcaptionと.wp-caption-textの両方が使われていることがあります。そのため、サイト全体のデザインを変更するときは、両方をCSSの対象にすると安心です。

.wp-block-image figcaption,.wp-element-caption,.wp-caption-text {font-size: 14px;}

6-3. クラシックエディターで使われるcaptionショートコード

クラシックエディターでは、キャプション付き画像が次のようなショートコードで保存される場合があります。

[caption id="attachment_123" align="aligncenter" width="800"]<img src="example.jpg" alt="WordPressの編集画面">WordPressの編集画面[/caption]

主な属性の意味は次のとおりです。

id：メディアライブラリ内の画像ID
align：画像の配置
width：画像とキャプション領域の幅

WordPressがページを表示するときに、ショートコードをHTMLへ変換します。

ショートコードの開始部分や終了部分を誤って削除すると、文字列がそのまま表示されたり、レイアウトが崩れたりすることがあります。慣れていない場合は、ビジュアル編集画面から変更しましょう。

6-4. CSSを当てるときに確認すべきクラス名

CSSが反映されない場合は、想定しているクラス名と実際のHTMLが異なっている可能性があります。

確認したい代表的なセレクターは次のとおりです。

.wp-block-image figcaption.wp-block-gallery figcaption.wp-element-caption.wp-caption.wp-caption-text

テーマやプラグインによっては、独自のクラス名が付けられています。ブラウザの検証機能を使い、キャプション部分を選択すると、実際のHTML要素とクラス名を確認できます。

検証画面では、どのCSSが適用され、どのCSSが上書きされているかも確認できます。CSSを何度追加しても変化しない場合は、クラス名だけでなく、スタイルの優先順位も調べましょう。

7. WordPressキャプションでよくあるトラブルと解決方法

7-1. キャプションが表示されない原因

キャプションが表示されない場合は、次の原因が考えられます。

投稿内のキャプション欄が空になっている
メディアライブラリにだけキャプションを入力している
テーマのCSSで非表示になっている
以前追加したカスタムCSSが残っている
画像プラグインやページビルダーが独自表示をしている
キャッシュに古い状態が残っている
テーマのテンプレートがキャプションを出力していない

ブラウザの検証機能でfigcaptionなどの要素が存在するか確認してください。

HTMLにキャプションが存在するのに画面で見えない場合は、CSSでdisplay: none;、visibility: hidden;、文字色と背景色が同じ、といった指定がないか調べます。

HTML自体にキャプションが存在しない場合は、投稿編集画面でキャプションを入力し直しましょう。

7-2. キャプションの位置がずれる原因

キャプションの位置がずれる主な原因は、画像の配置設定とテーマのCSSです。

特に、左寄せや右寄せにした画像では、floatによる回り込みが影響することがあります。また、キャプションに独自の幅や余白が設定されていると、画像の中心と文字の中心が合わなくなることがあります。

次のCSSで改善できる場合があります。

.wp-block-image figcaption {width: 100%;box-sizing: border-box;text-align: center;}

画像ブロック全体の配置が原因の場合は、親要素の幅やmarginも確認しましょう。

7-3. 画像幅とキャプション幅が合わない原因

クラシックエディターのキャプションでは、画像幅に数ピクセルの余白を加えた幅が設定される場合があります。また、テーマ側のpaddingやborderによって、キャプション領域が画像より広く見えることもあります。

次のようにbox-sizingと最大幅を指定すると、はみ出しを防ぎやすくなります。

.wp-caption,.wp-block-image {max-width: 100%;box-sizing: border-box;}.wp-caption-text,.wp-block-image figcaption {width: 100%;box-sizing: border-box;}

画像に固定幅が設定されている場合は、スマートフォン向けにmax-width: 100%;とheight: auto;も指定してください。

7-4. 改行や装飾が思った通りに反映されない原因

キャプション欄では、通常の段落ブロックと同じように自由なHTMLを使えない場合があります。改行しても保存時に整形されたり、テーマのCSSによって改行が目立たなくなったりすることがあります。

長い文章を複数段落に分ける必要がある場合、キャプションではなく、画像の直後に段落ブロックを置く方法も検討しましょう。

また、キャプションに見出しやボタンなど複雑な装飾を入れると、HTML構造が不自然になり、テーマ変更時に崩れやすくなります。キャプションは短い説明文として使い、詳細な補足は本文に記載するのが基本です。

7-5. テーマ変更後にキャプションデザインが崩れたときの対処法

テーマを変更すると、新しいテーマのCSSが適用されるため、キャプションの見た目も変わります。

まず、次の項目を確認してください。

以前のテーマ専用クラスをCSSで指定していないか
新しいテーマで使われるキャプションのクラス名
追加CSSが新しいテーマへ引き継がれているか
画像の配置や幅が変わっていないか
ブロックスタイルに独自設定がないか

テーマ変更前のCSSをそのままコピーすると、不要な指定や競合が発生することがあります。新しいテーマのHTML構造を確認し、必要な部分だけ書き直しましょう。

変更前には、ステージング環境やバックアップを利用して表示を確認すると安全です。

8. 読まれるキャプションを書くコツ

8-1. 画像の内容を簡潔に説明する

キャプションは、画像を見た直後に読む文章です。長すぎる説明よりも、画像の要点を一文で伝えるほうが読みやすくなります。

悪い例は次のとおりです。

これはWordPressを使って実際に画像をアップロードし、その画像にキャプションを設定するための画面を表示しているところです。

改善例は次のとおりです。

画像ブロック下部の入力欄からキャプションを追加できる

「何が写っているか」だけでなく、「画像のどこを見ればよいか」まで簡潔に示すと、読者の理解を助けられます。

8-2. 本文の理解を助ける補足情報を入れる

本文と同じ内容を繰り返すだけではなく、画像を見るうえで役立つ補足情報を加えましょう。

たとえば、操作画面の画像には、次のようなキャプションが考えられます。

使用テーマによって、キャプションの文字サイズや色は異なる

グラフであれば、調査期間や対象者数を記載します。

2025年1月から12月までのアクセス数を月別に集計

画像だけでは読み取れない条件や注意点を補うと、キャプションの価値が高まります。

8-3. キーワードを不自然に詰め込まない

SEOを意識する場合でも、キャプションに検索キーワードを何度も入れる必要はありません。

たとえば、次の文章は不自然です。

WordPressキャプションの設定画面でWordPressキャプションを追加し、WordPressキャプションを編集する方法

自然な文章に直すと次のようになります。

画像ブロック下部からキャプションを追加・編集できる

検索キーワードは、画像の説明として必要な場合にだけ自然に使用しましょう。読者にとってわかりやすい文章を優先することが大切です。

8-4. 出典・引用元がある場合の書き方

第三者が作成したグラフや資料、引用が認められている画像を掲載するときは、権利や利用条件を確認したうえで出典を記載します。

記載例は次のとおりです。

出典：〇〇株式会社「2025年Webサイト利用動向調査」

Web上の資料を参照している場合は、出典名にリンクを設定する方法もあります。

ただし、出典を書けばどの画像でも自由に使えるわけではありません。画像の著作権、利用規約、ライセンス、引用の要件などを事前に確認してください。

自分で撮影した写真の場合は、必要に応じて撮影者や撮影日を記載できます。

撮影：編集部、2025年10月

8-5. クリック率や滞在時間につながるキャプション例

キャプションそのものだけでクリック率や滞在時間が必ず上がるわけではありません。しかし、次に見るべき場所や得られる情報を明確にすると、読者の行動を促しやすくなります。

操作説明の例は次のとおりです。

右側の「スタイル」設定から、画像の角丸や枠線を変更できる

比較画像の例は次のとおりです。

左が変更前、右がキャプションの余白を8pxに調整した表示

リンクを含む例は次のとおりです。

各設定の詳細は、画像ブロックの使い方も参照

写真の例は次のとおりです。

展望台から見た夕方の景色。日没30分前から空の色が変化する

単に「設定画面」「完成写真」と書くのではなく、画像を見るメリットが伝わる文章にしましょう。

9. WordPressキャプションに関するよくある質問

9-1. キャプションはSEOに効果がありますか？

キャプションを追加しただけで、検索順位が大幅に上がるとは限りません。

ただし、画像の意味や本文との関係をわかりやすくし、読者の理解を助ける点では、SEOに間接的なプラス効果が期待できます。検索エンジンが画像の文脈を理解する手がかりにもなります。

SEO目的でキーワードを詰め込むのではなく、読者に必要な説明を自然な文章で記載しましょう。画像ファイル名、代替テキスト、画像周辺の本文、ページ全体の内容もあわせて整えることが重要です。

9-2. すべての画像にキャプションを入れるべきですか？

すべての画像に入れる必要はありません。

画像だけでは意味が伝わりにくい場合や、場所・日時・出典・条件などの補足が必要な場合に使用しましょう。装飾目的の画像や、本文を見れば意味が明らかな画像では、キャプションを省略しても問題ありません。

必要性の低いキャプションを大量に付けると、ページが読みにくくなることもあります。

9-3. キャプションと代替テキストは同じ内容でもよいですか？

偶然同じ内容になることはありますが、基本的には役割に応じて書き分けます。

代替テキストは、画像を見ることができない場合でも画像の内容や目的が伝わる文章です。キャプションは、画像を見ている読者へ補足情報を伝える文章です。

たとえば、代替テキストを次のように設定します。

WordPressの画像ブロックでキャプションを入力している画面

キャプションには、次のような補足を入れます。

キャプション欄は画像のすぐ下に表示される

同じ文章を機械的にコピーするのではなく、それぞれの目的を考えて設定しましょう。

9-4. キャプションにリンクは入れられますか？

ブロックエディターでは、キャプション内の文字を選択し、ツールバーからリンクを設定できる場合があります。

リンクを設定するときは、「こちら」だけではなく、リンク先の内容がわかる文字を使いましょう。

たとえば、次のようなリンクテキストが適切です。

出典：WordPress公式ドキュメント

テーマやブロック、プラグインによってはリンク機能が制限されることがあります。保存後にリンクが正しく動作するか、公開ページで確認してください。

9-5. プラグインなしでもデザイン変更できますか？

プラグインを使わなくても、CSSでキャプションのデザインを変更できます。

たとえば、文字サイズと中央寄せを設定するCSSは次のとおりです。

.wp-block-image figcaption,.wp-element-caption,.wp-caption-text {font-size: 14px;text-align: center;}

ただし、テーマファイルを直接編集すると、テーマ更新時に変更内容が消える可能性があります。追加CSS機能や子テーマを利用するのが一般的です。

CSSに慣れていない場合は、作業前に現在のコードを保存し、変更後にパソコンとスマートフォンの両方で表示を確認しましょう。

10. WordPressキャプションを正しく使って画像をわかりやすく見せよう

10-1. キャプションの付け方・編集・非表示の要点

WordPressのキャプションは、画像下に表示する説明文です。ブロックエディターでは、画像ブロックを選択し、画像下のキャプション欄へ文章を入力します。

編集するときは、投稿編集画面から対象画像を選び、キャプションを直接書き換えます。削除するときは、文章だけでなく余分な空白や改行も消しましょう。

サイト全体で非表示にする場合は、figcaptionや.wp-caption-textへCSSを指定します。ただし、読者の理解に必要な情報や出典まで消さないよう注意が必要です。

10-2. 初心者はまず基本操作と表示確認から始める

初めてキャプションを使う場合は、複雑なCSSを追加する前に、WordPressの標準機能で設定してみましょう。

基本的な流れは次のとおりです。

画像ブロックを追加する
画像下へ簡潔なキャプションを入力する
代替テキストも適切に設定する
プレビューを確認する
パソコンとスマートフォンで公開ページを見る

表示に問題がなければ、そのままでも十分です。キャプションのデザインはテーマに合わせて初期設定されているため、必ずカスタマイズしなければならないわけではありません。

10-3. 必要に応じてCSSで読みやすいデザインに整える

キャプションが小さすぎる、色が薄い、画像との余白が広すぎるといった問題がある場合は、CSSで調整します。

最初は、次のような基本的な指定から始めるとよいでしょう。

.wp-block-image figcaption,.wp-element-caption,.wp-caption-text {margin-top: 8px;font-size: 14px;line-height: 1.7;color: #555;text-align: center;}

変更後は、画像ブロック、ギャラリーブロック、過去の記事、スマートフォン表示を確認してください。

CSSを追加しすぎるとテーマのスタイルと競合する可能性があります。必要な範囲だけを指定し、どの目的で追加したコードなのかわかるように管理しましょう。

まとめ

WordPressのキャプションは、画像の内容や背景情報を読者へ伝えるための説明文です。ブロックエディターでは画像下の入力欄から簡単に追加でき、投稿編集画面から変更や削除もできます。

メディアライブラリで設定したキャプションは、新しく画像を挿入するときに利用できる場合があります。ただし、すでに記事へ挿入した画像とは自動で同期されないことがあるため、変更が反映されない場合は投稿内の画像ブロックも確認しましょう。

キャプションを非表示にしたい場合は、文章を削除する方法とCSSで隠す方法があります。CSSでは、ブロックエディターのfigcaptionや.wp-element-caption、クラシックエディターの.wp-caption-textなどを対象にします。

また、文字サイズ、色、余白、配置、背景色などもCSSで調整できます。ただし、テーマやWordPressのバージョンによってHTML構造が異なる場合があるため、反映されないときはブラウザの検証機能で実際のクラス名を確認してください。

キャプションは、すべての画像へ機械的に付けるものではありません。画像の理解を助ける補足情報、撮影場所、データの条件、出典など、読者にとって必要な情報を簡潔に記載することが大切です。適切なキャプションと代替テキストを使い分け、画像がわかりやすく読みやすいWordPress記事を作りましょう。