コンテンツコンポーネントの使用 content-components

メールコンテンツを作成する場合は、コンテンツ ​コンポーネントを使用すると、メールに配置して使用できる生の空コンポーネントでメールをさらにパーソナライズできます。

メールのレイアウトを定義する​ 構造 ​内には、コンテンツ ​を必要な数だけ追加できます。

コンテンツコンポーネントを追加 add-content-components

メールにコンテンツコンポーネントを追加し、必要に応じて調整するには、次の手順に従います。

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

  2. 選択した​ コンテンツ ​を、関係のある構造内にドラッグ&ドロップします。

    {zoomable="yes"}

    note note
    NOTE
    単一の構造および構造の各列に複数のコンポーネントを追加できます。
  3. コンテキストの「設定」タブを使用して、各コンポーネントのオプションを調整します。例えば、デスクトップやモバイルデバイスのみ、またはその両方に表示するように選択できます。また、このタブでリンクオプションを管理することもできます。リンク管理の詳細情報

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

    {zoomable="yes"}

  5. 右側のパネルにある​ コンテンツ ​の詳細メニューで、必要に応じてコンテンツコンポーネントを簡単に削除または複製できます。

コンテナ container

シンプルなコンテナを追加して、その中に別のコンテンツコンポーネントを追加することができます。これにより、内部で使用されるコンポーネントとは異なる特定のスタイルをコンテナに適用できます。

例えば、コンテナ ​コンポーネントを追加したあと、そのコンテナの内部にボタンコンポーネントを追加します。 コンテナには特定の背景を使用し、ボタンには別の背景を指定することができます。

{zoomable="yes"}

ボタン buttons

ボタン ​コンポーネントを使用すると、メールに 1 つまたは複数のボタンを挿入し、メールのオーディエンスを別のページにリダイレクトすることができます。

  1. コンテンツ ​リストから、ボタン ​コンポーネントを​ 構造 ​コンポーネントにドラッグ&ドロップします。

    {zoomable="yes"}

  2. 新しく追加したボタンをクリックして、テキストをパーソナライズし、「設定」タブと「スタイル」タブにアクセスします。

    {zoomable="yes"}

  3. 設定」タブの「URL」フィールドに、ボタンをクリックしたときにリダイレクトする URL を追加します。

  4. ターゲット」ドロップダウンリストで、コンテンツの表示方法を選択します。

    • なし:クリックされたのと同じフレームでリンクを開きます(デフォルト)。
    • 空白:リンクを新しいウィンドウまたはタブで開きます。
    • セルフ:クリックされたのと同じフレームでリンクを開きます。
    • :親フレームでリンクを開きます。
    • :ウィンドウの全体でリンクを開きます。

    {zoomable="yes"}

  5. 境界線サイズ余白 ​などのスタイル属性を変更することで、ボタンをさらにカスタマイズできます。「スタイル」タブから変更します。

テキスト text

テキスト ​コンポーネントを使用すると、メールにテキストを挿入し、スタイル(境界線、サイズ、パディングなど)を「設定」タブと「スタイル」タブの使用。

  1. コンテンツ ​メニューから、テキスト ​を​ 構造 ​コンポーネントにドラッグ&ドロップします。

    {zoomable="yes"}

  2. 新しく追加したコンポーネントをクリックして、テキストをパーソナライズしたり、「設定」タブと「スタイル」タブにアクセスしたりします。

  3. コンテキストツールバーから使用できる次のオプションを使用して、テキストを変更します。

    {zoomable="yes"}

    • テキストスタイルを変更:テキストに太字、斜体、下線または取り消し線を適用します。
    • 整列を変更:テキストの配置を左揃え、右揃え、中央揃えまたは両端揃えにします。
    • リストを作成:テキストに箇条書きリストまたは番号リストを追加します。
    • 見出しを設定:テキストに最大 6 つの見出しレベルを追加します。
    • フォントサイズ:テキストのフォントサイズをピクセル単位で選択します。
    • 画像を編集:テキストコンポーネントに画像またはアセットを追加します。
    • ソースコードを表示:テキストのソースコードを表示します。これは変更できません。
    • 複製:テキストコンポーネントのコピーを追加します。
    • 削除:選択したテキストコンポーネントをメールから削除します。
    • パーソナライゼーションを追加:パーソナライゼーションフィールドを追加して、プロファイルデータからコンテンツをカスタマイズします。
    • 条件付きコンテンツを有効にする:条件付きコンテンツを追加して、コンポーネントのコンテンツをターゲットプロファイルに適応させます。
  4. その他のスタイル属性(テキストの色、フォントファミリー、境界線、パディング、余白など)を「スタイル」タブから調整します。

    {zoomable="yes"}

ディバイダー divider

ディバイダー ​コンポーネントを使用すると、分割線を挿入してメールのレイアウトとコンテンツを整理できます。

線の色、スタイル、高さなどのスタイル属性は、「スタイル」タブから調整できます。

{zoomable="yes"}

HTML HTML

HTML コンポーネントを使用して、既存の HTML の別の部分をコピーして貼り付けることができます。これにより、無料のモジュラー HTML コンポーネントを作成して、一部の外部コンテンツを再利用できます。

  1. コンポーネント ​から、HTML コンポーネントを​ 構造 ​コンポーネントにドラッグ&ドロップします。

    {zoomable="yes"}

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

    {zoomable="yes"}

NOTE
外部コンテンツを簡単に E メールデザイナーに準拠させるには、ゼロからメッセージを作成し、既存のメールのコンテンツをコンポーネントにコピーすることをお勧めします。

画像 image

画像 ​コンポーネントを使用して、コンピューターからメールに画像ファイルを挿入します。

  1. コンテンツ ​メニューで、画像 ​コンポーネントを​ 構造 ​コンポーネントにドラッグ&ドロップします。

    {zoomable="yes"}

  2. 参照」をクリックして、アセットから画像ファイルを選択します。また、「メディアを読み込み」を選択することもできます。

    Adobe Experience Manager でアセットをアップロードおよび追加する方法について詳しくは、Adobe Experience Manager as a Cloud Service ドキュメントを参照してください。

    {zoomable="yes"}

  3. フォルダー内を移動して必要な特定のアセットを見つけるか、検索バーを使用して効率的に見つけます。

    検索しているアセットが見つかったら、「選択」をクリックします。

    {zoomable="yes"}

  4. 新しく追加したコンポーネントをクリックし、「設定」タブを使用して画像プロパティを設定します。

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

    {zoomable="yes"}

  5. オーディエンスを別のコンテンツにリダイレクトするリンクを追加できます。詳細情報

  6. 余白、境界線など、他のスタイル属性を、「スタイル」タブを使用して調整します。

ソーシャル social

ソーシャル ​コンポーネントを使用すると、メールコンテンツにソーシャルメディアページへのリンクを挿入できます。

  1. コンテンツ ​コンテンツメニューから、ソーシャル ​コンポーネントを​ 構造 ​コンポーネントにドラッグ&ドロップします。

  2. 新しく追加したコンポーネントをクリックします。

  3. 設定」タブの「ソーシャル」フィールドで、追加または削除するソーシャルメディアを選択します。

    {zoomable="yes"}

  4. 画像のサイズ」フィールドでアイコンのサイズを選択します。

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

    {zoomable="yes"}

  6. 必要に応じて、「ソース」フィールドで各ソーシャルメディアのアイコンを変更することもできます。

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

recommendation-more-help
c39c2d00-ba9a-424b-adf9-66af58a0c34b