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

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

使用方法

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

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

バージョンと互換性

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

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

コンポーネントのバージョン AEM 6.4 AEM 6.5 AEM as a Cloud Service
v1 互換性あり 互換性あり 互換性あり

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

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

技術的詳細

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

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

設定ダイアログ

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

画像

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

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

テキスト

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

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

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

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

編集ダイアログ

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

デザインダイアログ

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

「ティーザー」タブ

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

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

「スタイル」タブ

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

このページ