ティーザーコンポーネント

コアコンポーネントのティーザーコンポーネントでは、画像、タイトル、リッチテキストのほか、オプションで追加コンテンツへのリンクを表示できます。

使用方法

ティーザーコンポーネントを使用すれば、画像、タイトル、リッチテキスト、追加コンテンツや他のアクションへのリンクを使用して、コンテンツ作成者が詳細なコンテンツへのティーザーを容易に作成できるようになります。

デザインダイアログでは、コールトゥアクションを作成したりリンクを追加したりするオプションが使用可能かどうかや、様々な表示オプションの無効化をテンプレート作成者が定義できます。設定ダイアログでは、画像の設定、CTA（コールトゥアクション）の定義、タイトルと説明の設定、個々のティーザーへのリンクの設定をコンテンツ作成者が行えます。画像コンポーネントの編集ダイアログにアクセスして、ティーザー画像を変更できます。

バージョンと互換性

このドキュメントでは、ティーザーコンポーネントの現在のバージョン（2022年2月にコアコンポーネントのリリース 2.18.0 で導入された v2）について説明します。

コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。

コンポーネント出力のサンプル

ティーザーコンポーネントを体験し、その設定オプションや HTML および JSON 出力の例を確認するには、コンポーネントライブラリを参照してください。

技術的詳細

ティーザーコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。

コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。

設定ダイアログ

設定ダイアログでは、個々のティーザーのプロパティをコンテンツ作成者が定義できます。また、選択したティーザー画像を変更するための編集ダイアログもあります。

「リンク」タブ

ティーザータイトル、説明および画像はリンクされたページや、最初のコールトゥアクションでリンクされたページから継承できます。リンクとコールトゥアクションのいずれも指定していない場合は、タイトル、説明、および画像は現在のページから継承されます。

• リンク - このファイルは、コンテンツページ、外部 URL、ページアンカーのいずれかにリンクしています。
• リンクを新しいタブで開く - 有効にすると、リンクは新しいブラウザータブで開きます。
• コールトゥアクション - このオプションを使用すると、複数の宛先にリンクできます。
  • 最初のコールトゥアクションでリンクされたページは、ティーザーのタイトル、説明または画像を継承する場合に使用されます。

「テキスト」タブ

• プリタイトル - プリタイトルは、ティーザーのタイトルの前に表示されます。
• タイトル - ティーザーのヘッドラインとして表示するタイトルを定義します。
  • リンクされたページからタイトルを取得する - オンにすると、タイトルには、リンクされたページのタイトルが設定されます。
• 説明 - ティーザーの小見出しとして表示する説明を定義します。
  • リンクされたページから説明を取得する - オンにすると、説明には、リンクされたページの説明が設定されます。
• ID - このオプションを使用すると、HTML 内およびデータレイヤー内のコンポーネントの一意の識別子を制御できます。
  • 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
  • ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
  • ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。

「アセット」タブ

• ページからアイキャッチ画像を継承 - リンクされたページ（見つからない場合は現在のページ）のページプロパティで定義された画像を使用します。
• 画像アセット - アセットブラウザーからアセットをドロップするか、「参照」オプションをタップしてローカルファイルシステムからアップロードします。
  • 現在選択されている画像を選択解除するには、「クリア」をタップまたはクリックします。
  • アセットエディターで​アセットのレンディションを管理​するには、「編集」をタップまたはクリックします。
• アクセシビリティ用代替テキスト - 視覚に障害のあるユーザー向けの画像説明を定義できます。
  • ページから代替テキストを継承 - このオプションでは、DAM における dc:description メタデータのリンク先アセット値の代替説明を使用します。アセットがリンクされていない場合は現在のページの代替説明を使用します。
• 代替テキストを提供しない - このオプションは、画像が単なる装飾画像である場合や、ページへの追加情報を伝えない場合に、スクリーンリーダーなどの支援テクノロジーで画像を無視するように指定します。

「スタイル」タブ

ティーザーコンポーネントでは、AEM スタイルシステムをサポートしています。

ドロップダウンを使用して、コンポーネントに適用するスタイルを選択します。編集ダイアログでの選択項目は、コンポーネントツールバーから選択した項目と同じ効果があります。

ドロップダウンメニューを使用するには、デザインダイアログでこのコンポーネントのスタイルを設定する必要があります。

編集ダイアログ

ティーザーコンポーネントは画像レンダリングを画像コンポーネントに委任します。そのため、コンテンツ作成者は画像コンポーネントの[編集ダイアログ]（image.md#edit-dialog）を使用してティーザー画像を操作できます。

デザインダイアログ

デザインダイアログを使用すれば、テンプレート作成者は、コンテンツ作成者がこのコンポーネントを使用する際に選択できるティーザーオプションを定義できます。

「ティーザー」タブ

• コールトゥアクション
  • コールトゥアクションを無効化 - 「コールトゥアクション」オプションをコンテンツ作成者に表示しません
• エレメント
  • プリタイトルを非表示にする - 「プリタイトル」オプションをコンテンツ作成者に表示しません
  • タイトルを非表示にする - 「タイトル」オプションをコンテンツ作成者に表示しません
    • オンにすると、「タイトルのタイプ」は非表示になります
  • 説明を非表示にする - 「説明」オプションをコンテンツ作成者に表示しません
• デフォルトのタイトルのタイプ - ティーザーのタイトルで使用する H タグを定義します。
• 画像の委任 - ティーザーが画像処理を委任するコンポーネントを示す情報表示です。

「スタイル」タブ

ティーザーコンポーネントは、AEM スタイルシステムをサポートしています。

Adobe Client Data Layer

ティーザーコンポーネントは、Adobe Client Data Layer をサポートしています。

Business.Adobe.com リソース