プレーンテキスト、HTML、モバイルの E メールフォーマットの編集 plain-text-and-html-modes
E メールデザイナーを使用すると、E メールの複数のレンダリングを編集できます。 テキスト版の E メールを生成し、E メールのHTMLソースを編集し、モバイル表示用の E メールをデザインできます。
E メールのテキストバージョンの生成 generating-a-text-version-of-the-email
デフォルトでは、 Plain text 電子メールのバージョンが自動的に生成され、 Edit バージョン。
パーソナライゼーションバージョンに追加されたHTMLフィールドとコンテンツブロックも、プレーンテキストバージョンと同期されます。
プレーンテキストバージョンとHTMLバージョンを異ならせるには、 Sync with HTML スイッチを切り替える Plain text 電子メールの表示。
その後、必要に応じてプレーンテキストバージョンを編集できます。
HTMLでの E メールコンテンツソースの編集 editing-an-email-content-source-in-html
最も上級のユーザーおよびデバッグの場合は、電子メールコンテンツをHTMLで直接表示および編集できます。
E メールのバージョンを編集するには、2 つのHTML方法があります。
-
選択 Edit > HTML をクリックして、e メール全体のHTMLバージョンを開きます。
-
WYSIWYG インターフェイスで、要素を選択し、 Source code アイコン。
選択した要素のソースのみが表示されます。 選択した要素が HTML コンテンツコンポーネント。 他のコンポーネントは読み取り専用モードですが、E メールのフルHTMLバージョンでも編集できます。
コードのHTMLを変更すると、E メールの応答性が損なわれる可能性があります。 必ず、 Preview 」ボタンをクリックします。 メッセージのプレビューを参照してください。
モバイルレンダリング用の E メールのデザイン switching-to-mobile-view
モバイル表示用のすべてのスタイルオプションを個別に編集することで、E メールのレスポンシブデザインを微調整できます。 例えば、余白やパディングの調整、より小さいまたは大きいフォントサイズの使用、ボタンの変更、電子メールのモバイルバージョンに応じた異なる背景色の適用をおこなうことができます。
すべてのスタイルオプションをモバイル表示で使用できます。 E メールデザイナーのスタイル設定については、このページで既に説明しています。
-
E メールを作成し、コンテンツの編集を開始します。 詳しくは、 新規での E メールコンテンツのデザイン.
-
専用のモバイルビューにアクセスするには、 Switch to mobile view 」ボタンをクリックします。
E メールのモバイルバージョンが表示されます。 デスクトップビューで定義されたすべてのコンポーネントとスタイルが含まれます。
-
背景色、整列、パディング、余白、フォントファミリー、テキストカラーなど、すべてのスタイル設定を個別に編集する。
-
モバイル表示でスタイル設定を編集すると、変更はモバイル表示にのみ適用されます。
例えば、画像のサイズを小さくし、緑の背景を追加して、モバイル表示でのパディングを変更します。
-
モバイルデバイスで表示する際に、コンポーネントを非表示にできます。 それには、「 」を選択します。 Show only on desktop devices から Display options.
また、デスクトップデバイスでこのコンポーネントを非表示にすることもできます。つまり、このコンポーネントはモバイルデバイスでのみ表示されます。 それには、「 」を選択します。 Show only on mobile devices.
例えば、このオプションを使用すると、モバイルデバイスには特定の画像を表示し、デスクトップデバイスには別の画像を表示できます。
このオプションは、モバイル表示またはデスクトップ表示から設定できます。
-
もう一度「 Switch to mobile view ボタンをクリックして標準のデスクトップビューに戻ります。 先ほど行ったスタイルの変更は反映されません。
note note NOTE 唯一の例外は、 Style inline 設定。 スタイルのインライン設定の変更は、標準のデスクトップビューにも適用されます。 -
テキスト編集、新しい画像のアップロード、新しいコンポーネントの追加など、E メールの構造またはコンテンツに対するその他の変更。 は標準ビューにも適用されます。
例えば、モバイル表示に戻り、テキストを編集して、画像を置き換えます。
-
もう一度「 Switch to mobile view ボタンをクリックして標準のデスクトップビューに戻ります。 変更が反映されます。
-
モバイル表示でスタイルを削除すると、デスクトップモードで適用されたスタイルに戻ります。
例えば、モバイル表示では、ボタンに緑の背景色を適用します。
-
デスクトップビューに切り替え、同じボタンにグレーの背景を適用します。
-
もう一度モバイル表示に切り替え、今すぐ無効にします。 Background color 設定。
デスクトップビューで定義された背景色が適用されるようになりました。空白ではなく、グレーに変わります。
唯一の例外は、 Border color 設定。 モバイル表示で無効にした場合、デスクトップ表示で境界線の色が定義されている場合でも、境界線は適用されなくなりました。