WordPress の画像をよりインタラクティブで魅力的にしたいですか？画像ホットスポットは、追加情報を表示するクリック可能な領域を追加することで、静的な画像を動的なコンテンツに変換します。
私たち自身も、地図上のポイントを表示したり、写真内のチームメンバーをタグ付けしたり、製品の機能を強調したりするために試しました。私たちの調査から、WordPress に画像ホットスポットを追加する 2 つの簡単な方法を見つけました。
ウェブサイトのビジュアルエクスペリエンスを向上させる準備はできましたか？始めましょう。
WordPressで画像にホットスポットを追加するタイミング
画像ホットスポットとは、簡単な画像を訪問者が探索できるインタラクティブなコンテンツに変えることができるクリック可能なスポットです。しかし、いつ画像にホットスポットを追加することを検討すべきでしょうか？
ホットスポットを使用するのに適した機会は、商品画像のさまざまな部分を紹介したい場合です。
例えば、新しい電話を販売しているとしましょう。カメラ、画面、その他の機能を指し示すためにホットスポットを追加できます。これにより、顧客は長い説明を読むことなく製品について学ぶことができます。
多くのホームグッズのウェブサイトでは、画像注釈を使用して、ステージングされた写真に表示されるアイテムの製品詳細を強調しています。
ホットスポットは、インフォグラフィックやデータビジュアライゼーションをより魅力的にするためにも役立ちます。すべての情報を 1 つの画像に詰め込む代わりに、ホットスポットの背後に詳細情報を隠すことができます。インフォグラフィックのさまざまな部分をクリックすると、より多くの事実や数字が表示されます。
eラーニングサイトを運営している場合、ホットスポットはユーザーエクスペリエンスを向上させ、レッスンをよりインタラクティブにすることができます。たとえば、地図にホットスポットを追加して、学生がクリックしてさまざまな国やランドマークについて学べるようにすることができます。
これを踏まえて、WordPressウェブサイトに画像ホットスポットを簡単に追加する方法を見てみましょう。2つの方法を考案しました。以下のクイックリンクを使用して記事をナビゲートできます。
- 方法1：SeedProdで画像ホットスポットを追加する（ランディングページ/カスタムテーマ用）
- 方法2：画像ホットスポットプラグインで画像ホットスポットを追加する（無料ですが制限あり）
- 知っておくべきWordPressデザインのヒント
方法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で大きな画像をアップロードする方法に関するガイドをご覧ください。
画像をアップロードしたら、検索エンジンやスクリーンリーダーツールが画像を説明できるように、いくつかのaltテキストを入力できます。
画像のサイズと配置をカスタマイズすることもできます。
その後、下にスクロールしてホットスポットの追加を開始できます。
これは、「+ホットスポットの追加」ボタンをクリックすることで実行できます。
画像上にオレンジ色のドットが表示されます。水平および垂直の向きバーをドラッグして位置を調整できます。
さらに、ユーザーのカーソルがホットスポットにホバーしたときに表示されるテキストを挿入することもできます。
下に進むと、ホットスポットの色を変更できます。
ブランドとウェブサイトのデザインに合ったカラーを選択するには、「カラー」設定をクリックするだけです。
スクロールを続けると、「詳細設定」トグルを有効にできます。
ここに、ユーザーが希望のページにリダイレクトされるように、ホットスポットのツールチップテキストへのリンクを追加できます。
それに加えて、デフォルトの円形を置き換えるカスタムアイコンを選択できます。
これを行うには、「アイコンを選択」ボタンをクリックするだけです。
ポップアップウィンドウが表示され、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でもフォローできます。
質問や提案はありますか？コメントを残して、議論を開始してください。