Directory

WordPressで画像にキャプションを追加する方法(初心者チュートリアル)
Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressで画像にキャプションを追加する方法(初心者チュートリアル)

WordPressで画像にキャプションを追加したいですか?

キャプションは、画像に追加できる簡単なテキスト説明です。キャプションは通常、画像に関する追加情報を提供するために使用されます。

WordPressには、各画像にキャプションやタイトル、代替テキストなどのメタデータを簡単に追加できるビルトイン機能が搭載されています。

この初心者向けガイドでは、WordPressで画像にキャプションを簡単に追加する方法をご紹介します。

How to Add Caption to Images in WordPress

なぜWordPressで画像にキャプションを付けるのか?

画像は百聞は一見にしかず。キャプションは画像に追加できる短い説明です。キャプションは写真を説明し、文脈を提供するのに役立ちます。

例えば、オンラインショップを運営している場合、商品画像にキャプションを追加することができます。これは、潜在的な顧客に追加情報を提供するのに役立ちます。さまざまな特徴や利点を説明することができ、訪問者のコンバージョンに役立ちます。

同様に、野生動物の写真サイトを持っている場合は、キャプションを使用して、画像の場所を追加したり、瞬間をキャプチャするために支援した他の人のクレジットを与えることができます。

さらに、キャプション付きの画像はWordPressのSEO対策にも役立ちます。キャプションに関連キーワードを含めることで、検索エンジンがあなたの写真を簡単に発見し、理解できるようになります。

ということで、WordPressで画像にキャプションを追加する方法を見てみよう:

WordPressで画像にキャプションを追加する

まず、新規投稿を作成するか、既存の投稿を編集します。次に、投稿編集画面で「+」アイコンをクリックし、Imageブロックを選択します。

Add an image block

次に、画像をアップロードするか、メディアライブラリから選択する必要があります。

クリックすると、投稿にImageブロックが追加されます。

Add your image

アップロード」ボタンをクリックして、コンピューターからWordPressに画像を選択してアップロードすることができます。また、「メディアライブラリ」ボタンをクリックして、以前にアップロードした画像を選択することもできます。

さらに詳しく知りたい方は、WordPressで画像を追加して配置する方法の投稿をご覧ください。

画像を追加するとすぐに、エディター内に画像が表示され、その下に「キャプションを追加」と書かれたテキストボックスが表示されます。

ここで画像にキャプションを追加することができます。

Add caption to the image

投稿が完了したら、「公開する」または「更新する」ボタンをクリックして投稿を保存することができます。簡単だったでしょう?

WordPressコンテンツエディターにはギャラリーブロックもあります。複数の画像をアップロードし、行と列のあるグリッドレイアウトで表示することができます。

WordPress ギャラリーブロックで画像にキャプションを追加する方法を見てみましょう。

ギャラリーを作成するには、ブロックエディターで既存の投稿またはページを作成するか開いてください。次に’+’アイコンをクリックし、ギャラリーブロックを選択します。

Add a gallery block

あなたのページ/投稿エリアにギャラリーブロックが追加されるのが見えます。

コンピューターから画像を1枚ずつアップロードするか、メディアライブラリからアップロード済みの画像を選択することができます。

Upload images to gallery block

画像を個別にアップロードする場合は、各画像をアップロードした後にキャプションを追加できます。

画像がアップロードされたら、画像をクリックするだけで、「キャプションを追加」フィールドが表示されます。画像をクリックしてフィールドにテキストを入力すると、キャプションを追加できます。

Add caption for gallery images

ライブラリから事前に追加された画像を選択した場合、右側の「キャプション」フィールドで各画像にキャプションを追加できます。

写真にすでにキャプションが付いている場合は、改めて追加する必要はありません。

Select Images to Create Gallery in WordPress

WordPressでより高度な画像ギャラリーを作成したい場合は、Envira Galleryプラグインの使用をお勧めします。

Enviraには、美しいギャラリーを作成するためのモダンなテンプレート、ドラッグ&ドロップのギャラリービルダー、画像のキャプション、ライトボックス効果、透かしなどを追加する機能があります。

詳しくは、WordPressで画像ギャラリーを作成する方法のチュートリアルをご覧ください。

WordPressメディアライブラリの画像にキャプションを追加する

WordPressでは、投稿やページに画像を埋め込むことなく、メディアライブラリに直接アップロードすることができます。

ここでは、画像をメディアライブラリに直接アップロードする際に、画像にキャプションを追加する方法をご紹介します。

まず、WordPress管理エリアのメディア ” 新規追加ページにアクセスします。

Add New Media to WordPress

ここから、画像をドラッグ&ドロップするか、コンピューターから選択してアップロードすることができます。

そうすると、「メディアアップローダー」ボックスの下にアップロードされた画像が表示されます。編集するには、「編集」リンクをクリックしてください。

Edit Image Option in WordPress Media Upload Page

メディア編集のページが新しいタブで開きます。投稿編集画面と似ていることに気づくかもしれません。それは、WordPressが添付ファイル(例えば画像)を初期設定の投稿タイプとして扱うからです。

これにより、タイトル、説明、キャプションなどの画像のメタデータをWordPressのデータベースに保存できる。

この画面では、画像のタイトルを編集したり、キャプション、代替テキスト、説明などの画像メタデータを追加したりできます。

Image Post Edit Screen in WordPress

必要な情報を追加したら、画像を更新できます。この画像のメタデータは、メディアライブラリに保存されます。

この画像は、キャプションやその他のメタデータを再度追加することなく、好きなだけ投稿に追加することができます。この画像をメディアライブラリから投稿に追加すると、すでにメタデータが保存されています。

Select Image to Add in a WordPress Post

クラシックエディターでWordPressの画像にキャプションを追加する

WordPressサイトで古いクラシックエディターを使用している場合は、WordPressで画像にキャプションを追加する方法を紹介します。

投稿エディターの上にある「メディアを追加」ボタンをクリックして画像をアップロードするか、メディアライブラリから選択するだけです。

Add media button in the old classic editor

画像がアップロードされたら、タイトル、altテキスト、キャプションなどのメタデータを入力できます。

その後、’Insert into post’ボタンをクリックするだけで、投稿やページに画像が追加されます。

Adding caption to images using the Classic Editor

投稿エディターで画像のプレビューがキャプション付きで表示されるようになります。

変更を保存し、投稿をプレビューすることで、本番サイトでどのように表示されるかを確認することができます。

Preview of an image with the caption

クラシックエディターを使ってギャラリーを作成する際、画像にキャプションを追加することもできます。

複数の画像をアップロードして選択し、左の列から「ギャラリーを作成」リンクをクリックするだけです。

Create gallery in media uploader

その後、ポップアップの右下にある’新規ギャラリーを作成’ボタンをクリックする必要があります。

ここから、各画像にキャプションを追加することができます。

Create a new gallery with selected images

各画像の下に直接キャプションを追加するか、画像をクリックして右の列にその設定を読み込んでからキャプションを追加することができます。

ギャラリーをWordPressの投稿やページに追加するには、’ギャラリーを挿入’ボタンをクリックします。

デモサイトではこのように表示されます。

Classic editor gallery images with captions

この投稿がWordPressで画像にキャプションテキストを追加するのにお役に立てば幸いです。WordPressでよくある画像の問題を解決する方法や、WordPressのエキスパートが選ぶ最高のソーシャルメディアプラグインもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

45件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Peter Samuel

    How do I caption a picture? After I insert a picture I get an appearing and disappearing instruction in light grey ‘Write caption…’ I try writing my caption but no typing takes. I click different places. That doesn’t help.

    • WPBeginner Support

      If it’s in light grey then you may not have access to modify the caption if you’re not the admin of the site. If you are an admin you may want to try disabling your plugins to see if this could be due to a plugin conflict.

      管理者

  3. Veronica Williams

    I liked the old classic editor ‘pop up’ style titles, that appeared when you hovered over them. How do I create those using the new editor?

    • WPBeginner Support

      For what it sounds like you mean, that would be set up by your theme’s styling rather than the editor.

      管理者

  4. Jesper Osgaard

    How do I center the figcaption for images? The caption is centered in the editor, but when post is published the captions are left aligned

    • WPBeginner Support

      You would want to reach out to the support for your current theme to see if there is a styling issue with the theme itself.

      管理者

  5. Marsha

    Is there a way to change the caption for laptop and mobile views?

    • WPBeginner Support

      At the moment we do not have a simple method we would recommend.

      管理者

  6. Supreet

    Hey there, I want to add a caption to gallery images, but what if I don’t want the black gradient at the bottom of my images that holds the caption? I prefer the caption to be in white and below the image. How do I do this? Thank you!

    • WPBeginner Support

      That would be determined by your theme’s CSS so you would want to either reach out to your theme’s support or you can use a gallery plugin to style it differently than what your theme has set.

      管理者

  7. Charles Perk

    How can I show the caption for pictures in the Upload / Media Library pop-up?
    We have to wade through hundreds of pictures of products that look rather similar and without the caption or title it is almost impossible to find the correct one to insert; clicking one only gives the Select option but shows no details. Hovering caption plugins only work on the frontend.

    • WPBeginner Support

      Unless I hear otherwise we do not have a recommended plugin for adding the caption in the insert area. If you are not already, you should be able to upload the image in the post/page/custom post type and set the caption there rather than uploading directly to your media library.

      管理者

  8. Fabio

    Do you know how to add classes to the figure element if the image has a caption?

    • WPBeginner Support

      You can use the advanced area to add CSS classes to the image but you would need to use the HTML editor if you wanted to add other specific classes.

      管理者

  9. Imogen

    Hi there,

    I’m wondering if you know how to add a caption to an image on the WordPress app?

    Thanks!

  10. Isaac Yoder

    I’m not having a problem coming up with captions, but I am having major issues with the font and color of the words in the captions. How do I edit this?

  11. Cecile Ramirez

    I am using Genesis theme and outreach-pro child-theme. I enter captions for images and they display in the editing mode view. When I go to my actual site, the caption is missing. I need to add captions for some, but not all, images. Please help.

  12. Angela

    How do I get my site to show the captions after they are added? I have added the captions to the pictures under media but they don’t show when I look at the site. They only show when I hover over the pictures.

  13. Robert

    Hi,

    I want to embed some text into a photo on my website. Please advise how to do this.

    Thanks,

    Robert Fisch

  14. Christyna

    By speaking slower and more clearly at might help the beginners a little bit more. You run over the words, so to speak ” rattle off”!!

    Not a good idea for them who just start wordpress!

    Thank you

  15. Rich

    Thanks for this article and all your other helpful articles.
    Can you recommend any tips to add this type of info for each picture on my site that helps SEO?

    Rich

  16. Hemabandaru

    Really helpful for my WordPress site thanks you for sharing a such a good article about image captions

  17. Nicholas Read

    You go much too fast. Your videos are almost no help at all because you rush through everything. You have to remember that the people you’re trying to reach are beginners. We don’t know what we’re doing. That’s why we’re relying on you.

  18. Steve Procter

    Hi, can you add an additions one stating how to edit multiple images at once? People like myself who have a photography blog, will want to add keywords and titles to multiple images in one go :)

      • panonski

        Is this covered ?

        I tried to find solution for this for over a week now, all over the internet

        • WPBeginner Support

          We have not found a solution we would recommend at the moment

  19. shakir suratwala

    How can we change the fonts, colour, style of the captions?
    can you please help !

  20. Kelly

    Helpful. Thank you!

  21. Linda

    Is there a character limit for captions?

  22. Mark Molinoff

    Very helpful video. Short and to the point. Thanks.

  23. Jay

    Hello I have added captions to photo files on my computer. Is it possible to upload the photos including the captions to a WordPress blog, or do I need to copy and paste the captions from the metadata of the photos into WordPress?

  24. bianka

    Hi – I have a good background picture on my homepage – bkgd position 70px 0px, bkgd size cover. But I can’t seem to get the same on my other pages as it asks for scale or pixels – I’ve tried resizing on paint but no matter what to it appears too big. – that’s my 1st problem.

    2. using 2014 theme – child – where do I find the code for the pages ? I’ve looked in 2014 parent theme style.css but can’t make out if the code in there belongs to the parent or child — I’ve checked the color codes and they seem to belong to the parent theme – so where will I find the code for my pages – I am tearing my hair out , I’ve been at this for months and no one can give me an answer! – I’m learning php, html, java, just to find them to no avail.

    3. I have my title in my homepage (which is my url – But I wish to change the last word to suit all my other pages – any chance you have a code for this and where would I add it.

    Thanks again

  25. Peter McNeice

    Thanks for this.

    Wondering whether it’s possible to have the caption appear with the photos when they’re clicked on and open in the lightbox.

    That way, when people continue scrolling through the photos, the captions continue to appear.

    Cheers.

  26. Paul Ginnivan

    Great. Clear direction. Immediately began ‘captioning’ my many photos on my blogs.

  27. Myles

    Question: Sometimes when I add a caption to a photo in some themes, it will make it appear a little wonky. A border box will appear off-center. What should I look for in the CSS to fix this?

    • WPBeginner Support

      You can use css by modifying or overriding these CSS classes in your theme:
      .wp-caption
      .wp-caption-text

      管理者

  28. Steven Denger

    These tutorals are very helpful and appreciated. I have found WordPress after a few months of researching and digging for hours a day to be almost not worth it to me. The WordPress platform seems to be and do one thing and one thing only – cram content to the left and stack it. I fight it all the time trying to get a decent customization. That only comes with a plugin and a lot of trial and error. As the saying goes: there has got to be an easier way. I am about to become an X WordPress user because it is impracticle, unreliable, difficult and time consuming to customize, and one has to do without most of time and just settle for what wordpress gives you. I give up the fight. As I am a college educated person with a higher than average IQ,I stll cannot see spending all this much time just for simple customizations. – Steve, an X WordPress user

  29. Alessandra

    hi, thanks for the tutorials, is a good way to learn day by day

  30. Trevor

    Thanks, very useful as I work on my first blog.

    Keep up the good work!

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。