Show Menu
トピック×

E メールスタイルの管理

電子メールデザイナでは、要素を選択すると、選択したコンテンツの種類に固有のオプションが Settings パネルに表示されます。 これらのオプションを使用すると、電子メールのスタイルを簡単に変更できます。

要素の選択

電子メールデザイナーインターフェイスで要素を選択するには、次のいずれかを実行します。
  • 電子メール内で直接クリックし、
  • または、左の パレットにあるオプションから使用できる構造ツリーを参照します
構造ツリーを参照すると、より正確な選択が可能になります。 次のいずれかを選択できます。
  • 構造の全体
  • 構造コンポーネントを構成する柱の1つ
  • 列内にあるコンポーネントのみ。
列を選択するには、次の操作も行えます。
  1. 構造コンポーネントを選択します(電子メール内に直接、または左側の パレットにある構造ツリーを使用 )。
  2. コン テキストツールバーで 、をクリック Select a column して目的の列を選択します。
この節の例を参照し てください

スタイル設定の調整

  1. 電子メール内の要素を選択します。 詳しくは、「要素の 選択 」を参照してください。
  2. 必要に応じて設定を調整します。 選択した各オファーには、異なる設定のセットがあります。
    背景の挿入、サイズの変更、水平方向または垂直方向の位置の変更、色の管理、 パディングやマージンの追加などを行うことができます
    これを行うには、パネルに表示されるオプションを使用するか、インラインスタイル属性を Settings 追加します Adding inline styling attributes
  3. コンテンツを保存します。

パディングとマージンの調整

電子メールデザイナーインターフェイスを使用すると、パディングとマージンの設定をすばやく調整できます。
Padding :この設定を使用すると、要素の境界線の内側にあるスペースを管理できます。
例:
  • パディングを使用して、画像の左右に余白を設定します。
  • 上下のパディングを使用して、またはコンポー Text Divider ネントにさらに間隔を追加します。
  • 構造要素内の列間に境界線を設定するには、各列のパディングを定義します。
Margin :この設定を使用すると、要素の境界線と次の要素の間のスペースを管理できます。
選択内容(構造コンポーネント、列、またはコンテンツコンポーネント)に応じて、結果は同じになりません。 Adobeでは、列レベルで Padding および Margin パラメーターを設定することを推奨します。
との両方 Padding Margin ​で、ロックアイコンをクリックして、top、bottomまたはrightまたはleftの各パラメータ間の同期を解除します。 これにより、各パラメーターを個別に調整できます。

スタイル設定

  • テキストの配置 :マウスのカーソルをテキストに合わせ、コンテキストツールバーを使用して整列します。
  • 水平方向の位置揃え は、テキスト、画像、ボタンに適用できます。現在は、 Divider および Social コンポーネントには適用できません。
  • 垂直方向の位置揃えを設定するには 、構造コンポーネント内の列を選択し、設定ペインからオプションを選択します。

背景の設定

電子メールデザイナで背景を設定する場合は、次の操作をAdobeが推奨します。
  1. デザインで必要な場合は、電子メールの本文に背景色を適用します。
  2. ほとんどの場合、列レベルで背景色を設定します。
  3. 管理が困難な画像やテキストコンポーネントでは、背景色を使用しないようにしてください。
使用可能な背景設定は次のとおりです。
  • 電子メール全体 Background color に対してを設定します。 左側のパレットからアクセスできるナビゲーションツリーで、ボディの設定を選択していることを確認します。
  • を選択して、すべての構造コンポーネントに同じ背景色を設定し Viewport background color ​ます。 このオプションを使用すると、背景色とは異なる設定を選択できます。
  • 構造コンポーネントごとに異なる背景色を設定します。 左側のパレットからアクセス可能なナビゲーションツリーで構造を選択し、その構造にのみ特定の背景色を適用します。
    ビューポートの背景色は、構造の背景色が隠れる場合があるので、設定しないでください。
  • 構造コンポーネント Background image のコンテンツに対してを設定します。
    一部の電子メールプログラムは、背景画像をサポートしていません。 サポートされていない場合は、行の背景色が代わりに使用されます。 画像を表示できない場合に備えて、適切なフォールバックの背景色を選択してください。
  • 列レベルで背景色を設定します。
    これが最も一般的な使用例です。 Adobeでは、電子メールコンテンツ全体を編集する際の柔軟性を高めるため、列レベルで背景色を設定することをお勧めします。
    また、列レベルで背景画像を設定することもできますが、ほとんど使用されません。

例:垂直方向の位置揃えとパディングの調整

3つの列で構成される構造コンポーネント内で、パディングと垂直方向の位置を調整する場合。 これをおこなうには、以下の手順に従います。
  1. 電子メール内で直接構造コンポーネントを選択するか、左の パレットで使用可能な構造ツリーを使用して構造コンポーネントを選択します
  2. コン テキストツールバーから 、をクリック Select a column し、編集するツールを選択します。 構造ツリーから選択することもできます。
    その列の編集可能なパラメータが、右側の Settings ペインに表示されます。
  3. の下 Vertical alignment ​でを選択し Up ​ます。
    コンテンツコンポーネントは、列の上部に表示されます。
  4. Padding ​で、列内の上パディングを定義します。 ロックアイコンをクリックして、下のパディングとの同期を解除します。
    その列の左右のパディングを定義します。
  5. 同様に、他の列の位置揃えとパディングを調整します。
  6. 変更を保存します。

Adding inline styling attributes

電子メールデザイナーインターフェイスで、要素を選択し、サイドパネルにその設定を表示する場合、インライン属性とその要素の値をカスタマイズできます。
  1. コンテンツ内の要素を選択します。
  2. サイドパネルで、 Styles Inline 設定を探します。
  3. 既存の属性の値を変更するか、 + ボタンを使用して新しい属性を追加します。 CSSに準拠している任意の属性と値を追加できます。
次に、選択した要素にスタイルが適用されます。 子要素に特定のスタイル設定属性が定義されていない場合、親要素のスタイル設定が継承されます。