WordPressの画像をよりインタラクティブで魅力的なものにしませんか？Imageホットスポットは、追加情報を表示するクリック可能なエリアを追加することで、静的な画像を動的なコンテンツに変換します。
私たちは、地図上の地点を紹介したり、写真に写っているチームメンバーをタグ付けしたり、製品の特徴を強調したりするために、自分たちで実験してみました。調査の結果、WordPressで画像ホットスポットを追加する簡単な方法を2つ見つけました。
サイトのビジュアル体験を向上させる準備はできていますか？さっそく始めましょう。
WordPressで画像にホットスポットを追加するタイミング
Imagelyのホットスポットは、クリック可能なスポットで、シンプルな画像を訪問者が探索できるインタラクティブなコンテンツに変えることができます。しかし、どのような場合に画像にホットスポットを追加する必要があるのでしょうか？
ホットスポットを使用するのに適しているのは、製品画像のさまざまな部分を見せたい場合です。
例えば、新しい携帯電話を販売するとしましょう。ホットスポットを追加して、カメラ、スクリーン、その他の機能を指摘することができます。これにより、カスタマは長い説明を読まなくても製品について知ることができます。
また、多くの家庭用品のサイトでは、演出写真に展示されている商品の詳細を強調するために画像注釈を使用している。
ホットスポットは、インフォグラフィックスやデータビジュアライゼーションをより魅力的なものにするのにも最適です。1つの画像にすべての情報を詰め込む代わりに、ホットスポットの後ろに余分な詳細を隠すことができます。インフォグラフィックの様々な部分をクリックすると、より多くの事実や数字を見ることができます。
eラーニングのウェブサイトを運営している場合、ホットスポットはユーザーエクスペリエンスを向上させ、レッスンをよりインタラクティブにすることができます。例えば、地図にホットスポットを追加し、生徒がクリックしてさまざまな国やランドマークについて学ぶことができます。
それでは、WordPressウェブサイトに画像ホットスポットを簡単に追加する方法を見ていきましょう。2つの方法を紹介しますので、以下のクイックリンクから記事を読み進めてください：
💡忙しくてWordPressサイトをデザインする暇がない…...そんな時は、当社のWordPressデザインチームにお任せください。
方法1：SeedProdで画像ホットスポットを追加する（ランディングページ/カスタムテーマの場合）
最初の方法は、ドラッグ＆ドロップでページビルダーを作成できるSeedProdを使用して、WordPressウェブサイトに画像ホットスポットを追加する方法です。カスタムランディングページやカスタムWordPressテーマを作成していて、画像ホットスポットブロックを備えたプラットフォームを使用したい場合は、この方法をお勧めします。
私たちは過去にDiviやWPBakeryのような他のページビルダーをテストしましたが、SeedProdは常にトップでした。
私たちがSeedProdを気に入っている点は、オンラインブティックやクリーニングサービスからSaaS企業まで、様々な業種カテゴリー向けに350以上のランディングページテンプレートとテーマキットを提供していることです。つまり、あらゆるタイプのサイトにオプションがあるのです。
一つ考慮すべきことは、画像ホットスポットを作成するための無料のソリューションが欲しいだけであれば、この方法は向いていないかもしれないということです。なぜなら、SeedProdのホットスポット・ブロックは有料版でしか利用できないからです。その場合は、2の方法をお勧めします。
プラグインの機能と価格の詳細については、SeedProdのレビューをご覧ください。
SeedProdプランを購入したら、WordPressプラグインをダウンロードし、管理エリアにインストールすることができます。その後、SeedProd “ 設定に 進み、ライセンスキーを入力してください。この情報はSeedProdアカウントページに記載されています。
完了したら、’Verify Key’をクリックする。
その後、SeedProd ” Landing Pagesに移動します。
次に、「新規ランディングページを追加」をクリックします。
SeedProdが提供するすべてのテンプレートが表示されます。バイラルウェイトリストランディングページ、Google広告ランディングページ、近日公開ページなどのオプションがあります。
オプションをスクロールし、1つずつプレビューして、あなたのニーズに最も適したものを選択できるようにしてください。
テンプレートが決まったら、マウスオーバーしてください。
次に、オレンジ色のチェックマークボタンをクリックします。
ページの名前とURLスラッグを入力するポップアップが表示されます。
そうしたら、『保存してページの編集を開始する』をクリックする。
SeedProdのドラッグアンドドロップエディターが開きます。
WordPressのブロックエディターと似たような機能で、ブロックをページにドラッグ＆ドロップし、クリックして好きなようにカスタマイズできる。
画像のホットスポットを作成するには、左サイドバーの「ホットスポット」ブロックを見つけてください。
あとは、あなたのページにドラッグ＆ドロップするだけ。
次に、ホットスポットを追加したいWordPressの画像をアップロードする必要があります。
ホットスポット」ブロックをクリックし、「自分の画像を使用する」または「ストック画像を使用する」のいずれかを選択して画像を選択します。
最初のオプションは、既存の画像を選ぶか、新しい画像をアップロードできるメディアライブラリを開きます。サイズがかなり大きい場合は、WordPressで大きな画像をアップロードする方法のガイドをご覧ください。
画像をアップロードしたら、検索エンジンや画面読み上げツール用に画像を説明するaltテキストを入力できます。
画像サイズや配置のカスタマイズも可能です。
その後、下にスクロールしてホットスポットの追加を開始できます。
これを行うには、「+ホットスポットを追加」ボタンをクリックします。
画像上にオレンジ色の点が表示されます。水平方向と垂直方向のバーをドラッグして位置を調整できます。
さらに、ユーザーのカーソルがホットスポットにオーバーしたときに表示されるテキストを挿入することもできます。
下に移動すると、ホットスポットの色を変更できます。
カラー」設定をクリックするだけで、あなたのブランドやウェブサイトのデザインに合った色を選ぶことができます。
下にスクロールしていくと、「詳細設定」トグルを有効にすることができる。
ここでホットスポットのツールチップテキストにリンクを追加し、ユーザーを目的のページにリダイレクトすることができます。
そのほか、デフォルトの円形の代わりにカスタムアイコンを選ぶこともできる。
アイコンの選択」ボタンをクリックします。
ポップアップウィンドウが表示され、SeedProdのライブラリから様々なアイコンを選ぶことができます。より多くのオプションが必要な場合は、Font Awesomeからアイコンを選択することもできます。
アイコンを使用するには、それをクリックするだけです。
アイコンを選んだら、「アイコンのサイズ」バーをドラッグして、好みに応じて形を小さくしたり大きくしたりできます。
この手順を繰り返すことで、よりインタラクティブなイメージホットスポットを作成することができます。
以下では、画像のホットスポットにアニメーション効果を追加することができます。オプションは2つあります：ソフトビート」と「拡大」です。
では、「ツールチップ」セクションに移動しよう。
ここでは、ツールチップの位置（ホットスポットの右、左、上、下）を変更したり、トリガーを変更したりできます。
Click」を選択すると、ユーザーがホットスポットをクリックしたときにツールチップが表示されます。一方、’マウスオーバー’はカーソルがマウスオーバーしたときにツールチップが表示されることを意味します。
次に、ツールチップの表示時間を変更できます。
これは、ユーザーがマウスオーバーまたはホットスポットをクリックした後、ツールチップが表示されるまでの時間を意味します。テキストを即座に表示させたい場合は、0に設定してください。
好みに応じて、ツールチップの矢印を無効にすることもできる。
ここで「詳細設定」タブに切り替えると、画像の外観をさらにカスタマイズできる。
例えば、ボックスシャドウを追加したり、パディングやマージンを調整することができます。
完了したら、右上の「保存」ボタンをクリックします。
その後、「公開」をクリックしてページを公開する。
以上です！モバイル、デスクトップ、タブレットでページを表示し、すべてのデバイスでうまく表示されるか確認してください。
インタラクティブ・イメージ・ホットスポットはこんな感じです：
方法2：Image Hotspotプラグインで画像ホットスポットを追加する（無料だが制限あり）
ページビルダーを使ったり、テーマを変更したりするのがちょっと大変そうなら、無料のWordPressImage Hotspotプラグインを代わりに使うことができます。このプラグインは、私たちが試した中で最も優れたイメージホットスポットプラグインの一つで、方法1に代わる素晴らしい方法です。
ただし、無料版では個別画像にホットスポットを6つまでしか追加できませんのでご注意ください。
Image Hotspotを使用するには、管理エリアにWordPressプラグインをインストールして有効化します。その後、Image Map Hotspot ” All Image Map Hotspotに 移動し、「新規追加」ボタンをクリックしてください。
次に、新しいイメージマップホットスポットに名前を付けます。次に、ツールチップ表示タイプのいずれかを選択します。マウスオーバーまたはクリックでインタラクティブホットスポットのツールチップを表示させることができます。
完了したら、「保存」をクリックする。
これが終わったら、画像を追加しましょう。
そのためには、「Upload Image」ボタンをクリックするだけです。
メディアライブラリが開きますので、新規画像をアップロードするか、既存の画像を選択してください。
次に、イメージマップにホットスポットを追加します。Add Point’ボタンをクリックするだけです。
インタラクティブ画像ホットスポットを設定するためのポップアップウィンドウが表示されます。
まず、「マーカー」タブに移動します。ここでホットスポットの画像をカスタマイズできます。アイコンを変更するには、’Icons’ や ‘Hover Icons’ フィールドの隣にある ‘+’ 記号をクリックします。
アイコン」は、クリックまたはマウスオーバーされていないときのデフォルトのホットスポットのシンボルを指します。一方、’マウスオーバー アイコン’は、ユーザーがホットスポットをクリックまたはマウスオーバーしたときに表示されるシンボルです。
では、現在のデフォルトのオプションを置き換えるアイコンを選択してください。プラグインにはたくさんの選択肢があります。
選んだら、クリックして「閉じる」ボタンを押すだけ。
ホットスポットの画像を設定したら、アイコンの色を変更できます。
このプラグインを使用すると、デフォルトのホットスポットアイコンの色を、アイコンのマウスオーバーの色とは異なる色にすることができます。こうすることで、ホットスポットをクリックしたりマウスオーバーした時に、そのホットスポットがアクティブかどうかを簡単に見分けることができます。
色を変更するには、Squareの色選択ボタンをクリックし、使用したい色を選択するだけです。
その後、ページ上のどこかをクリックして、別の設定に移ることができる。
デスクトップ上のホットスポットのアイコンサイズもカスタマイズできます。数字が大きいほどアイコンが大きくなります。
アイコンの外観に満足したら、「保存」をクリックします。
次に、上にスクロールして「コンテンツ」タブに切り替えます。ここで、ツールチップのテキストと外観をカスタマイズできます。
このプラグインには4つのテンプレートが用意されているので、自分のウェブサイトのデザインに合ったものを選ぶことができる。
それ以外の場合は、デフォルトのタイトル内容を独自のテキストに置き換えてください。
また、ウェブサイトのデザインによっては、読みやすさを向上させるためにフォントサイズを大きくしたり、文字色を変更したりすることもできる。
設定に満足したら、『保存』をクリックするだけです。
最後のタブは「リンク」です。ここでは、ユーザーが別のページにリダイレクトできるように、ツールチップテキストをハイパーリンクにするオプションがあります。
もしそうしたい場合は、「タイトルをリンクしますか」の設定で「はい」を選択してください。
その後、適切なフィールドにタイトルリンクのURLを挿入し、リンクを新しいタブで開くかどうかを選択します。
最後に「保存」をクリックする。
これで、画像上に新しいホットスポットが表示され、好きな位置にドラッグできるようになります。
また、前と同じ手順を繰り返して、より多くのイメージホットスポットを作成することもできます。
イメージマップの設定が完了したら、もう一度「保存」ボタンをクリックします。
画像ホットスポットをページ、投稿、ウィジェットに追加するには、画像の上にあるショートコードをコピーしてください。
その後、ブロックエディタでウィジェット、ページ、または投稿のショートコードブロックにショートコードを貼り付けるだけです。この方法については、WordPressでショートコードを追加して使用する方法のステップバイステップガイドで詳しく説明しています。
インタラクティブ・イメージ・ホットスポットはこんな感じです：
知っておきたいWordPressデザインのヒント
インタラクティブな画像ホットスポットを作成する以外にも、ウェブサイトのデザインを魅力的にする方法はたくさんあります。ここでは、いくつかのガイドをご紹介します：
- 効果的なWordPressウェブサイトの主なデザイン要素
- WordPressサイトに無限スクロールを追加する方法（ステップバイステップ）
- WordPressサイトに無限スクロールを追加する方法（ステップバイステップ）
- WordPressでビジュアルサイトマップを作成する方法（ステップバイステップ）
- WordPressでフローティングフッターバーを作成する方法
- アクセシビリティのためにWordPressにフォントリサイザーを追加する方法
- WordPressでクリックコール・ボタンを追加する方法（ステップバイステップ）
- WordPressでカスタムスクロールバーを追加する方法
- WordPressの投稿にプログレスバーを追加する方法
- WordPressでカスタムシェイプ・ディバイダーを作成する方法
- WordPressでスクロールするニュースティッカーを追加する方法
この記事が、WordPressで画像ホットスポットを簡単に追加する方法を学ぶのにお役に立てば幸いです。また、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.
Have a question or suggestion? Please leave a comment to start the discussion.