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