ドキュメントCampaignCampaign web ユーザーインターフェイス

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

Last update: Mon May 26 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 適用対象：
  • Campaign v8 Web User Interface

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

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

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

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

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

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

    コンテンツコンポーネントをE メールデザイナーの構造にドラッグ＆ドロップする方法を示すスクリーンショット。 {modal="regular"}

    note note
    NOTE
    単一の構造および構造の各列に複数のコンポーネントを追加できます。

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

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

    E メールデザイナーのコンテンツコンポーネント用の「設定」タブを示すスクリーンショット。 {modal="regular"}

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

コンテナ container

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

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

E メールデザイナーにコンテナコンポーネントを追加する方法を示すスクリーンショット。 {modal="regular"}

ボタン buttons

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

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

    E メールデザイナーにボタンコンポーネントをドラッグ＆ドロップする方法を示すスクリーンショット。 {modal="regular"}

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

    E メールデザイナーのボタンコンポーネント用の「設定」タブを示すスクリーンショット。 {modal="regular"}

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

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

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

    E メールデザイナーのボタンコンポーネント用の「ターゲット」オプションを示すスクリーンショット。 {modal="regular"}

  5. 「スタイル」タブから​ 境界線、サイズ、余白 ​などのスタイル属性を変更して、ボタンをさらにパーソナライズします。

テキスト text

テキスト ​コンポーネントを使用すると、メールにテキストを挿入し、スタイル（境界線、サイズ、パディングなど）を「設定」タブと「スタイル」タブを使用して調整できます。

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

    E メールデザイナーにテキストコンポーネントをドラッグ＆ドロップする方法を示すスクリーンショット。 {modal="regular"}

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

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

    E メールデザイナーのテキスト編集ツールバーを示すスクリーンショット。 {modal="regular"}

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

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

    E メールデザイナーのテキストコンポーネント用の「スタイル」タブを示すスクリーンショット。 {modal="regular"}

ディバイダー divider

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

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

E メールデザイナーにディバイダーコンポーネントを追加する方法を示すスクリーンショット。 {modal="regular"}

HTML HTML

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

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

    E メールデザイナーに HTML コンポーネントをドラッグ＆ドロップする方法を示すスクリーンショット。 {modal="regular"}

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

    E メールデザイナーの HTML コンポーネント用のソースコードオプションを示すスクリーンショット。 {modal="regular"}

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

画像 image

IMPORTANT
Assets メニューへのアクセスは、アクティブな Adobe Experience Manager as a Cloud Service ライセンスを持つユーザーに制限されます。このライセンスを保持していない場合、Assets メニューは使用できません。

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

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

    E メールデザイナーに画像コンポーネントをドラッグ＆ドロップする方法を示すスクリーンショット。 {modal="regular"}

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

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

    E メールデザイナーの画像コンポーネント用の「参照」オプションを示すスクリーンショット。 {modal="regular"}

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

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

    E メールデザイナーのアセット選択プロセスを示すスクリーンショット。 {modal="regular"}

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

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

    E メールデザイナーの画像コンポーネント用の「設定」タブを示すスクリーンショット。 {modal="regular"}

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

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

ソーシャル social

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

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

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

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

    E メールデザイナーのソーシャルコンポーネント用の「設定」タブを示すスクリーンショット。 {modal="regular"}

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

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

    E メールデザイナーのソーシャルメディアアイコンの URL 設定を示すスクリーンショット。 {modal="regular"}

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

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

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