メールスタイルの管理 managing-styles
E メールデザイナーでは、要素を選択すると、選択したコンテンツのタイプに固有のオプションが Settings ウィンドウ これらのオプションを使用すると、E メールのスタイルを簡単に変更できます。
要素の選択 selecting-an-element
E メールデザイナーインターフェイスで要素を選択するには、次のいずれかを実行します。
- 電子メールで直接クリックし、
- または、左側にあるオプションから使用できる構造ツリーを参照します。 パレット.
構造ツリーを参照すると、より正確な選択が可能になります。 次のいずれかを選択できます。
- 構造の構成要素全体
- 構造コンポーネントを構成する列の 1 つ
- または、列内に配置されているコンポーネントのみ。
列を選択するには、次の操作も実行できます。
- (E メール内で直接、または左側にある構造ツリーを使用して)構造コンポーネントを選択します パレット) をクリックします。
- 次から: コンテキストツールバー をクリックし、 Select a column をクリックして、目的の列を選択します。
詳しくは、 この節.
スタイル設定の調整 adjusting-style-settings
-
E メール内の要素を選択します。 詳しくは、 要素の選択.
-
必要に応じて設定を調整します。 選択した各要素には、異なる設定セットが用意されています。
背景の挿入、サイズの変更、水平方向または垂直方向の整列の変更、色の管理、追加を行うことができます。 パディングまたはマージンなど。
これをおこなうには、 Settings ウィンドウまたは インラインスタイル属性を追加する.
-
コンテンツを保存します。
パディングとマージンの調整 about-padding-and-margin
E メールデザイナーインターフェイスを使用すると、パディングとマージンの設定をすばやく調整できます。
Padding:この設定を使用すると、要素の境界線内にあるスペースを管理できます。
例:
- パディングを使用して、画像の左右に余白を設定します。
- 上と下のパディングを使用して、1 つ以上の間隔を追加します。 Text または Divider コンポーネント。
- 構造要素内の列間の境界線を設定するには、各列のパディングを定義します。
Margin:この設定を使用すると、要素の境界線と次の要素の間のスペースを管理できます。
両方に対して Padding および Margin をクリックし、上、下、右、左の各パラメーターの同期を解除するには、ロックアイコンをクリックします。 これにより、各パラメータを個別に調整できます。
スタイルの整列 about-alignment
-
テキストの整列:テキストにマウスのカーソルを置き、コンテキストツールバーを使用して整列します。
-
水平方向の整列 は、テキスト、画像およびボタンに適用できます。現在、 Divider および Social コンポーネント。
-
次の手順で 垂直方向の整列 で、構造コンポーネント内の列を選択し、設定ウィンドウからオプションを選択します。
背景の設定 about-backgrounds
E メールデザイナーで背景を設定する際の推奨事項は次のとおりです。
- デザインで必要な場合は、メールの本文に背景色を適用します。
- ほとんどの場合、列レベルで背景色を設定します。
- 画像やテキストコンポーネントは管理が困難であるため、背景色を使用しないようにしてください。
使用可能な背景設定を次に示します。
-
を設定します。 Background color 電子メール全体に対して。 左側のパレットからアクセス可能なナビゲーションツリーで、ボディ設定を選択していることを確認してください。
-
すべての構造コンポーネントに同じ背景色を設定するには、 Viewport background color. このオプションを使用すると、背景色から別の設定を選択できます。
-
構造コンポーネントごとに異なる背景色を設定します。左側のパレットからアクセス可能なナビゲーションツリーで構造を選択し、その構造にのみ特定の背景色を適用します。
構造の背景色が隠れてしまう場合があるので、ビューポートの背景色を設定しないでください。
-
を設定します。 Background image 構造コンポーネントのコンテンツ用。
note note NOTE 一部のメールプログラムでは、背景画像はサポートされていません。サポートされていない場合は、代わりに行の背景色が使用されます。画像を表示できない場合は、必ず適切なフォールバックの背景色を選択してください。 -
列レベルで背景色を設定します。
note note NOTE これは最も一般的な使用例です。アドビでは、メールコンテンツ全体を柔軟に編集できるように、背景色を列レベルで設定することをお勧めします。 また、列レベルで背景画像を設定することもできますが、ほとんど使用されません。
例:垂直方向の整列とパディングの調整 example--adjusting-vertical-alignment-and-padding
3 つの列で構成される構造コンポーネント内で、パディングと垂直方向の整列を調整する場合。 これを行うには、次の手順に従います。
-
E メール内で直接構造コンポーネントを選択するか、左側にある構造ツリーを使用して選択します パレット.
-
次から: コンテキストツールバー をクリックし、 Select a column をクリックし、編集するものを選択します。 構造ツリーから選択することもできます。
その列の編集可能なパラメーターが、 Settings 右側のパネル。
-
の下 Vertical alignment を選択します。 Up.
コンテンツコンポーネントは、列の上に表示されます。
-
の下 Padding、列内の上のパディングを定義します。 ロックアイコンをクリックすると、下のパディングとの同期が解除されます。
その列の左右のパディングを定義します。
-
他の列の整列とパディングを調整する場合と同様に行います。
-
変更内容を保存します。
リンクのスタイル設定 about-styling-links
E メールデザイナーでは、リンクに下線を引き、その色とターゲットを選択できます。
-
リンクが挿入されるコンポーネントで、リンクのラベルテキストを選択します。
-
コンポーネント設定で、 Underline link をクリックして、リンクのラベルテキストに下線を引きます。
-
リンクを開くブラウジングコンテキストを選択するには、 Target.
-
リンクの色を変更するには、 Link color.
-
必要な色を選択します。
-
変更内容を保存します。
インラインスタイル属性の追加 adding-inline-styling-attributes
E メールデザイナーインターフェイスで、要素を選択し、サイドパネルにその設定を表示する際に、その要素のインライン属性と値をカスタマイズできます。
-
コンテンツ内の要素を選択します。
-
サイドパネルで、 Styles Inline 設定。
-
既存の属性の値を変更するか、 + 」ボタンをクリックします。 CSS に準拠している任意の属性と値を追加できます。
次に、選択した要素にスタイルが適用されます。 子要素に特定のスタイル属性が定義されていない場合、親要素のスタイル設定が継承されます。