E メールデザイナーのコンテンツコンポーネントを使用する content-components

E メールデザイナーで、既存のコンテンツを使用するか、構造コンポーネント​を空のコンテンツにドラッグ＆ドロップして、メールのレイアウトを定義します。 方法についてはこちらを参照

「コンテンツコンポーネント」セクションにアクセスするには、E メールデザイナーの左パネルから対応するボタンを選択します。

電子メール Designerの

選択したコンテンツコンポーネントを、関連する構造コンポーネント内にドラッグ＆ドロップします。

新しく追加したコンポーネントを選択します。

右側の「設定」タブと「スタイル」タブを使用して、コンポーネントごとに属性とスタイルを調整します。 例えば、コンポーネントのテキストスタイル、パディングまたは余白を変更できます。 詳しくは、整列とパディングを参照してください

コンテンツコンポーネント​の詳細メニューから、必要に応じてコンテンツコンポーネントを簡単に削除または複製できます。

新しく追加したボタンをクリックして、テキストをパーソナライズし、E メールデザイナーの右側のパネルにある「設定」タブと「スタイル」タブにアクセスできるようにします。

「

「リンク」メニューから、ボタンをクリックした際にリダイレクトする URL を追加します。

ターゲット​ドロップダウンリストで、オーディエンスのリダイレクト方法を選択します。

• なし：クリックしたフレームと同じフレームでリンクを開きます（デフォルト）。
• ブランク：リンクを新しいウィンドウまたは新しいタブで開きます。
• セルフ：クリックしたフレームと同じフレームでリンクを開きます。
• 親：親フレームでリンクを開きます。
• トップ：ウィンドウ全体でリンクを開きます。

ボタンをさらにパーソナライズするには、境界線、サイズ、余白​などのスタイル属性を​ コンポーネント設定 ​パネルから変更します。

新しく追加したコンポーネントをクリックして、テキストをパーソナライズし、E メールデザイナーの右側のパネルにある「設定」タブと「スタイル」タブにアクセスできるようにします。

ツールバーで次のオプションを使用して、テキストを変更します。

• テキストスタイルの変更：テキストに太字、斜体、下線、取り消し線を適用します。
• 配置の変更：テキストの行揃えを左揃え、右揃え、中央揃えまたは両端揃えから選択します。
• リストの作成：テキストに箇条書きまたは番号リストを追加します。
• 見出しの設定：テキストに最大 6 つのレベルの見出しを追加します。
• フォントサイズ：テキストのフォントサイズをピクセル単位で選択します。
• フォントカラーを変更：フォントの色を選択します。
• リンクを挿入：コンテンツに任意のタイプのリンクを追加します。
• 画像の編集：テキストコンポーネントに画像またはアセットを追加します。 詳しくは、アセット管理を参照してください
• フォントカラーを変更：フォントの色を選択します。
• パーソナライゼーションを追加：パーソナライゼーションフィールドを追加し、プロファイルデータを使用してコンテンツをカスタマイズできます。 詳しくは、コンテンツのパーソナライゼーションを参照してください
• ソースコードの表示：テキストのソースコードを表示します。 変更はできません。
• 条件付きコンテンツを有効にする：条件付きコンテンツを追加して、コンポーネントのコンテンツをターゲットプロファイルに適応させます。 詳しくは、動的コンテンツを参照してください。
• 複製：テキストコンポーネントのコピーを追加します。
• 削除：選択したテキストコンポーネントをメールから削除します。

その他のスタイル属性（テキストの色、フォントファミリー、境界線、パディング、余白など）を「スタイル」タブから調整します。

フォントと背景のオプションを表示する

新しく追加したコンポーネントをクリックし、コンテキストツールバーから「ソースコードを表示」選択して HTML を追加します。

「ソースコードを表示」オプションが強調表示された状態で

追加する HTML コードをメールにコピー＆ペーストし、「保存」をクリックします。

新しく追加したコンポーネントを選択します。

「設定」タブで「参照」をクリックしてアセットから画像ファイルを選択するか、「メディアを読み込み」をクリックしてアセットを Adobe Experience Manager Assets にアップロードします。

Adobe Experience Manager Assets について詳しくは、Adobe Experience Manager Assets ドキュメントを参照してください。

また、「Adobe Stock フォトを検索」オプションを使用して、Adobe Stock で直接検索することもできます。

新しく追加したコンポーネントをクリックし、画像プロパティを設定します。

• 「画像タイトル 」に画像のタイトルを入力します。
• 代替テキスト​を使用すると、画像にリンクするキャプションを定義できます。 これは HTML の alt 属性に対応します。 詳細情報

の「設定」タブの画像タイトルと代替テキストフィールド

また、「類似のストックフォトを検索」を選択することもできます。 詳細情報

「スタイル」タブから、余白、境界線などの他のスタイル属性を調整します。または、別のコンテンツにオーディエンスをリダイレクトするためのリンクを​ コンポーネント設定 ​パネルで追加します。

新しく追加したコンポーネントを選択します。 「設定」タブの「ソーシャル」フィールドで、追加または削除するソーシャルメディアを選択します。

専用フィールドでアイコンのサイズを選択します。

各ソーシャルメディアアイコンをクリックして、オーディエンスのリダイレクト先の URL を設定します。

ソーシャルコンポーネント内のソーシャルメディアアイコンの

必要に応じて、アセットから各ソーシャルメディアのアイコンを変更することもできます。

「スタイル」タブから、スタイル、余白、境界線などの他のスタイル属性を調整します。

新しく追加されたコンポーネントを選択し、「追加」をクリックして、「オファーの決定」を選択します。

ドロップダウンから、「プレースメント」を選択します。

次に、コンテンツに追加する​ オファーの決定 ​を選択し、「追加」をクリックします。

「オファーの決定」タブから、挿入したオファーをプレビューまたは変更できます。

コンテナコンポーネントと同様に、他のコンテンツコンポーネントをグリッドの各セルにドラッグ＆ドロップします。

例えば、テキスト​コンポーネント、画像​コンポーネント、2 つの​ ボタン ​コンポーネントを追加できます。 次に、画像を追加し、各コンポーネントのコンテンツを個別に編集できます。

{width="90%"}

グリッドの構造を調整するには、グリッドを選択し、E メールデザイナーの右側のパネルの「設定」タブに移動します。

{width="90%"}

グリッドに含まれる列と行の数を定義し、列と行の間隔を編集し、個々の列の幅を割合で変更できます。

必要に応じて、各セルに他のコンテンツコンポーネントをドロップし、「スタイル」タブから各コンポーネントのスタイルを調整します。

追加したら、コンポーネントをクリックし、E メールデザイナーの右側のパネルの「設定」タブを選択します。

そこから、テーブルの行と列の数を調整できます。

「ヘッダー行を含める」オプション（デフォルトで有効）を使用してヘッダー行をテーブルに追加し、「行をストライプ」オプションを切り替えて、行ごとにカラーを交互に適用し、読みやすさを向上させます。

また、テーブル内の列や行に対応する矢印を直接クリックし、コンテキストメニューを使用して、行や列を追加または削除することもできます。

「スタイル」タブから、セルカラー、フォントサイズ、テキストの整列、フォントカラーなど、その他のスタイル属性を調整します。