要約：WordPressで画像ホットスポットを追加する方法
SeedProdの組み込みホットスポットブロックを使用して、画像にインタラクティブなクリック可能なマーカーを追加します。簡単な方法は次のとおりです。
- SeedProd Proをインストールする：ホットスポットブロックには、Proライセンス以上が必要です。
- テンプレートを選択する：ランディングページテンプレートを選択するか、SeedProdエディターでデザインを開きます。
- ホットスポットブロックを追加する：高度なブロックパネルからレイアウトにドラッグします。
- 画像をアップロードしてホットスポットを設定する：ツールチップテキストを設定し、各マーカーの位置を決め、アイコンをスタイル設定します。
- 公開する：保存をクリックしてから公開をクリックして、ホットスポット画像を公開します。
スタイリッシュな寝室の写真で、ランプ、ベッドフレーム、スローピローなど、すべてのアイテムが商品ページにリンクされたクリック可能なタグを持っていると想像してください。それが画像ホットスポットであり、単一の画像で商品グリッド全体を置き換えることができます。
私は自分で商品ページにSeedProdのホットスポットブロックを使用しており、約10分でツールチップが公開されました。このチュートリアルでは、WordPressに画像ホットスポットを追加する方法をステップバイステップで、コードなしで紹介します。
インタラクティブな画像ホットスポットとは？
ホットスポット画像とは、クリック可能な領域を持つ静的な画像、写真、またはイラストであり、ツールチップポップアップが表示されます。ツールチップの内容は、画像の特定の側面に関する追加情報をユーザーに提供します。
いくつかの実際の使用例を次に示します。
- Eコマース商品ステージング：部屋の写真（ベッドフレーム、ランプ、枕）のすべてのアイテムに、各商品ページへのリンクをタグ付けします。1つの画像が商品グリッド全体を置き換えます。
- eラーニング図：解剖図、歴史地図、または技術図面を、画像にテキストを詰め込むことなくラベル付けします。
- 不動産バーチャルツアー：部屋の写真に寸法、特徴、または近くの観光スポットをラベル付けしたホットスポットを追加します。
- イベント写真：グループ写真の人物を、名前またはソーシャルメディアハンドルをタグ付けして特定します。
WordPressサイトに画像ホットスポットを追加することは、サイトをよりインタラクティブにするための優れた方法です。訪問者が画像マップを操作すると、ウェブサイトでの滞在時間が長くなり、直帰率の低下に役立ちます。
さらに、インタラクティブなホットスポット画像を作成することは、ユーザーエクスペリエンスを向上させることができ、ひいてはコンバージョン率の向上につながります。
画像ホットスポットが何であるかがわかったので、おそらくいくつかの質問があるでしょう。ホットスポット画像を作成するにはどうすればよいですか？また、WordPressサイトに追加する最も簡単な方法はどのようなものでしょうか？
次にその方法を説明します。
WordPressで画像ホットスポットを追加する方法
WordPressサイトに画像ホットスポットを追加するには、いくつかの方法があります。WordPress画像ホットスポットプラグイン、Diviのようなホットスポット機能を持つWordPressテーマを使用するか、HTMLとカスタムCSSで自分でコーディングすることができます。
WordPressサイトに画像ホットスポットを追加する最も簡単な方法は、SeedProdのようなドラッグアンドドロップウェブサイトビルダーを使用することです。
注意: ホットスポットブロックにはSeedProd Pro以上が必要です。無料プランをご利用の場合は、WordPress.orgに無料の画像ホットスポットプラグインがあり、画像ごとに最大6つのホットスポットを無料でサポートしています。
SeedProdのホットスポットブロックは、ドラッグアンドドロップで配置、ツールチップ、アニメーションを処理します。ショートコードやCSSは不要です。
このガイドでは、SeedProdを使用してWordPressに画像ホットスポットを追加します。開始するには、以下の手順に従ってください。
ステップ1. SeedProdのインストールと有効化
まず、SeedProdのウェブサイトにアクセスしてプラグインをダウンロードしてください。SeedProdには無料版がありますが、このチュートリアルではホットスポット画像ブロックが含まれているため、SeedPod Proを使用します。
価格プランを選択してプラグインzipファイルをダウンロードしたら、WordPressウェブサイトにインストールして有効化する必要があります。この手順にヘルプが必要な場合は、WordPressプラグインのインストールに関するこのガイドを参照してください。
SeedProdをWordPressサイトに追加したら、SeedProd » 設定ページに移動し、製品ライセンスキーを入力します。
キーは、SeedProdアカウントダッシュボードのダウンロードセクションで見つけることができます。
キーを入力したら、キーを確認ボタンをクリックしてプレミアム機能を解除します。
ステップ2. WordPressテーマまたはランディングページテンプレートを選択する
ライセンス設定を確認したら、SeedProdで構築を開始する準備ができました。そのためには、まずどのようなレイアウトを作成したいかを決定する必要があります。
SeedProdでは、個別のランディングページを作成するか、テーマビルダーを使用して完全なWordPressウェブサイトを作成できます。そこから、同じドラッグアンドドロップエディターでカスタマイズできます。
このガイドでは、スタンドアロンのランディングページを作成します。ただし、このアプローチを好む場合は、カスタムWordPressテーマの作成に関するこのガイドに従ってから、このチュートリアルのステップ3に戻って画像ホットスポットの追加方法を学習してください。
ランディングページレイアウトを作成するため、SeedProd » ランディングページに移動し、ランディングページモードセクションをスクロールして、新しいランディングページを追加ボタンをクリックします。
これにより、既製のランディングページテンプレートのライブラリに移動し、ビジネスニーズに最適なデザインを選択できます。各テンプレートは100％モバイル対応で、フィットネス、不動産、デジタルマーケティングなど、さまざまなユースケースのデザインがあります。
適切なものが見つからなくても心配しないでください。テンプレートのあらゆる部分を、希望どおりの外観になるまでカスタマイズできます。したがって、テンプレートの上にカーソルを合わせてチェックマークアイコンをクリックして、テンプレートを選択してください。
次の画面で、ページの名前とURLを指定し、ページを保存して編集を開始ボタンをクリックして、SeedProdのビジュアルエディターで起動します。
ステップ3. ホットスポットWordPressブロックを追加する
SeedProdのページビルダーは非常にナビゲートしやすいです。左側のパネルにセクションとブロックが表示され、右側にはライブページプレビューが表示されます。
プレビューのどこかをクリックすると、任意の要素の内容を変更できます。たとえば、テキストブロックをクリックすると、独自のウェルカムメッセージや説明を入力できるパネルが開きます。
オプトインフォームブロックでは、フォームフィールドをカスタマイズしたり、送信ボタンの背景色を変更したりできます。
画像ホットスポットウィジェットをページに追加する前に、ページ上の最初の画像のような最適な場所を見つけましょう。
ホットスポット画像のスペースを確保するには、まずこのブロックを削除する必要があります。オレンジ色の境界線が表示されるまでブロックの上にカーソルを合わせ、ゴミ箱アイコンをクリックして削除します。
次に、高度なブロックパネルからホットスポットブロックを見つけて、ページ上のスペースにドラッグします。
次に、ブロック設定を開き、ホットスポットアイコンを追加したい場所に画像を追加します。
コンピューターまたはWordPressメディアライブラリから写真をアップロードするか、何千ものストック画像（SeedProdプラスプラン以上で利用可能）から選択できます。
画像を追加したら、最初のホットスポットを作成できます。
ホットスポットプレースホルダーを展開して、ホットスポットの説明を入力するだけです。これは、ユーザーがホットスポットアイコンをクリックまたはホバーしたときに表示されるものです。
垂直および水平の向きスライダーをドラッグして、円形のホットスポットアイコンの位置を変更できます。さらに、アイコンの色とアニメーションを変更して、より目立たせることができます。
さらに、高度な設定を切り替えると、ラベルを選択し、リンクを入力し、カスタムアイコンとサイズをFont Awesomeライブラリから選択できます。
ホットスポットをより目を引くものにするには、ツールチップセクションを開き、トリガーとアニメーションの設定を選択します。
次に、高度なタブをクリックすると、タイポグラフィ、テキストの色、スペーシングなど、より多くの書式設定とスタイリングオプションを選択できます。
画像にホットスポットを追加するには、この手順を好きなだけ繰り返します。変更を保存するには、必ず保存ボタンをクリックしてください。
製品ページにホットスポットブロックを設定し、約10分でツールチップがライブになりました。配置スライダーは予想以上に正確でした。
次に、ページが完全に希望どおりの外観になるまでカスタマイズを続けます。
たとえば、アコーディオンブロックを使用してページにFAQセクションを追加したり、ビデオブロックを使用してYouTubeまたはVimeoビデオを表示したり、Googleマップブロックを使用して場所を表示したりできます。
ステップ4. 設定を構成する
上部にある接続タブをクリックしてメールマーケティングサービスと統合するか、ページ設定タブをクリックしてSEO、分析、カスタムドメインオプションを構成します。これらはオプションですが、公開する前に設定しておくと便利です。
ステップ5. WordPressでホットスポット画像を公開する
設定を構成したら、ランディングページを公開し、ホットスポット画像をウェブサイトでライブにする準備が整いました。
そうするには、[Save] ボタンの矢印をクリックして [Publish] を選択します。
これで、ページを表示して画像ホットスポットが機能していることを確認できます！
そして、ホットスポットのツールチップを詳しく見てみましょう。
WordPressで画像ホットスポットを追加することに関するFAQ
画像ホットスポットは何に使用できますか？
Eコマースストアでは、ライフスタイル写真内の商品をタグ付けし、各商品をその商品ページに直接リンクするために使用しています。また、ホットスポットをeラーニング図で使用して、画像を散らかさずに部品にラベルを付けたり、不動産写真で使用して部屋の特徴を強調したり、イベント写真で使用してグループショット内の人物を特定したりすることもできます。
画像ホットスポットはモバイルデバイスで機能しますか？
はい。SeedProdのホットスポットブロックはモバイルレスポンシブであり、ツールチップはタッチスクリーンのタップでトリガーできます。ブロック設定の [Advanced] タブから、デスクトップとモバイルで特定の要素を表示または非表示にすることもできます。
WordPressで画像ホットスポット用の無料プラグインはありますか？
はい、WordPress.orgには無料の画像ホットスポットプラグインがあります。ほとんどは無料ティアで画像ごとに最大6つのホットスポットをサポートし、一部にはテーマの互換性の制限があります。無制限のホットスポットが必要な場合や、完全なビジュアルエディターの配置とスタイリングの柔軟性を望む場合は、SeedProd Proを検討する価値があります。
ホットスポットのデザインをカスタマイズできますか？
はい。SeedProdでは、アイコンの色、アニメーションスタイル、位置、ツールチップの外観を変更できます。[Advanced] 設定では、Font Awesomeライブラリからカスタムアイコンを選択し、各マーカーにリンクを追加できます。
これで、ショートコード、カスタムCSS、または不要なアドオンを使用せずにWordPressにホットスポット画像を追加する方法がわかりました。さらに良いことに、SeedProdでインタラクティブな画像ホットスポットを作成するのはわずか数分で済みます。
では、何を待っていますか？
このチュートリアルを楽しんだ場合は、次のWordPressガイドも役立つかもしれません。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
