ウェブサイトの静かで生気のない写真を見つめていると、素晴らしいストーリーを共有したいときにフラストレーションを感じることがあります。最近、自分の画像アップロードにボイスナレーションを追加したところ、その個人的なタッチが訪問者がコンテンツとつながる方法を完全に変えました。
サウンドクリップを追加すると、ビジュアルが生き生きとし、視聴者に永続的な印象を残します。また、読書よりも聞くことを好む訪問者を引き付ける素晴らしい方法でもあります。
このガイドでは、無料のプラグインを使用してWordPressの画像にオーディオストーリーを追加する方法を説明します。このプロセスは完全に初心者向けで、コーディングスキルは一切不要です。
このセットアップは、ナレーション付きポートフォリオ、オーディオビジュアル絵本、またはWooCommerce製品写真に最適です。ビジュアルコンテンツをよりインタラクティブにするための手順を見つけるために、読み進めてください。

WordPressの画像にオーディオストーリーを追加する理由
画像に音声を追加することは、訪問者がサイトとどのようにやり取りするかに大きな影響を与える可能性があります。
まず、強力なストーリーテリングツールです。写真家、アーティスト、ブロガーであれば、ビジュアルに独自の解説、説明、または物語を追加できます。これにより、視聴者とのより深い繋がりが生まれます。
インタラクティブなコンテンツは訪問者を長時間ページに留めるため、エンゲージメントにも最適です。これは検索エンジンにとって良いシグナルとなり、ランキングの向上に役立ちます。
さらに、オーディオの説明は、視覚障害のある訪問者にとってウェブサイトをはるかに使いやすくします。
製品チュートリアル、子供向けの物語、または個人のブログを作成している場合でも、このテクニックはユニークでプロフェッショナルなタッチを加えます。
画像にオーディオストーリーを追加する方法(ステップバイステップ)
このチュートリアルでは、無料のAudio Story Imagesプラグインを使用します。これは、WordPressメディアライブラリの画像にオーディオファイルをリンクするために特別に構築された軽量プラグインです。非常にわかりやすかったので、初心者にも最適です。
まず、プラグインをインストールして有効化する必要があります。その方法の復習が必要な場合は、WordPressプラグインのインストール方法に関する詳細ガイドに従ってください。
プラグインが有効になったら、メディアのペアリングを開始する準備が整います。プロセス全体は、WordPressダッシュボードから数回のクリックで完了します。
ステップ1:画像とオーディオファイルをアップロードする
開始するには、WordPress管理パネルから メディア » メディアファイルを追加 に移動します。ここで、リンクしたい画像と音声ファイルの両方をアップロードできます。
ドラッグアンドドロップするか、「ファイルの選択」ボタンを使用できます。

ステップ2:オーディオファイルを画像に添付する
ファイルのアップロードが完了したら、 メディア » ライブラリ に移動します。次のステップに進むには、リスト表示になっている必要があります。
デフォルトのグリッド表示から切り替えるには、画面上部にあるリストアイコンをクリックするだけです。

リストビューでは、プラグインによって追加された「Audio Story」という新しい列が表示されます。
リストで画像を見つけ、その隣にある「添付」リンクをクリックします。

ポップアップウィンドウが表示され、メディアライブラリが再度表示されます。
次に、その画像に接続したいオーディオファイルを検索して選択します。

オーディオファイルを選択したら、「選択」ボタンをクリックして確定します。
プラグインが2つのファイルをリンクし、「オーディオストーリー」列に画像名の横にオーディオファイル名が表示されます。これにより、正常にペアリングされたことが確認できます。

プロのヒント: 将来オーディオファイルを削除する必要がある場合は、まずここに「切り離す」リンクをクリックしてください!オーディオを切り離さずに削除すると、画像に壊れたプレーヤーアイコンが残ることがあります。
ステップ3:オーディオ画像を投稿またはページに追加する
これで画像にオーディオストーリーが添付されたので、WordPressの投稿またはページに追加できます。新しい投稿または既存の投稿のWordPressエディターを開くだけです。
そこから、「+」アイコンをクリックして新しいブロックを追加し、「画像」ブロックを選択します。「メディアライブラリ」を開き、設定したばかりの画像を選択します。

注意: プレビュー投稿時に画像にオーディオアイコンが表示されない場合は、WordPressテーマが標準の画像ブロックを通じてプラグインをサポートしていない可能性があります。この場合、画像ブロックを削除し、代わりにクラシックブロックを使用してメディアを挿入してみてください!
ステップ4:オーディオストーリー画像をプレビューする
これで完了です。投稿を保存または公開すると、ページをプレビューできます。画像の上部左隅に小さな音量アイコンが表示されるようになります。
訪問者がこのアイコンをクリックすると、添付した音声ファイルが再生されます。サイトのビジュアルコンテンツに新しい次元を追加する、シンプルで効果的な方法です。

これで完了です!プラグインを使用してWordPressで画像にオーディオをペアリングする方法を学びました。
ボーナス:ネイティブブロックエディターの方法(プラグイン不要)
追加のプラグインをインストールしたくない場合は、組み込みのWordPressブロックエディターのみを使用して同様のストーリーテリング効果を実現できます。
「画像」ブロックを追加し、その直下に「オーディオ」ブロックを配置し、両方をハイライトして「グループ」ブロックを使用してグループ化するだけです。
再生ボタンは画像の上に直接配置されませんが、プラグインなしでクリーンで高速に読み込まれるナレーション体験を作成します。
WordPress でオーディオストーリーを画像に追加することに関するよくある質問
WordPressで画像にオーディオストーリーを追加する方法について時々質問を受けるので、ここでは最も一般的な質問のいくつかに答えます。
1. WordPressで使用できるオーディオファイル形式は何ですか?
このプラグインは標準のWordPressオーディオプレーヤーで動作するため、MP3、OGG、WAVなどの一般的な形式をサポートしています。MP3は音質とファイルサイズのバランスが良いので、MP3の使用をお勧めします。
話し言葉のナレーションは高忠実度の音楽品質を必要としないため、MP3を低ビットレート(64 kbpsまたは96 kbpsなど)でエクスポートして、音声を非常にクリアに保ちながら、さらに多くのスペースを節約できます。
2. オーディオファイルを追加するとウェブサイトが遅くなりますか?
はい、大きなオーディオファイルはウェブサイトを遅くする可能性があります。これを防ぐために、WordPressにアップロードする前にオーディオファイルを圧縮して可能な限り小さくすることが重要です。これにより、ページの読み込みが速くなり、訪問者を満足させることができます。
はい、大きなオーディオファイルはウェブサイトを遅くする可能性があります。ページの読み込み重量に関するこの簡単な公式を覚えておくと役立ちます:総ページサイズ = 画像サイズ + オーディオサイズ。
読み込み時間の遅延を防ぐために、WordPressにアップロードする前にオーディオファイルをできるだけ小さく圧縮することが重要です。これにより、ページがすばやく読み込まれ、訪問者が満足します。
3. ギャラリーの画像にオーディオストーリーを追加できますか?
いいえ、Audio Story Images プラグインは、投稿またはページに配置された個々の画像で動作するように設計されています。WordPress のデフォルトのギャラリーブロックやその他のほとんどのギャラリープラグインでは動作しません。
4. Audio Story Imagesプラグインは無料で使用できますか?
はい、Audio Story Images プラグインは完全に無料です。公式の WordPress プラグインディレクトリから無料でダウンロードしてインストールできます。
5. モバイルデバイスではオーディオストーリー画像はどのように表示されますか?
オーディオアイコンは小さな画面に完全に適応するため、モバイルデバイスでもうまく機能します。画像に直接表示され、モバイルユーザーはアイコンをタップするだけで簡単にオーディオを再生できます。
WordPressでのメディアファイル管理に関する追加リソース
この記事が、画像にオーディオストーリーを追加する方法を学ぶのに役立ったことを願っています。
WordPressサイトでのメディア活用をさらにマスターするために、以下の必須ガイドをご覧ください。
- WordPressブログ投稿用のロイヤリティフリー画像を見つける方法
- ウェブパフォーマンスのために画像を最適化する方法
- WordPress で一般的な画像の問題を修正する方法
- WordPress で画像ギャラリーを作成する方法
- WordPressにオーディオ音楽プレーヤーウィジェットを追加する方法
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。

ダニエル
再生ボタンをカスタマイズする方法はありますか?
WPBeginnerサポート
利用可能なカスタマイズオプションについては、プラグインのサポートに問い合わせる必要があります。
管理者
ペネロペ
こんにちは、おっしゃる通りにすべてインストールしましたが、画像をクリックしてもオーディオが再生されません。Elementorでページを作成したのですが、それが影響しますか?
WPBeginnerサポート
ペネロペさん、
通常のWordPressページでオーディオストーリーを作成してみてください。
管理者
ウメ・チデラ
サイトのロゴを、誰かが私の音楽をダウンロードして再生したときに常に表示されるようにするにはどうすればよいですか? Boomplay に画像が表示されるようにするには、どうすればよいですか?
インドラ
背景が白または他の明るい色の場合、音量アイコンが見えません。
また、同じ画像でも場所によって異なる音を設定できると素晴らしいです..!
トレランドン
いつもWPでのあなたの記事を楽しみにしています。
ジョージ
ユーザーエクスペリエンスを評価できるように、記事でこれがどのように行われているかの例が見られたらよかったのですが。
説明ありがとうございます。ライブの例があれば役立ったのですが。
WPBeginnerサポート
ジョージさん、こんにちは。
WordPress.org ディレクトリにあるプラグインのページにアクセスすると、詳細情報へのリンクとライブデモが見つかります。
管理者
アウォンティス
いつものように、wpbeginnerにはWordPressに関するすべての答えがあります。
マリウス・ハーガ・スカー
こんにちは。助けていただけないかと思っていました。最近、ウェブサイトをBloggerからWordPressに移行しました。しかし、私の問題はGoogleです。Bloggerのブログは削除しましたが、Google Search Consoleには古いウェブサイトまたはブログがまだ表示されています。Googleが私のサイトをインデックス化していないようですが、数日、あるいは数週間も経っています。そこで、Googleが私の新しいサイトをデータ構造(テキストマーケティング、あるいは何と呼ばれていたか)に表示させるための修正方法があるのかどうか疑問に思っていました。いずれにしても、マリウスHS(ノルウェー出身、15歳)より感謝いたします
。
WPBeginnerサポート
マリウスさん、こんにちは。
新しいウェブサイトをGoogleサーチコンソールに追加しましたか?また、BloggerブログをWordPressに正しくリダイレクトしましたか?Googleランキングを失うことなくBloggerからWordPressに切り替える方法に関するガイドをご覧ください。
管理者