メールコンテナコンポーネント
メールコンテナコンポーネントを使用すると、メールコンテンツに複数の追加コンポーネントのコンテナを作成できます。
使用方法
メールコンテナコンポーネントを使用すると、メールコンテンツに複数の追加コンポーネントのコンテナを作成できます。また、他のコンポーネントをグループ化し、共通のスタイルやレイアウトを適用することができます。
メールコンテナコンポーネントをページに追加したら、コンテンツ作成者は、追加のコンポーネントをページにドラッグ＆ドロップすることができます。
バージョンと互換性
このドキュメントでは、メールコンテナコンポーネントの現在のバージョン（2022年10月にメールコアコンポーネントのリリース X で導入された v1）について説明します。
コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。
| コンポーネントのバージョン | AEM 6.5 | AEM 6.5 LTS | AEM as a Cloud Service |
|---|---|---|---|
| v1 | 互換性あり | - | - |
メールコアコンポーネントのバージョンとリリースについて詳しくは、メールコアコンポーネントのバージョンを参照してください。
技術的詳細
コンテナコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。
コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。
設定ダイアログ
設定ダイアログでは、コンテナ項目とその動作およびコンテンツ内での表示をコンテンツ作成者が定義できます。
-
レイアウト - このオプションでは、メールコンテナコンポーネントの動作またはレイアウト動作を定義します。
- full-width
- half|half
- one-third|two-third
- two-third|one-third
- third|third|third
-
背景色 - 設定に応じて、自由形式の RGB 値として定義するか、カラーピッカーを使用して定義します。
-
背景画像 - 設定に応じて、コンテナの背景画像を定義します。
-
ID - このオプションを使用すると、HTML 内のコンポーネントの一意の ID を制御することができます。
- これを空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
- ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
- ID を変更すると、CSS に影響を与える可能性があります。
「スタイル」タブ
メールコンテナコンポーネントでは、AEM スタイルシステムをサポートしています。
ドロップダウンを使用して、コンポーネントに適用するスタイルを選択します。編集ダイアログでの選択項目は、コンポーネントツールバーから選択した項目と同じ効果があります。
このタブを使用するには、デザインダイアログでこのコンポーネントのスタイルを設定する必要があります。
デザインダイアログ
デザインダイアログでは、メールコンテナコンポーネントの使用時にコンテンツ作成者に提供されるオプションを、テンプレート作成者が定義できます。
「許可されたコンポーネント」タブ
「許可されたコンポーネント」タブでは、メールコンテナコンポーネントにアイテムとして追加できるコンポーネントを、コンテンツ作成者が定義できます。
「許可されたコンポーネント」 タブは、テンプレートエディターでレイアウトコンテナのポリシーやプロパティを定義する際の同名のタブと同じように機能します。
「デフォルトコンポーネント」タブ
「デフォルトコンポーネント」タブは、ページテンプレートでのデフォルトコンポーネントの定義方法と同様に、特定のアセットタイプがコンテナにドロップされたときにコンテナに追加されるコンポーネントを定義するために使用されます。
「コンテナ設定」タブ
この「コンテナ設定 」タブでは、背景画像または背景色を作成者が定義できるかどうかを定義します。
-
背景画像
- 背景画像を有効にする - コンテナの背景画像をコンテンツ作成者が定義できるようにします。
-
背景色
- 背景色を有効にする - コンテナの背景色をコンテンツ作成者が定義できるようにします。
- スウォッチのみ - コンテナの背景色に事前に定義されているカラースウォッチからのみコンテンツ作成者が選択できるようにします。
- 「背景色を有効にする」を選択した場合にのみ使用可能です。
-
許可されるスウォッチ - コンテンツ作成者がコンテナの背景色を選択できるように事前定義済みカラーを定義します。
- 「追加」ボタンを使用して、事前定義済みのカラースウォッチを追加します。追加が完了すると、以下の列を含むエントリがリストに追加されます。
- 値 - RGB 値を使用して手動で色を定義します。
- カラーピッカーをタップまたはクリックすると、個々の RGB 値を調整するか 16 進数値を定義して、色を選択しやすくなります。
- 削除 - タップまたはクリックすると、スウォッチを削除できます。
- 並べ替え - タップまたはクリックしてドラッグし、スウォッチを並べ替えます。