Show Menu
TOPICS×

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

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

使用方法

ティーザーコンポーネントを使用すれば、画像、タイトル、リッチテキスト、追加コンテンツや他のアクションへのリンクを使用して、コンテンツ作成者が詳細なコンテンツへのティーザーを容易に作成できるようになります。
デザインダイアログ では、コールトゥアクションを作成したりリンクを追加したりするオプションが使用可能かどうかや、様々な表示オプションの無効化をテンプレート作成者が定義できます。 設定ダイアログ では、画像の設定、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 スタイルシステム をサポートしています。