注
Dynamics 365 Commerce のリテール・インタレスト・グループは、Yammer から Viva Engage に移転しました。 新しい Viva Engage コミュニティにアクセスできない場合は、このフォーム (https://aka.ms/JoinD365commerceVivaEngageCommunity) に入力して追加し、最新のディスカッションに参加してください。
この記事では、有効な画像モジュールと、これを Microsoft Dynamics 365 Commerce のサイト ページに追加する方法について説明します。
有効な画像モジュールは、画像に製品タグを埋め込む場合に使用できます。 その後、 eコマース サイトのユーザーは、タグの上にマウス ポインターを移動して、画像に表示されている製品をプレビューできます。 プレビューはポップアップ ウィンドウに表示されます。 プレビュー ポップアップ ウィンドウを選択すると、ユーザーは該当対応する製品の製品の詳細ページ (PDP) に直接移動できます。
タグは、画像の X 座標と Y 座標を使用して定義されます。 タグ付けされた各ポイントは、画像に表示されている製品の製品 ID を使用して構成する必要があります。
次の図は、Adventure Works のホーム ページ上のプレビュー ポップアップ ウィンドウの例を示しています。
重要
- 有効な画像モジュールは、Dynamics 365 Commerce バージョン 10.0.20 リリース時点で使用できます。
- 有効なイメージ 画像モジュールは Adventure Works テーマで示されています。
有効な画像モジュール プロパティ
| プロパティ名 | 値 | 内容 |
|---|---|---|
| Image | イメージ ファイル | 画像を使用して 1 つ以上の製品を紹介できます。 画像は Commerce サイト ビルダーのメディア ライブラリーにアップロードするか、既存の画像を使用できます。 |
| Width | ピクセル数 | このプロパティは、画像の幅を定義します。 有効な座標は、画像の幅に基づいて計算されます。 |
| 有効な座標 | X 座標と Y 座標、および製品 ID 番号 | 有効な各画像配列は、X 座標と Y 座標、および製品 ID 番号で構成されます。 |
| ヘッダー | ヘッダー テキストとヘッダー タグ (H1、H2、H3、H4、H5、または H6) | 既定では、H2 ヘッダー タグがヘッダーに使用されますが、アクセシビリティ要件を満たすようにヘッダー タグを変更できます。 |
| 段落 | 段落のテキスト | モジュールは、リッチ テキスト形式の段落テキストをサポートします。 ハイパーリンク、太字、下線付き、および斜体など、基本的なリッチ テキスト機能がいくつかサポートされます。 これらの機能の一部は、モジュールに適用されるページ テーマによって上書きされる場合があります。 |
| リンク | リンク テキスト、リンク URL、アクセス可能リッチ インターネット アプリケーション (ARIA) ラベル、および 新しいタブでリンクを開くセレクター | モジュールは、1 つ以上の "アクションの呼び出し" リンクをサポートします。 リンクを追加すると、リンク テキスト、URL、および ARIA ラベルが必要になります。 ARIA ラベルは、アクセシビリティ要件を満たしていることを説明する必要があります。 リンクをコンフィギュレーションして、新しいタブで開くことができます。 |
| サブ テキスト | ヘッダー、テキスト、およびリンク | 画像に対する追加のコンテキストでは、作成者またはデザイナー名、個人用ブログへのリンクなどを追加できます。 |
| テキストのテーマ | 明るいまたは暗い | このプロパティを使用すると、ユーザーは背景画像に基づいてテキストを明暗に設定できます。 Adventure Works テーマのテーマ拡張として使用できます。 |
有効な画像モジュールを新しいページに追加する
アクティブなイメージ モジュールを新しいページに追加し、必要なプロパティを設定するには、次の手順に従います。
- テンプレートに移動し、サイトのホーム ページのマーケティング テンプレートを開きます (または、新しいマーケティング テンプレートを作成します)。
- 既定のページの メイン スロットで、省略記号 (...) を選択し、モジュールの追加 を選択します。
- モジュールの選択 ダイアログ ボックスで、有効な画像 モジュールを選択して、OK を選択します。
- 保存 を選択し、 編集の完了 を選択してテンプレートをチェックインし、発行 を選択して公開します。
- ページに移動し、サイトのホーム ページを開きます (または、マーケティング テンプレートを使用して新しいホーム ページを作成します)。
- 既定のページの メイン スロットで、省略記号ボタン (...) を選択してから、モジュールの追加 を選択します。
- モジュールの選択 ダイアログ ボックスで、有効な画像 モジュールを選択して、OK を選択します。
- 有効な画像モジュールのプロパティ ウィンドウで、画像を追加し、キャンバスの幅を画像のサイズに設定します。
- X 座標と Y 座標を設定し、適切な製品 ID 番号を追加します。
- 必要に応じて、有効な画像モジュールを追加および構成します。
- 保存 を選択し、 続いてプレビュー を選択してページをプレビューします。
- 編集の完了 を選択してテンプレートをチェックインし、 発行 を選択して公開します。