初めてのブログ記事の1つで、完璧なアイキャッチ画像を選ぶのに何時間も費やしたことを覚えています。しかし、公開したとき、何か物足りないと感じました。訪問者は、その写真がジャスパー国立公園での息をのむような日の出のハイキングから撮られたものであることを知る方法がありませんでした。
キャプションがなければ、どんなに素晴らしい画像でも、そのストーリー全体を伝えることはできません。これはよくある悩みですが、幸いなことに、私のWordPressブログでこの問題を解決するために使っている簡単な方法があります。
このガイドでは、注目の画像にキャプションを追加する最も簡単な方法を紹介します。どのWordPressテーマでも動作する、無料の信頼できるプラグインを使用します。
おすすめ画像にキャプションを追加する理由
キャプションはWordPressのアイキャッチ画像をよりアクセスしやすくし、読者に即座の文脈を提供します。
アイキャッチ画像は、記事の表紙のようなものです。最初に目にするものですが、キャプションがなければ、ストーリー全体を伝えることはできません。簡単なキャプションを追加することは、コンテンツをより魅力的でプロフェッショナルにする最も簡単な方法の1つだと気づきました。
例えば、私の旅行サイトでは、「クイーンズランド州ローガン川の夕日の眺め」のようなキャプションを追加すると、すぐにコンテキストが提供され、読者を冒険に引き込みます。
ポートフォリオを運営している場合、キャプションを使用して写真家をクレジットしたり、「ビフォーアフター」の写真を日付付けしたりでき、プロフェッショナルな印象を与えます。
キャプションは、ウェブサイトをすべての人にとってアクセス可能にする上でも重要な役割を果たします。スクリーンリーダーは主に隠された代替テキストに頼って画像を説明しますが、表示されているキャプションも読み上げます。これにより、写真に関する追加のコンテキストや重要なメッセージを提供でき、すべての訪問者にとって役立ちます。これにより、スクリーンリーダーを使用している人がその情報を見逃すことがなくなります。
これはウェブアクセシビリティのベストプラクティスに従っており、自分で作成したものではない画像を使用する場合に適切なクレジットを与えるためにも不可欠です。
多くの人気のある出版物やブログは、クレジットラインなしで画像を投稿することはありません。これは私が強く推奨するベストプラクティスです。
問題は、WordPressではどの画像にもキャプションを追加できますが、ほとんどのテーマではアイキャッチ画像のキャプションが表示されないことです。
これは、テーマのコードがアイキャッチ画像の表示方法を制御しており、テーマ開発者はしばしばこの機能をデフォルトで除外しているためです。それを修正しましょう。
WordPressプラグインでアイキャッチ画像にキャプションを追加する方法
ほとんどの人にとって、アイキャッチ画像のキャプションを表示する最も簡単な方法はプラグインを使用することです。私はFSM Custom Featured Image Captionという無料プラグインをお勧めします。これは、アイキャッチ画像のキャプションを可視化するという1つのジョブを実行するために設計された軽量ツールです。
このアプローチをお勧めするのは、あらゆるWordPressテーマで機能するからです。このプラグインは人気があり信頼性が高く、WordPress.orgで数千ものアクティブなインストールがあります。何よりも、複雑な設定なしで、すぐに使用できます。
このプラグインを使用すると、注目の画像のキャプションを2つの簡単な方法で管理できます。特定の投稿の場合は投稿エディターで直接、一貫性を保つ場合はメディアライブラリで管理できます。
まず、FSM Custom Featured Image Caption プラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。
プラグインを有効にしたら、投稿またはページを開いて編集してください。右側の設定パネルで、「アイキャッチ画像」セクションを探します。アイキャッチ画像のサムネイルのすぐ下に、「アイキャッチ画像キャプション」という新しいフィールドが表示されます。
キャプションに使用したいテキストを、このボックスに直接入力するだけです。これが最も簡単で直接的な方法です。
完了したら、「更新」または「公開」ボタンをクリックして変更を保存してください。
これで完了です。入力したキャプションが、ライブウェブサイトのアイキャッチ画像と共に表示されます。
フォールバック機能の仕組み（メディアライブラリ）
プラグインは賢いです。投稿エディターの「アイキャッチ画像キャプション」ボックスを空にしたとします。その場合、WordPressメディアライブラリに保存されているキャプションがあるかどうかを自動的に確認し、代わりにそれを表示します。
同じ画像を複数の投稿でキャプションと共に使用する予定がある場合は、これは非常に役立ちます。
デフォルトのキャプションを追加するには、WordPressダッシュボードから メディア » ライブラリ に移動し、編集したい画像をクリックします。「添付ファイルの詳細」ウィンドウが表示されたら、「キャプション」フィールドに入力します。ここに追加したテキストは自動的に保存されます。
現在、「投稿エディター」の「アイキャッチ画像キャプション」ボックスが空白である限り、このメディアライブラリのキャプションがデフォルトで使用されます。これにより、投稿固有の制御とサイト全体の整合性の完璧なバランスが提供されます。👍
ボーナス：WordPressで画像にキャプションを追加する
アイキャッチ画像とは異なり、投稿やページ内の画像にキャプションを追加するのははるかに簡単です。これは、WordPressが追加の手順なしでこれらのキャプションを自動的に表示するように設定されているためです。
まず、投稿またはページに画像をアップロードします。メディアライブラリが開くと、右側のパネルに「代替テキスト」、「タイトル」、「キャプション」、「説明」のフィールドが表示されます。
次に、「キャプション」フィールドにテキストを入力するだけです。
完了したら、「選択」ボタンをクリックして画像を投稿に挿入します。キャプションは自動的にその下に表示されます。
より詳細なガイドが必要な場合は、WordPressで画像にキャプションを追加する方法に関する完全な初心者向けチュートリアルをご覧ください。
よくある質問：アイキャッチ画像キャプションについて
WordPressのアイキャッチ画像にキャプションを追加することについて、よく寄せられる質問への回答を以下に示します。
画像のキャプションと代替テキストの違いは何ですか？
キャプションは、画像に関するより多くのコンテキストを読者に提供するために、ページに公開されます。代替テキストは検索エンジンとスクリーンリーダーのためのプライベートな説明であり、画像が読み込めなかった場合にのみ表示されます。
アイキャッチ画像のキャプションはSEOに良いですか？
はい、そうです。キャプションは検索エンジンが画像をより良く理解するのに役立ち、サイトのアクセシビリティを向上させます。これらはどちらも、ウェブサイトのSEOにとってプラスのシグナルです。
キャプションテキストのスタイルを変更できますか？
もちろんです。キャプションの外観は、テーマのスタイルシートによって制御されます。カスタムCSSを使用して、フォント、色、サイズ、または配置を変更し、サイトのデザインに合わせることができます。
テーマを変更した場合、キャプションは表示されなくなりますか？
いいえ、表示されません。プラグインはキャプションをWordPressデータベースに直接保存します。これは、キャプションが安全であり、後でテーマを変更した場合でも引き継がれることを意味します。
WordPress画像に関する追加リソース
アイキャッチ画像にキャプションを追加する方法がわかったので、WordPressの画像に関連する他の役立つガイドを確認したいかもしれません：
- WordPressでアイキャッチ画像を必須にする方法 – 公開前にすべての投稿にアイキャッチ画像があることを確認する方法を学びましょう。
- WordPressのアイキャッチ画像プラグインとツール ベスト14 – アイキャッチ画像の管理と最適化に役立つプラグインの専門家による厳選リストをご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
デニス・ムトミ
素晴らしい、注釈を付けた画像へのキャプションの追加のヒントですね！
ただ一つ質問があります：キャプションは役立つコンテキストを提供しますが、Google PageSpeed Insightsで画像に代替テキストがないとフラグが立てられることがよくあるのですが、これは私のサイトでも起こっています。
アクセシビリティの観点から、キャプションを追加するよりも代替テキストの説明を追加することを優先することをお勧めしますか？
WPBeginner コメント
少なくとも代替テキストを使用することをお勧めします。
altテキストは画像自体の説明と考えてください。キャプションは、その説明にコンテキストを追加するのに役立ちます。
デニス・ムトミ
ok…that makes total sense now, thanks for the clarification!
イジー・ヴァネック
代替テキストはSEOにとって重要であるだけでなく、検索エンジン（Google、Bingなど）や、このタグの主な対象者である視覚障害のあるユーザーに対して、写真や画像に何が写っているかを伝えることにもなります。Google自体は画像の内容を認識できませんが、代替テキストを使用することで説明でき、指定されたキーワードで画像をより良くインデックスできるようになります。代替テキストを使用しないと、画像のSEOに大きく影響します。これを過小評価しないでください :)。
Mrteesurez
すべての画像に代替テキストを使用することを強くお勧めします。画像にテキストがない限り、Googleは画像で何が起こっているかを識別できません。
また、代替テキストはネットワーク接続が悪いユーザーや画像が読み込めなかった場合に表示されるため、このテキストによってそこに表示されるべき画像のタイプを理解できるようになります。
Anonimus
ありがとう
WPBeginnerサポート
You’re welcome
管理者
Zlatev
4.6で組み込み済み –
Chris
どうやって？
Frank
代替テキストなし？？？？
zaib azhar
どのファイルですか？
Moyen
こんにちは。
特定の投稿IDとget_post関数を呼び出して、アイキャッチ画像を取得しようとしましたが、アイキャッチ画像以外はすべて問題ありません。アイキャッチ画像が表示されません。
post IDで呼び出してget_post();を取得しても問題ありませんか？
私のコード？
// カスタムテンプレート（コミュニティ）
post_title; ?>
post_content; ?>
何かアイデアはありますか？
WPBeginnerサポート
コードを確認できず申し訳ありません。コードは http://pastebin.com/ に貼り付けてから、コメントでリンクを共有してください。
管理者
Sabir
これは非常に素晴らしく、非常に役立ちます。本当にありがとうございます！
Trisha
説明してくれてありがとう！画像キャプションを追加する必要があったのですが、解決策を探すのに多くの時間を費やしました…。WPサポートフォーラムで他の多くの回答を見つけましたが、アイキャッチ画像がどのように保存されるかを説明しているものはありませんでした…。理解したら、とても簡単なことでした。
Vali_REK
こんにちは、素晴らしい投稿です。
他のウェブサイトでもできますか？
WordPressブログの記事またはカテゴリをOpenCartウェブサイトに表示したいです。
ありがとうございます
WPBeginnerサポート
RSSフィードを使用して、OpenCartウェブサイトにWordPressコンテンツを取り込むことができます。
管理者
Aneas Nemorosus
どこでコーヒーを奢っていただけますか？？？？
編集スタッフ
こちらのフォームから寄付をお送りいただけます。
https://www.wpbeginner.com/wpbeginner-needs-your-help/
管理者
マイク
「ループ」が何なのか、どこにあるのか、まだわかりません。すみません。
ヤニック
すみません、よくわかりません…
具体的にどのループにコードを貼り付ければいいですか？
私だけかもしれませんが、頭がぼーっとしていました。すみません。
編集スタッフ
キャプション付きのサムネイルを表示したいループ内。これは single.php ファイル、またはその他のファイルである可能性があります。
管理者
Dejan
これ、ありがとうございます！！！
Jhon Edison Bueno Martinez
本当にありがとうございます。これを探していました。アイキャッチ画像に画像キャプションを追加する方法について、これが最もシンプルで最高の説明です。
ありがとう
編集スタッフ
この記事を使用してください：
https://www.wpbeginner.com/wp-themes/how-to-display-custom-fields-outside-the-loop-in-wordpress/
管理者
tonilehtimaki87
短く、簡潔で、要点を押さえています。唯一の批判は、短い記事の出力例が提供されていないことです。他の読者の方へ：関連記事を読むことを忘れないでください！
Gary
キャプションのスタイルはどうすればよいですか？
ソースコードでは、キャプションの行がDIVクラスの外でレンダリングされているようです。何が間違っているのでしょうか？
よろしくお願いいたします。
ゲイリー
編集スタッフ
エコーコンテンツを独自のdivで囲むことができます。
管理者
t.diaz
PHP初心者ですが、echoの内容を独自のdivで囲む方法を4時間ほどかけて調べていました。
そのエコーにdivをラップする方法の例を教えていただけますか？
編集スタッフ
このようにしてください:
echo ‘ここにdivを開く’ . get_post(get_post_thumbnail_id())->post_excerpt . ‘ここにdivを閉じる’;
karen
これは素晴らしいです。とても参考になります。本当にありがとうございます！でも、結果のスクリーンショットを見せていただけると、さらに参考になります。
Bronson
この小さな宝石は、多くの無料テーマをきれいにしたいときに役立ちます…素敵で、迅速で、簡単です。