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でインタラクティブな画像を作成する方法を紹介します。

Create Interactive Images in WordPress

インタラクティブ・イメージとは?

インタラクティブな画像には、ホットスポットエリア、ハイライト、リンク、色などを設定することができます。WordPressサイトにアップロードするシンプルで標準的な画像よりも、はるかに魅力的です。

インタラクティブ画像は、訪問者の注意を特定の機能やコンテンツに引きつけ、追加情報を表示することができます。

例えば、訪問者がチャートの特定のバーにマウスオーバーしたときにポップアップを表示することができます。

Description Demo for Interactive Images

このようなインタラクションは、訪問者がより詳細に画像を探索することを促し、より長くページに滞在してもらうことができます。また、よりインタラクティブで興味深い体験を作り出すことができ、WordPressのページビューを増やし、直帰率を下げることができます。

インタラクティブな画像は、訪問者が次に取るべきステップを示すこともできます。例えば、サイトの他の部分へのリンクを追加したり、行動喚起ボタンを表示したりすることができます。

それでは、WordPressサイトにインタラクティブな画像を作成する方法を見ていきましょう。

WordPressでインタラクティブな画像を作成する(ステップバイステップ)

クリック可能なエリアやインタラクティブなホットスポットを追加する最も簡単で初心者に優しい方法は、Draw Attentionを使用することです。このプラグインを使用すると、ユーザーが画像とインタラクションしたときに「詳細情報」ポップアップを表示したり、新しいURLを開いたりすることができます。

An example of an interactive image in WordPress

注:このガイドでは、プラグインの無料版を使用します。しかし、WP Draw Attentionのプロバージョンを入手することで、複数のインタラクティブなイメージマップを作成したり、ツールチップやライトボックス効果を使用したりすることができますので、ご自由にご利用ください。

最初に行う必要があるのは、Draw Attentionプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、WordPressダッシュボードのDraw Attention “ Edit Imageに アクセスしてください。この画面で様々なインタラクションを作成し、クリック可能なエリアとして画像に追加することができます。

The settings in the Draw Attention WordPress plugin

まず、インタラクティブ画像のタイトルを入力します。

これはWordPressサイトの画像の横に表示されます。例えば、以下の画像では「OptinMonster Features」というタイトルを使用しています。

Adding a title to an interactive image in WordPress

タイトルを入力した後、「Image」セクションまでスクロールし、使用する画像を選択します。

メディアライブラリから画像を選択するか、新規画像をアップロードすることができます。

Adding interactions to an image in WordPress

画像を選択した後、「ホットスポットエリア」セクションまでスクロールダウンすると、色やリンクを追加したり、クリッカブルエリアを作成したりすることができます。

プラグインは初期設定でクリッカブル・エリア1を作成しますので、クリックしてこのセクションを展開してください。

Adding a hotspot to an image in WordPress

まず、インタラクティブにしたいエリアをハイライトします。

Draw Attentionには、ハイライトに使用できる形状がいくつか用意されているので、使用したい形状をクリックするだけです。次の画像では、長方形を選択しています。

Adding clickable areas to an image in WordPress

画像のホットスポットとして使いたいエリアをクリック&ドラッグでハイライトします。

ドロー・アテンション」は、このクリック可能なエリアの新規設定を表示します。まず、「タイトル」フィールドに名前を入力します。

Adding a title to an interactive media file in WordPress

これは、訪問者がマウスをホットスポットにオーバーしたときにツールチップとして表示されるので、説明的なものを使用することをお勧めします。

次の画像では、カウントダウンエリアをホットスポットにして、「カウントダウンタイマー」というタイトルを追加しています。

An example of an image with a clickable area

それが完了したら、「Action」ドロップダウンを開き、訪問者がこのエリアをクリックしたときに何が起こるかを選択します。ドローアテンションは、リンクを開くか、「詳細情報」ボックスを表示することができます。

選択したオプションによって異なる設定が表示されます。例えば、「Go to URL」を選択した場合、リンクを追加し、新しいタブで開くかどうかを指定する必要があります。

How to create a custom animation for an image

詳細情報を表示」を選択した場合は、訪問者がホットスポットをクリックした際に表示される情報を入力する必要があります。

オプションで詳細画像やURLを追加することもでき、その場合は情報ボックスに含まれます。

How to add an info box to an interactive image

次の画像では、詳細情報ボックスにテキストを追加しています。

また、詳細画像としてOptinMonsterのロゴを追加しました。

An example of an info box in an interactive image

ホットスポットの外観に満足したら、’Add Another Area’ボタンをクリックします。

上記と同じ手順で、クリッカブル・エリアを設定することができます。

How to create a clickable interaction in WordPress

この手順を繰り返すだけで、クリック可能なエリアがすべて画像に追加されます。

これで、ハイライトと詳細情報ボックスの見え方をカスタマイズすることができます。例えば、「ハイライトカラー」の設定を使って、訪問者がクリック可能なエリアにマウスオーバーしたときに表示される「Draw Attention」の色を変更することができます。

Changing how an interactive image looks in WordPress

ハイライトの不透明度や枠線の幅を変更したり、枠線を追加したりすることもできます。

その後、「More Info Box Styling」までスクロールし、ボックスの見え方を微調整することができます。例えば、背景色や文字色などを変更することができます。

Creating a 'more info' box

Draw Attentionには、インタラクティブ画像に適用できるさまざまなテーマも用意されています。

これらのテーマを見るには、「配色を適用」ボックスまでスクロールしてドロップダウンメニューを開くだけです。Light(明るい)、Dark(暗い)、Draw Attention(注意を引く)の中から選ぶことができます。

Changing the color scheme for an interactive image

これらのオプションはすべてかなり簡単なので、さまざまな設定を試してみて、あなたのサイトで最もよく見えるものを確認する価値がある。

様々なオプションを試しながら、「変更をプレビュー」をクリックすることで、WordPressサイトでどのように表示されるかをプレビューすることができます。

How to preview an interactive image

インタラクティブ・イメージの見た目や動作に満足したら、必ず「更新」をクリックして変更を保存してください。

コピー・ショートコード」ブロックのショートコードを使用して、任意のページ、投稿、またはウィジェット対応エリアにインタラクティブ画像を追加できるようになりました。

Copy Shortcodes

ショートコードの設置方法については、WordPressでショートコードを追加する方法をご覧ください。

インタラクティブ画像のインポートとエクスポート方法

複数のサイトで同じインタラクティブ画像を再利用したい場合があります。

例えば、あなたがアフィリエイトのマーケティング担当者なら、ある商品を宣伝するインタラクティブな画像を作成するかもしれません。そして、Amazonアフィリエイトストアやその他のアフィリエイトマーケティングサイトのすべてで同じインタラクティブ画像を使用することができます。

同じ画像をアップロードし、すべてのやり取りを手作業で再現するのは、多くの時間と労力を要する。

その代わりに、一度インタラクティブ画像を作成し、Draw Attentionのインポート/エクスポート機能を使用することをお勧めします。これにより、無数のサイトやオンラインストアで同じ画像を再利用することができます。

そのためには、Draw Attentionプラグインを、インタラクティブ画像を掲載しているオリジナルサイトと、その画像を使用したい他のすべてのサイトにインストールする必要があります。

オリジナルサイトで、Draw Attention ” Import / Exportに進み、エクスポートしたい各画像の横にあるボックスにチェックを入れます。

Exporting an animation from a WordPress website

次に、「Generate Export Code」ボタンをクリックします。しばらくすると、Draw Attentionがコードを生成します。

別のタブで、他のWordPressブログやサイトにログインし、Draw Attention ” Import / Exportに進みます。

ここで、エクスポートコードを「インポート」ボックスにコピーし、「インポート」ボタンをクリックする。

Importing an interactive image into a WordPress website

これでDraw Attentionが画像とそのインタラクションをすべて読み込み、使用できるようになります。

インタラクティブ画像を使用したいすべてのサイトやオンラインマーケットで、この手順を繰り返すだけです。

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

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

  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. Andrea Davidson

    Hi
    Do I need to pay for the pro to add more than one image?

    Thank you
    Andrea

返信を残す

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