Show Menu
TOPICS×

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

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

使用方法

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

バージョンと互換性

このドキュメントでは、ティーザーコンポーネントの現在のバージョン(2018 年 7 月にコアコンポーネントのリリース 2.1.0 で導入された v1)について説明します。
コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。
コンポーネントのバージョン
AEM 6.3
AEM 6.4
AEM 6.5
AEM as a Cloud Service
v1
互換性あり
互換性あり
互換性あり
互換性あり

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

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

技術的詳細

The latest technical documentation about the Teaser Component can be found on GitHub .
コアコンポーネントの開発について詳しくは、 コアコンポーネント開発者向けドキュメント を参照してください。

設定ダイアログ

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

画像

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

テキスト

  • タイトル
    - ティーザーのヘッドラインとして表示するタイトルを定義します。
  • リンクされたページからタイトルを取得する
    - オンにすると、タイトルには、リンクされたページのタイトルが設定されます。
  • 説明
    - ティーザーの小見出しとして表示する説明を定義します。
  • リンクされたページから説明を取得する
    - オンにすると、説明には、リンクされたページの説明が設定されます。

編集ダイアログ

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

デザインダイアログ

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

「ティーザー」タブ

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

「スタイル」タブ

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