メールティーザーコンポーネント email-teaser-component
メールティーザーコンポーネントでは、画像、タイトル、リッチテキストのほか、オプションで追加コンテンツへのリンクを表示することができます。
使用方法 usage
メールティーザーコンポーネントを使用すれば、コンテンツ作成者は、画像、タイトル、リッチテキスト、追加コンテンツや他のアクションへのリンクを使用して、ティーザーを容易に作成することができます。
- デザインダイアログでは、コールトゥアクションを作成したりリンクを追加したりするオプションが使用可能かどうかや、様々な表示オプションの無効化をテンプレート作成者が定義できます。
- 設定ダイアログでは、画像の設定、CTA(コールトゥアクション)の定義、タイトルと説明の設定、個々のティーザーへのリンクの設定をコンテンツ作成者が行えます。
- メール画像コンポーネントの編集ダイアログにアクセスして、ティーザー画像を変更することができます。
バージョンと互換性 version-and-compatibility
このドキュメントでは、メールティーザーコンポーネントの現在のバージョン(2022年10月にメールコアコンポーネントのリリース x で導入された v1)について説明します。
コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。
技術的詳細 technical-details
メールティーザーコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。
コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。
設定ダイアログ configure-dialog
設定ダイアログでは、個々のティーザーのプロパティをコンテンツ作成者が定義できます。また、選択したティーザー画像を変更するための編集ダイアログもあります。
「リンク」タブ links-tab
ティーザーのタイトル、説明および画像は、リンクされたコンテンツから、または最初のコールトゥアクションでリンクされたコンテンツから継承することができます。 リンクもコールトゥアクションも指定されていない場合、タイトル、説明および画像は現在のコンテンツから継承されます。
-
リンク - このファイルは、コンテンツ、外部 URL、アンカーのいずれかにリンクしています。
- キャンペーンアイコンをクリックして、Adobe Campaign 変数を選択ダイアログを開き、Adobe Campaign から動的コンテンツを挿入します。
-
コールトゥアクション - このオプションを使用すると、複数の宛先にリンクできます。
- 最初のコールトゥアクションでリンクされたページは、ティーザーのタイトル、説明または画像を継承する場合に使用されます。
- Campaign アイコンをクリックして、 Adobe Campaign 変数を選択 ダイアログを開き、Adobe Campaign 内の動的コンテンツを挿入できます。
「テキスト」タブ text-tab
-
プリタイトル - プリタイトルは、ティーザーのタイトルの前に表示されます。
-
タイトル - ティーザーのヘッドラインとして表示するタイトルを定義します。
- Campaign アイコンをクリックして、Adobe Campaign 変数を選択ダイアログを開き、Adobe Campaign 内の動的コンテンツを挿入できます。
- リンクされたページからタイトルを取得する - オンにすると、タイトルには、リンクされたページのタイトルが設定されます。
-
説明 - ティーザーの小見出しとして表示する説明を定義します。
- Adobe Campaign 変数を選択 アイコンをクリックして Adobe Campaign 変数を選択ダイアログを開き、Adobe Campaign 内の動的コンテンツを挿入できます。
- リンクされたページから説明を取得する - オンにすると、説明には、リンクされたページの説明が設定されます。
-
ID - このオプションを使用すると、HTML 内のコンポーネントの一意の ID を制御することができます。
- これを空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
- ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
- ID を変更すると、CSS に影響を与える可能性があります。
「アセット」タブ asset-tab
-
ページからアイキャッチ画像を継承 - リンクされたページ(見つからない場合は現在のページ)のページプロパティで定義された画像を使用します。
-
画像アセット - アセットブラウザーからアセットをドロップするか、「参照」オプションをタップしてローカルファイルシステムからアップロードします。
- 現在選択されている画像を選択解除するには、「クリア」をタップまたはクリックします。
- アセットエディターでアセットのレンディションを管理するには、「編集」をタップまたはクリックします。
-
アクセシビリティ用代替テキスト - このフィールドでは、視覚に障害のあるユーザー向けの画像説明を定義できます。
- ページから代替テキストを継承 - このオプションでは、DAM における
dc:description
メタデータのリンク先アセット値の代替説明を使用します。アセットがリンクされていない場合は現在のページの代替説明を使用します。
- ページから代替テキストを継承 - このオプションでは、DAM における
-
代替テキストを提供しない - このオプションは、画像が単なる装飾画像である場合や、ページへの追加情報を伝えない場合に、スクリーンリーダーなどの支援テクノロジーで画像を無視するように指定します。
「スタイル」タブ styles-tab-edit
メールティーザーコンポーネントでは、AEM スタイルシステムをサポートしています。
ドロップダウンを使用して、コンポーネントに適用するスタイルを選択します。編集ダイアログでの選択項目は、コンポーネントツールバーから選択した項目と同じ効果があります。
このタブを使用するには、デザインダイアログでこのコンポーネントのスタイルを設定する必要があります。
編集ダイアログ edit-dialog
メールティーザーコンポーネントは画像レンダリングを画像コンポーネントに委任します。そのため、コンテンツ作成者は画像コンポーネントの編集ダイアログを使用してティーザー画像を操作できます。
デザインダイアログ design-dialog
デザインダイアログを使用すれば、テンプレート作成者は、コンテンツ作成者がこのコンポーネントを使用する際に選択できるティーザーオプションを定義できます。
「ティーザー」タブ teaser-tab
-
許可されている見出し要素 - ドロップダウンを使用して、作成者がティーザーのタイトルタイプに選択できる見出し HTML 要素を定義します。
-
タイトルのデフォルトの見出し要素 - ティーザーのタイトルタイプに使用されるデフォルトの見出し HTML 要素
-
コールトゥアクション
- コールトゥアクションを無効化 - 「コールトゥアクション」オプションをコンテンツ作成者に表示しません
-
要素
- プリタイトルを非表示にする - 「プリタイトル」オプションをコンテンツ作成者に表示しません
- タイトルを非表示にする - 「タイトル」オプションをコンテンツ作成者に表示しません
- オンにすると、「タイトルのタイプ」は非表示になります
- タイトルのタイプを表示
- 説明を非表示にする - 「説明」オプションをコンテンツ作成者に非表示にします
-
画像の委任 - メールティーザーが画像処理を委任するコンポーネントを示す情報表示。
「スタイル」タブ styles-tab
メールティーザーコンポーネントでは、AEM スタイルシステムをサポートしています。