プレーンテキスト、HTMLおよびモバイルメール形式の編集 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 ボタンを使用してテストしてください。 メッセージのプレビューを参照してください。
モバイルレンダリング用メールのデザイン 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 唯一の例外は Style inline 設定です。 スタイルのインライン設定の変更は、標準のデスクトップビューにも適用されます。 -
テキスト編集、新しい画像のアップロード、新しいコンポーネントの追加など、メールの構造やコンテンツに対するその他の変更も、標準ビューに適用されます。
例えば、モバイル表示に切り替え、テキストを編集して画像を置き換えます。
-
もう一度Switch to mobile view ボタンをクリックして、標準のデスクトップビューに戻ります。 変更が反映されます。
-
モバイルビューでスタイルを削除すると、デスクトップモードで適用されたスタイルに戻ります。
例えば、モバイルビューでは、ボタンに緑色の背景色を適用します。
-
デスクトップビューに切り替え、同じボタンにグレーの背景を適用します。
-
もう一度モバイルビューに切り替え、Background color設定を無効にします。
デスクトップビューで定義された背景色が適用されるようになりました。グレーになります（空白ではありません）。
唯一の例外は Border color 設定です。 モバイルビューで無効にすると、境界線の色がデスクトップビューで定義されていても、境界線は適用されなくなります。