メールスタイルの管理 managing-styles
電子メール Designerでは、エレメントを選択すると、選択したコンテンツの種類に固有のいくつかのオプションがSettings ペインに表示されます。 これらのオプションを使用すると、メールのスタイルを簡単に変更できます。
要素の選択 selecting-an-element
電子メールDesigner インターフェイスでエレメントを選択するには、次のいずれかを実行します。
- メールを直接クリックし，
- または、左側の パレット にあるオプションから使用可能な構造ツリーを参照します。
構造ツリーを参照すると、より正確に選択できます。 次のいずれかを選択できます。
- 構造全体の要素です，
- one of the columns that compose the structure component,
- or only a component that is located inside a column.
To select a column, you can also do the following:
- Select a structure component (directly in the email or using the structure tree available from the left Palette).
- From the contextual toolbar, click Select a column to choose the desired column.
このセクション の例を参照してください。
スタイル設定の調整 adjusting-style-settings
-
メール内の要素を選択します。 詳しくは、要素の選択を参照してください。
-
必要に応じて設定を調整します。 選択した各要素には、異なる設定セットが用意されています。
背景の挿入、サイズの変更、水平方向または垂直方向の整列の変更、カラーの管理、 パディングまたはマージン の追加などを行うことができます。
これを行うには、Settings ペインに表示されるオプションを使用するか、 インラインスタイル属性を追加します。
-
コンテンツを保存します。
パディングと余白の調整 about-padding-and-margin
メールDesignerのインターフェイスでは、パディングとマージンの設定をすばやく調整できます。
Padding：この設定を使用すると、要素の境界線内にあるスペースを管理できます。
例：
- パディングを使用して、画像の左右の余白を設定します。
- 上下のパディングを使用して、TextまたはDivider コンポーネントにさらに間隔を追加します。
- 構造要素内の列間に境界線を設定するには、各列にパディングを定義します。
Margin：この設定を使用すると、要素の境界線と次の要素の間のスペースを管理できます。
For both Padding and Margin, click the lock icon to break synchronization between top and bottom or right and left parameters. This enables you to adjust each parameter separately.
Styling alignment about-alignment
-
Text alignment: place the cursor of your mouse on some text and use the contextual toolbar to align it.
-
Horizontal alignment can be applied to text, images and buttons - currently not to the Divider and Social components.
-
垂直方向の整列を設定するには、構造コンポーネント内の列を選択し、設定ペインからオプションを選択します。
背景の設定 about-backgrounds
E メールデザイナーで背景を設定する際の推奨事項は次のとおりです。
- デザインで必要な場合は、メールの本文に背景色を適用します。
- 多くの場合、背景色は列レベルで設定します。
- 画像やテキストコンポーネントは管理が困難であるため、背景色を使用しないようにしてください。
使用可能な背景設定を次に示します。
-
メール全体に Background color を設定します。 左側のパレットからアクセス可能なナビゲーションツリーで、本文の設定を必ず選択してください。
-
Viewport background colorを選択して、すべての構造コンポーネントに同じ背景色を設定します。 このオプションを使用すると、背景色から別の設定を選択できます。
-
構造コンポーネントごとに異なる背景色を設定します。Select a structure in the navigation tree accessible from the left Palette to apply a specific background color only to that structure.
構造の背景色が隠れてしまう場合があるので、ビューポートの背景色を設定しないでください。
-
Set a Background image for the content of a structure component.
note NOTE 一部のメールプログラムでは、背景画像はサポートされていません。サポートされていない場合は、代わりに行の背景色が使用されます。画像を表示できない場合は、必ず適切なフォールバックの背景色を選択してください。 -
列レベルで背景色を設定します。
note NOTE これは最も一般的な使用例です。アドビでは、メールコンテンツ全体を柔軟に編集できるように、背景色を列レベルで設定することをお勧めします。 また、列レベルで背景画像を設定することもできますが、ほとんど使用されません。
例：垂直方向の整列とパディングの調整 example--adjusting-vertical-alignment-and-padding
3つの列で構成される構造コンポーネント内のパディングと垂直方向の整列を調整します。 これを行うには、次の手順に従います。
-
メール内で構造コンポーネントを直接選択するか、左側の パレット から利用できる構造ツリーを使用します。
-
コンテキストツールバーから、Select a columnをクリックし、編集するツールバーを選択します。 構造ツリーから選択することもできます。
その列の編集可能なパラメーターは、右側のSettings ペインに表示されます。
-
Vertical alignmentで、Upを選択します。
コンテンツコンポーネントが列の上に表示されます。
-
Paddingで、列内の先頭のパディングを定義します。 ロックアイコンをクリックして、下部のパディングとの同期を解除します。
その列の左右のパディングを定義します。
-
他の列の整列とパディングを調整する場合と同様に行います。
-
変更内容を保存します。
Styling links about-styling-links
E メールデザイナーでは、リンクに下線を引き、その色とターゲットを選択できます。
-
In a component where a link is inserted, select the label text of your link.
-
In the component settings, check Underline link to underline the label text of your link.
-
To select in which browsing context your link will be opened select a Target.
-
リンクの色を変更するには、Link colorをクリックします。
-
必要な色を選択します。
-
変更内容を保存します。
インラインスタイル属性の追加 adding-inline-styling-attributes
電子メールDesigner インターフェイスでエレメントを選択し、サイドパネルに設定を表示すると、そのエレメントのインライン属性とその値をカスタマイズできます。
-
コンテンツ内の要素を選択します。
-
サイドパネルで、Styles Inline設定を探します。
-
既存の属性の値を変更するか、+ ボタンを使用して新しい属性を追加します。 CSS に準拠している任意の属性と値を追加できます。
スタイル設定は、選択したエレメントに適用されます。 子要素に特定のスタイル属性が定義されていない場合、親要素のスタイル設定が継承されます。