Show Menu
トピック×

スタイルの管理

電子メールスタイルの編集

要素の編集

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

要素の選択

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

スタイル設定の調整

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

パディングとマージンについて

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

整列について

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

背景について

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

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

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

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

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

モバイルビューへの切り替え

モバイルディスプレイ用のすべてのスタイルオプションを個別に編集することで、電子メールのレスポンシブデザインを微調整できます。 例えば、余白とパディングを調整したり、小さいフォントサイズまたは大きいフォントサイズを使用したり、ボタンを変更したり、電子メールのモバイルバージョンに固有の異なる背景色を適用したりできます。
モバイルビューでは、すべてのスタイルオプションを使用できます。 電子メールデザイナーのスタイル設定は、「電子メールスタイルの編 集」セクションに表示され ます。
  1. 電子メールを作成し、コンテンツの編集を開始します。 詳しくは、「新規での電子メール コンテンツのデザイン」を参照してください
  2. 専用のモバイルビューにアクセスするには、ボタンを選択 Switch to mobile view します。
    電子メールのモバイルバージョンが表示されます。 デスクトップビューで定義されたすべてのコンポーネントとスタイルが含まれます。
  3. 背景色、配置、パディング、マージン、フォントファミリー、テキストカラーなど、すべてのスタイル設定を個別に編集します。
  4. モバイルビューでスタイル設定を編集する場合、変更はモバイルディスプレイにのみ適用されます。
    例えば、画像のサイズを小さくし、緑の背景を追加して、モバイルビューでパディングを変更します。
  5. モバイルデバイスで表示する際にコンポーネントを非表示にすることができます。 これを行うには、からを Show only on desktop devices 選択しま **Display options**す。 また、デスクトップデバイスでこのコンポーネントを非表示にすることもできます。つまり、このコンポーネントはモバイルデバイスでのみ表示されます。 これを行うには、を選択しま **Show only on mobile devices**す。 例えば、このオプションを使用すると、モバイルデバイスに特定の画像を表示し、デスクトップデバイスに別の画像を表示できます。 このオプションは、モバイルビューまたはデスクトップビューから設定できます。
  6. 標準のデスクトップ Switch to mobile view ビューに戻るには、ボタンをもう一度クリックします。 先ほど行ったスタイルの変更は反映されません。
    唯一の例外は設定 Style inline です。 スタイルのインライン設定の変更は、標準のデスクトップビューにも適用されます。
  7. テキスト編集、新しい画像のアップロード、新しいコンポーネントの追加など、電子メールの構造またはコンテンツに対するその他の変更。 は標準ビューにも適用されます。
    例えば、モバイルビューに切り替え、テキストを編集して画像を置き換えます。
    標準のデスクトップ Switch to mobile view ビューに戻るには、ボタンをもう一度クリックします。 変更が反映されます。
  8. モバイルビューでスタイルを削除すると、デスクトップモードで適用されたスタイルに戻ります。
    例えば、モバイルビューでは、ボタンに緑の背景色を適用します。
  9. デスクトップビューに切り替えて、同じボタンにグレーの背景を適用します。
  10. もう一度モバイルビューに切り替え、設定を無効に Background color します。
    デスクトップビューで定義された背景色が適用されるようになりました。灰色に変わります(空白ではありません)。
    唯一の例外は設定 Border color です。 モバイルビューで無効にした場合、デスクトップビューで境界線の色が定義されていても、境界線が適用されなくなりました。
モバイルビューはフラグメントでは使用でき ません