WordPress の画像をよりインタラクティブで魅力的にしたいですか？画像ホットスポットは、追加情報を表示するクリック可能な領域を追加することで、静的な画像を動的なコンテンツに変換します。
私たち自身も、地図上のポイントを表示したり、写真内のチームメンバーをタグ付けしたり、製品の機能を強調したりするために試しました。私たちの調査から、WordPress に画像ホットスポットを追加する 2 つの簡単な方法を見つけました。
ウェブサイトのビジュアルエクスペリエンスを向上させる準備はできましたか？始めましょう。
WordPressで画像にホットスポットを追加するタイミング
画像ホットスポットとは、簡単な画像を訪問者が探索できるインタラクティブなコンテンツに変えることができるクリック可能なスポットです。しかし、いつ画像にホットスポットを追加することを検討すべきでしょうか？
ホットスポットを使用するのに適した機会の1つは、製品画像のさまざまな部分を強調表示したい場合です。
例えば、新しい電話を販売しているとしましょう。カメラ、画面、その他の機能を指し示すためにホットスポットを追加できます。これにより、顧客は長い説明を読むことなく製品について学ぶことができます。
多くのホームグッズのウェブサイトでは、画像注釈を使用して、ステージングされた写真に表示されるアイテムの製品詳細を強調しています。
ホットスポットは、インフォグラフィックやデータ視覚化をより魅力的にするのにも役立ちます。すべての情報を1つの画像に詰め込む代わりに、ホットスポットの背後に詳細情報を隠すことができます。インフォグラフィックのさまざまな部分をクリックすると、さらに多くの事実や数値を表示できます。
もしeラーニングウェブサイトを運営しているなら、ホットスポットはユーザーエクスペリエンスを向上させ、レッスンをよりインタラクティブにすることができます。たとえば、地図にホットスポットを追加して、学生がクリックしてさまざまな国やランドマークについて学べるようにすることができます。
それを念頭に置いて、WordPressウェブサイトに画像ホットスポットを簡単に追加する方法を見てみましょう。2つの方法を考案しました。以下のクイックリンクを使用して、記事内を移動できます。
方法1：SeedProdで画像ホットスポットを追加する（ランディングページ/カスタムテーマ用）
この最初の方法では、SeedProdというドラッグアンドドロップページビルダーを使用して、WordPressウェブサイトに画像ホットスポットを追加します。カスタムランディングページまたはカスタムWordPressテーマを作成していて、画像ホットスポットブロックを備えたプラットフォームを使用したい場合は、この方法をお勧めします。
過去にはDiviやWPBakeryのような他のページビルダーも試しましたが、SeedProdが常に一番です。
SeedProdの素晴らしい点は、オンラインブティックやクリーニングサービスからSaaS企業まで、さまざまな業界カテゴリに対応する350以上のランディングページテンプレートとテーマキットを提供していることです。そのため、あらゆる種類のサイトに対応するオプションがあります。
考慮すべき点として、画像ホットスポットを作成するための無料ソリューションだけが必要な場合、この方法はあなたには適さないかもしれません。これは、SeedProdのホットスポットブロックが有料版のSeedProdでのみ利用可能だからです。その場合は、方法2をお勧めします。
プラグインの機能と価格の詳細については、SeedProdレビューをご覧ください。
SeedProdプランを購入したら、管理エリアにWordPressプラグインをダウンロードしてインストールできます。その後、**SeedProd » 設定**に移動し、ライセンスキーを入力します。この情報はSeedProdアカウントページで見つけることができます。
完了したら、「キーの確認」をクリックするだけです。
その後、SeedProd » ランディングページに移動します。
次に、「新しいランディングページを追加」をクリックします。
これで、SeedProdが提供するすべてのテンプレートが表示されます。バイラル待機リストランディングページ、Google広告ランディングページ、近日公開ページなどのオプションがあります。
オプションをスクロールして一つずつプレビューし、ニーズに最適なものを選択してください。
テンプレートを決定したら、選択した項目にカーソルを合わせるだけです。
次に、オレンジ色のチェックマークボタンをクリックします。
次に、新しいポップアップが表示され、ページの名称とURLスラッグの挿入を求められます。
それが完了したら、「保存してページ編集を開始」をクリックします。
これにより、SeedProd のドラッグ＆ドロップエディターが開きます。
これは、ブロックをページにドラッグアンドドロップして、好きなようにカスタマイズするためにクリックできるWordPressブロックエディターと同様に機能します。
画像ホットスポットを作成するには、左側のサイドバーで「ホットスポット」ブロックを見つけます。
次に、それをページにドラッグアンドドロップするだけです。
次に、ホットスポットを追加したいWordPressの画像をアップロードする必要があります。
「ホットスポット」ブロックをクリックし、「独自の画像を使用」または「ストック画像を使用」を選択して画像を選択することで、これを行うことができます。
最初のオプションはメディアライブラリを開き、既存の画像を選択するか、新しい画像をアップロードできます。サイズが大きい場合は、WordPressで大きな画像をアップロードする方法に関するガイドを参照してください。
画像をアップロードしたら、検索エンジンやスクリーンリーダーツールが画像を理解できるように、代替テキストを入力できます。
画像のサイズと配置をカスタマイズすることもできます。
その後、下にスクロールしてホットスポットの追加を開始できます。
これは、「+ホットスポットの追加」ボタンをクリックすることで実行できます。
画像上にオレンジ色のドットが表示されます。水平および垂直の向きバーをドラッグして位置を調整できます。
さらに、ユーザーのカーソルがホットスポットにホバーしたときに表示されるテキストを挿入することもできます。
下に進むと、ホットスポットの色を変更できます。
単に「色」設定をクリックして、ブランドとウェブサイトのデザインに合った色を選択してください。
スクロールを続けると、「詳細設定」トグルを有効にできます。
ここに、ユーザーが希望のページにリダイレクトされるように、ホットスポットのツールチップテキストへのリンクを追加できます。
それに加えて、デフォルトの円形を置き換えるカスタムアイコンを選択できます。
これを行うには、「アイコンを選択」ボタンをクリックするだけです。
ポップアップウィンドウが表示され、SeedProdのライブラリからさまざまなアイコンを選択できます。さらにオプションが必要な場合は、Font Awesomeからアイコンを選択することもできます。
アイコンを使用するには、それをクリックするだけです。
アイコンを選択したら、「アイコンサイズ」バーをドラッグして、好みに応じて形状を小さくしたり大きくしたりできます。
その後、手順を繰り返して、よりインタラクティブな画像ホットスポットを作成できます。
以下で、画像ホットスポットにアニメーション効果を追加できます。オプションは「ソフトビート」と「拡張」の2つです。
次に、「ツールチップ」セクションに移動しましょう。
ここで、ツールチップの位置（ホットスポットの右、左、上、または下）を変更し、トリガーを変更できます。
「クリック」を選択した場合、ユーザーがホットスポットをクリックするとツールチップが表示されます。一方、「ホバー」は、カーソルがそれをホバーするとツールチップが表示されることを意味します。
次に、ツールチップの持続時間を変更できます。
これは、ユーザーがホットスポットにカーソルを合わせたりクリックしたりした後にツールチップが表示されるまでの時間を示します。テキストをすぐに表示したい場合は、0に設定してください。
好みに応じて、ツールチップの矢印を無効にすることもできます。
次に、「詳細設定」タブに切り替えると、画像の表示をさらにカスタマイズできます。
たとえば、ボックスシャドウを追加したり、パディングとマージンを調整したりできます。
完了したら、右上にある「保存」ボタンをクリックしてください。
次に、「公開」をクリックしてページを公開します。
これで完了です！すべてのデバイスで見栄えが良いか確認するために、モバイル、デスクトップ、タブレットでページを表示してください。
インタラクティブな画像ホットスポットは次のようになります。
方法2：画像ホットスポットプラグインで画像ホットスポットを追加する（無料ですが制限あり）
ページビルダーを使用していて、テーマを切り替えるのが少し面倒だと感じる場合は、代わりに無料のWordPress Image Hotspot プラグインを使用できます。これは、試した中で最高の画像ホットスポットプラグインの1つであり、方法1の優れた代替手段です。
ただし、無料版では 1 つの画像に最大 6 つのホットスポットしか追加できないことに注意してください。
Image Hotspotを使用するには、管理エリアでWordPressプラグインをインストールして有効化できます。次に、Image Map Hotspot » All Image Map Hotspot に移動し、「新規追加」ボタンをクリックします。
次に、新しい画像マップホットスポットに名前を付けます。次に、ツールチップの表示タイプのいずれかを選択します。インタラクティブホットスポットのツールチップをホバー時またはクリック時に表示させることができます。
完了したら、「保存」をクリックします。
これで完了したら、画像を追加しましょう。
これを行うには、「画像アップロード」ボタンをクリックするだけです。
これにより、メディアライブラリが開かれ、新しい画像をアップロードしたり、既存の画像を選択したりできます。
次に、画像マップにホットスポットを追加できます。これを行うには、「ポイントの追加」ボタンをクリックするだけです。
インタラクティブな画像ホットスポットを設定するためのポップアップウィンドウが表示されます。
まず、「マーカー」タブに移動します。ここで、ホットスポット画像の見た目をカスタマイズできます。アイコンを変更するには、「アイコン」および/または「ホバーアイコン」フィールドの横にある「+」記号をクリックします。
「アイコン」は、クリックまたはホバーされていないときのデフォルトのホットスポットシンボルを指します。一方、「ホバーアイコン」は、ユーザーがホットスポットをクリックまたはホバーしたときに表示されるシンボルです。
さて、現在のデフォルトオプションを置き換えるアイコンを選択してください。プラグインには多くの選択肢があります。
選択したら、それをクリックして「閉じる」ボタンを押してください。
ホットスポット画像を設定したら、アイコンの色を変更できます。
このプラグインを使用すると、デフォルトのホットスポットアイコンの色とアイコンのホバー時の色を別のものにすることができます。これにより、ユーザーはクリックまたはホバーしたときにホットスポットがアクティブかどうかを簡単に判断できます。
色を変更するには、四角い色の選択ボタンをクリックして、使用したい色を選択するだけです。
その後、ページ上のどこかをクリックして、別の設定に進むことができます。
デスクトップでのホットスポットのアイコンサイズもカスタマイズできます。数字が大きいほど、アイコンは大きくなります。
アイコンの外観に満足したら、「保存」をクリックするだけです。
次に、上にスクロールして「コンテンツ」タブに切り替えます。ここで、ツールチップのテキストと外観をカスタマイズできます。
このプラグインには4つのテンプレートが用意されているので、ウェブサイトのデザインに最適なものを選ぶことができます。
それ以外は、デフォルトのタイトルコンテンツをご自身のテキストに置き換えるようにしてください。
ウェブサイトのデザインによっては、読みやすくするためにフォントサイズを大きくし、テキストの色を変更したい場合があります。
設定に満足したら、「保存」をクリックするだけです。
最後のタブは「リンク」です。ここでは、ツールチップテキストをハイパーリンクにして、ユーザーを別のページにリダイレクトできるようにするオプションがあります。
これを行いたい場合は、「リンクタイトルは必要ですか？」設定で「はい」を選択してください。
その後、適切なフィールドにタイトルリンクの URL を挿入し、リンクを新しいタブで開くかどうかを選択します。
最後に、「保存」をクリックします。
新しいホットスポットが画像に表示されるので、希望の位置にドラッグできます。
前の手順を繰り返して、さらに画像ホットスポットを作成することもできます。
画像マップの設定が完了したら、再度「保存」ボタンをクリックできます。
画像ホットスポットをページ、投稿、および/またはウィジェットに追加するには、画像の上にあるショートコードをコピーできます。
その後、ブロックエディターのウィジェット、ページ、または投稿のショートコードブロックにショートコードを貼り付けるだけです。WordPressでショートコードを追加および使用する方法に関するステップバイステップガイドで、これについて詳しく知ることができます。
インタラクティブな画像ホットスポットは以下のようになります。
知っておくべきWordPressデザインのヒント
インタラクティブな画像ホットスポットを作成する以外にも、ウェブサイトのデザインを魅力的にする方法はたくさんあります。役立つガイドをいくつかご紹介します。
- 効果的なWordPressウェブサイトのための主要なデザイン要素
- WordPressサイトに無限スクロールを追加する方法（ステップバイステップ）
- WordPressサイトに無限スクロールを追加する方法（ステップバイステップ）
- WordPressでビジュアルサイトマップを作成する方法（ステップバイステップ）
- WordPressでスティッキーなフローティングフッターバーを作成する方法
- WordPressにフォントリサイザーを追加してアクセシビリティを向上させる方法
- WordPressにクリック・トゥ・コールボタンを追加する方法（ステップバイステップ）
- WordPressにカスタムスクロールバーを追加する方法
- WordPress投稿にプログレスバーを追加する方法
- WordPressでカスタムシェイプディバイダーを作成する方法
- WordPressにスクロールニュースティッカーを追加する方法
この記事が、WordPressで画像ホットスポットを簡単に追加する方法を学ぶのに役立ったことを願っています。最大限の結果を得るためのWordPressサイドバートリックの究極のガイドや、最高のWordPressテーマビルダーの専門家による厳選も確認したい場合があります。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
質問や提案はありますか？コメントを残して、議論を開始してください。