最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16+
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

WordPressで画像にオーディオストーリーを追加する方法(簡単な方法)

ウェブサイトの静かで生気のない写真を見つめていると、素晴らしいストーリーを共有したいときにフラストレーションを感じることがあります。最近、自分の画像アップロードにボイスナレーションを追加したところ、その個人的なタッチが訪問者がコンテンツとつながる方法を完全に変えました。

サウンドクリップを追加すると、ビジュアルが生き生きとし、視聴者に永続的な印象を残します。また、読書よりも聞くことを好む訪問者を引き付ける素晴らしい方法でもあります。

このガイドでは、無料のプラグインを使用してWordPressの画像にオーディオストーリーを追加する方法を説明します。このプロセスは完全に初心者向けで、コーディングスキルは一切不要です。

このセットアップは、ナレーション付きポートフォリオ、オーディオビジュアル絵本、またはWooCommerce製品写真に最適です。ビジュアルコンテンツをよりインタラクティブにするための手順を見つけるために、読み進めてください。

WordPressで画像にオーディオストーリーを追加する方法

WordPressの画像にオーディオストーリーを追加する理由

画像に音声を追加することは、訪問者がサイトとどのようにやり取りするかに大きな影響を与える可能性があります。

まず、強力なストーリーテリングツールです。写真家、アーティスト、ブロガーであれば、ビジュアルに独自の解説、説明、または物語を追加できます。これにより、視聴者とのより深い繋がりが生まれます。

インタラクティブなコンテンツは訪問者を長時間ページに留めるため、エンゲージメントにも最適です。これは検索エンジンにとって良いシグナルとなり、ランキングの向上に役立ちます。

さらに、オーディオの説明は、視覚障害のある訪問者にとってウェブサイトをはるかに使いやすくします。

製品チュートリアル、子供向けの物語、または個人のブログを作成している場合でも、このテクニックはユニークでプロフェッショナルなタッチを加えます。

画像にオーディオストーリーを追加する方法(ステップバイステップ)

このチュートリアルでは、無料のAudio Story Imagesプラグインを使用します。これは、WordPressメディアライブラリの画像にオーディオファイルをリンクするために特別に構築された軽量プラグインです。非常にわかりやすかったので、初心者にも最適です。

まず、プラグインをインストールして有効化する必要があります。その方法の復習が必要な場合は、WordPressプラグインのインストール方法に関する詳細ガイドに従ってください。

プラグインが有効になったら、メディアのペアリングを開始する準備が整います。プロセス全体は、WordPressダッシュボードから数回のクリックで完了します。

ステップ1:画像とオーディオファイルをアップロードする

開始するには、WordPress管理パネルから メディア » メディアファイルを追加 に移動します。ここで、リンクしたい画像と音声ファイルの両方をアップロードできます。

ドラッグアンドドロップするか、「ファイルの選択」ボタンを使用できます。

メディアライブラリ経由での画像のアップロード
ステップ2:オーディオファイルを画像に添付する

ファイルのアップロードが完了したら、 メディア » ライブラリ に移動します。次のステップに進むには、リスト表示になっている必要があります。

デフォルトのグリッド表示から切り替えるには、画面上部にあるリストアイコンをクリックするだけです。

WordPress メディアライブラリでリストビューに切り替える

リストビューでは、プラグインによって追加された「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のビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterFacebookでも私たちを見つけることができます。

開示: 当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPBeginnerがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかを確認してください。こちらが当社の編集プロセスです。

究極のWordPressツールキット

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

読者とのインタラクション

12 CommentsLeave a Reply

    • 利用可能なカスタマイズオプションについては、プラグインのサポートに問い合わせる必要があります。

      管理者

  1. こんにちは、おっしゃる通りにすべてインストールしましたが、画像をクリックしてもオーディオが再生されません。Elementorでページを作成したのですが、それが影響しますか?

  2. サイトのロゴを、誰かが私の音楽をダウンロードして再生したときに常に表示されるようにするにはどうすればよいですか? Boomplay に画像が表示されるようにするには、どうすればよいですか?

  3. 背景が白または他の明るい色の場合、音量アイコンが見えません。
    また、同じ画像でも場所によって異なる音を設定できると素晴らしいです..!

  4. ユーザーエクスペリエンスを評価できるように、記事でこれがどのように行われているかの例が見られたらよかったのですが。

    説明ありがとうございます。ライブの例があれば役立ったのですが。

  5. Hello. I was wondering if I could get some help. Recently I’ve moved my website from blogger to WordPress. But my problem is Google. I’ve deleted my blogger blogs, but Google seach console still shows my old website or blog. Like Google hasn’t indexed my site, but it has taken many days or even weeks. I was then wondering if there’s a fix to this, so Google would show my newest site in example in the data structure (text marketing or what the name was). Ether way, thanks :) from Marius HS (15 years old from Norway).

    • マリウスさん、こんにちは。

      新しいウェブサイトをGoogleサーチコンソールに追加しましたか?また、BloggerブログをWordPressに正しくリダイレクトしましたか?Googleランキングを失うことなくBloggerからWordPressに切り替える方法に関するガイドをご覧ください。

      管理者

返信する

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