E メールスタイルの管理

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

要素の選択

Eメールデザイナーインターフェイスで要素を選択するには、次のいずれかを実行します。

  • 電子メールを直接クリックします。
  • または、左側の​パレット​にあるオプションから使用できる構造ツリーを参照します。

構造ツリーを参照すると、より正確な選択が可能になります。 次のいずれかを選択できます。

  • 構造の構成要素全体
  • 構造コンポーネントを構成する列の1つ
  • または、列内に配置されているコンポーネントのみ。

列を選択するには、次の操作も実行できます。

  1. 構造コンポーネントを選択します(Eメール内で直接選択するか、左側の​パレット​から使用できる構造ツリーを使用します)。
  2. コンテキストツールバー​から、Select a column​をクリックして目的の列を選択します。

この節の例を参照してください。

スタイル設定の調整

  1. Eメール内の要素を選択します。 詳しくは、要素の選択を参照してください。

  2. 必要に応じて設定を調整します。 選択した要素ごとに異なる設定が提供されます。

    背景の挿入、サイズの変更、水平方向または垂直方向の整列の変更、色の管理、パディングまたはマージンの追加などを行うことができます。

    これをおこなうには、Settings​ウィンドウに表示されるオプションを使用するか、インラインスタイル属性を追加します。

  3. コンテンツを保存します。

パディングと余白の調整

Eメールデザイナーインターフェイスを使用すると、パディングと余白の設定をすばやく調整できます。

Padding:この設定を使用すると、要素の境界線内にあるスペースを管理できます。

例:

  • パディングを使用して、画像の左右に余白を設定します。
  • Text​コンポーネントまたは​Divider​コンポーネントにスペースを追加するには、上下のパディングを使用します。
  • 構造要素内の列間に境界線を設定するには、各列のパディングを定義します。

Margin:この設定を使用すると、要素の境界線と次の要素の間のスペースを管理できます。

メモ

選択内容(構造コンポーネント、列コンポーネント、コンテンツコンポーネント)に応じて、結果は同じになりません。 Adobeでは、Padding​パラメーターと​Margin​パラメーターを列レベルで設定することをお勧めします。

Padding​と​Margin​の両方で、ロックアイコンをクリックして、上、下、または右、左のパラメーターの同期を解除します。 これにより、各パラメータを個別に調整できます。

スタイルの整列

  • テキストの整列:テキストにマウスのカーソルを置き、コンテキストツールバーを使用して整列します。

  • 水平方 向の整列は、テキスト、画像およびボタンに適用できます。現在、およびコンポーネントには適 Divider 用で Social きません。

  • 垂直方向の整列​を設定するには、構造コンポーネント内の列を選択し、設定ウィンドウからオプションを選択します。

背景の設定

Eメールデザイナーで背景を設定する場合、Adobeでは次の操作をお勧めします。

  1. デザインで必要に応じて、Eメールの本文に背景色を適用します。
  2. ほとんどの場合、列レベルで背景色を設定します。
  3. 画像やテキストコンポーネントは管理が困難なので、背景色を使用しないようにしてください。

使用可能な背景設定は次のとおりです。

  • 電子メール全体に​Background color​を設定します。 左側のパレットからアクセス可能なナビゲーションツリーで、ボディ設定を選択していることを確認してください。

  • Viewport background color​を選択して、すべての構造コンポーネントに同じ背景色を設定します。 このオプションを使用すると、背景色から別の設定を選択できます。

  • 構造コンポーネントごとに異なる背景色を設定します。 左側のパレットからアクセス可能なナビゲーションツリーの構造を選択し、その構造にのみ特定の背景色を適用します。

    ビューポートの背景色は、構造の背景色を隠すので、設定しないでください。

  • 構造コンポーネントのコンテンツに​Background image​を設定します。

    メモ

    一部の電子メールプログラムは背景画像をサポートしていません。 サポートされていない場合は、代わりに行の背景色が使用されます。 画像を表示できない場合は、必ず適切なフォールバックの背景色を選択してください。

  • 列レベルで背景色を設定します。

    メモ

    これは最も一般的な使用例です。 Adobeでは、Eメールコンテンツ全体を編集する際の柔軟性を高めるため、背景色を列レベルで設定することをお勧めします。

    また、列レベルで背景画像を設定することもできますが、ほとんど使用されません。

例:垂直方向の整列とパディングの調整

3つの列で構成される構造コンポーネント内で、パディングと垂直方向の整列を調整します。 これは、次の手順に従って行います。

  1. Eメール内で直接構造コンポーネントを選択するか、左側の​パレット​から使用できる構造ツリーを使用します。

  2. コンテキストツールバー​から​Select a column​をクリックし、編集するツールバーを選択します。 構造ツリーから選択することもできます。

    その列の編集可能なパラメータが、右側の​Settings​ペインに表示されます。

  3. Vertical alignment​の下で​Up​を選択します。

    コンテンツコンポーネントが列の上に表示されます。

  4. Padding​の下で、列内の上のパディングを定義します。 下パディングとの同期を解除するには、ロックアイコンをクリックします。

    その列の左右のパディングを定義します。

  5. 同様に、他の列の整列とパディングを調整します。

  6. 変更を保存します。

Eメールデザイナーで、リンクに下線を引き、その色とターゲットを選択できます。

  1. リンクが挿入されるコンポーネントで、リンクのラベルテキストを選択します。

  2. コンポーネント設定で、「Underline link」をオンにして、リンクのラベルテキストに下線を引きます。

  3. リンクを開くブラウジングコンテキストを選択するには、Target​を選択します。

  4. リンクの色を変更するには、Link color​をクリックします。

  5. 必要な色を選択します。

  6. 変更を保存します。

インラインスタイル属性の追加

Eメールデザイナーインターフェイスで、要素を選択し、サイドパネルにその設定を表示する際に、その特定の要素のインライン属性と値をカスタマイズできます。

  1. コンテンツ内の要素を選択します。

  2. サイドパネルで、Styles Inline​設定を探します。

  3. 既存の属性の値を変更するか、+​ボタンを使用して新しい属性を追加します。 CSSに準拠している任意の属性と値を追加できます。

次に、選択した要素にスタイルが適用されます。 子要素に特定のスタイル設定属性が定義されていない場合、親要素のスタイル設定が継承されます。

このページ