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