ティーザーコンポーネント（v1）

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

使用方法

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

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

バージョンと互換性

このドキュメントでは、2018年7月にコアコンポーネントのリリース 2.1.0 で導入されたティーザーコンポーネント v1 について説明します。

注意

このドキュメントでは、ティーザーコンポーネント v1 について説明します。

ティーザーコンポーネントの現在のバージョンについて詳しくは、ティーザーコンポーネントのドキュメントを参照してください。

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

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

技術的詳細

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

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

設定ダイアログ

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

画像

ティーザーコンポーネントの編集ダイアログの「画像」タブ

  • 画像アセット
    • アセットブラウザーからアセットをドロップするか、「参照」オプションをタップすると、ローカルファイルシステムからアップロードできます。
    • 現在選択されている画像を選択解除するには、「クリア」をタップまたはクリックします。
    • アセットエディターで​アセットのレンディションを管理​するには、「編集」をタップまたはクリックします。
メモ

Dynamic Media 機能は、現在、Teaser コンポーネントでは使用できません。

テキスト

ティーザーコンポーネントの編集ダイアログの「テキスト」タブ

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

ティーザーコンポーネントの編集ダイアログの「リンク」タブ

  • リンク - ティーザーに適用されるリンク。パスブラウザーを使用して、リンクターゲットを選択します。
  • コールトゥアクションを有効化 - オンにすると、コールトゥアクションの定義が有効になります。リスト内の最初のコールトゥアクションリンクが他のティーザー要素のリンクとして使用されます。

編集ダイアログ

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

デザインダイアログ

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

「ティーザー」タブ

ティーザーコンポーネントのデザインダイアログ

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

「スタイル」タブ

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

Adobe Client Data Layer

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

このページ