Show Menu
トピック×

プレーンテキスト、HTMLおよびモバイル電子メール形式の編集

電子メールデザイナーを使用すると、電子メールの複数のレンダリングを編集できます。 電子メールのテキストバージョンを生成し、電子メールのHTMLソースを編集し、モバイルビュー用の電子メールをデザインできます。

電子メールのテキストバージョンの生成

デフォルトでは、電子メ Plain text ールのバージョンは自動的に生成され、バージョンと同期さ Edit れます。
HTMLバージョンに追加されたパーソナライゼーションフィールドとコンテンツブロックもプレーンテキストバージョンと同期されます。
プレーンテキストバージョンでコンテンツブロックを使用する場合は、HTMLコードが含まれていないことを確認します。
HTMLバージョンとは異なるプレーンテキストバージョンを使用するには、電子メールの表示から切り替えボタンをクリックし Sync with HTML て、この同期を無 Plain text 効にすることができます。
その後、必要に応じてプレーンテキストバージョンを編集できます。
同期が無効な間に Plain text バージョンを編集する場合、次回このオプションを有効にすると、プレーンテキストバージョンで行ったすべての変更が Sync with HTML HTMLバージョンに置き換えられます。 ビューで行った変 Plain text 更をビューに反映でき HTML ません。

HTMLでの電子メールコンテンツソースの編集

最も上級のユーザーおよびデバッグの場合は、電子メールコンテンツをHTMLで直接表示および編集できます。
電子メールのHTMLバージョンを編集するには、次の2つの方法があります。
  • /を選 Edit 択し HTML て、電子メール全体のHTMLバージョンを開きます。
  • WYSIWYGインターフェイスで、要素を選択し、アイコンをクリック Source code します。
    選択した要素のソースのみが表示されます。 選択した要素がコンテンツコンポーネントの場合は、ソースコードを編 HTML 集できます。 その他のコンポーネントは読み取り専用モードですが、電子メールの完全なHTMLバージョンでは編集できます。
HTMLをコードに変更すると、電子メールの応答性が損なわれる可能性があります。 ボタンを使用してテストを行ってく Preview ださい。 詳しくは、メッ セージのプレビューを参照してくださ い。

モバイルレンダリング用の電子メールのデザイン

モバイルディスプレイ用のすべてのスタイルオプションを個別に編集することで、電子メールのレスポンシブデザインを微調整できます。 例えば、余白とパディングを調整したり、小さいフォントサイズまたは大きいフォントサイズを使用したり、ボタンを変更したり、電子メールのモバイルバージョンに固有の異なる背景色を適用したりできます。
モバイルビューでは、すべてのスタイルオプションを使用できます。 電子メールデザイナーのスタイル設定は、このページで事前に表示されています。
  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 です。 モバイルビューで無効にした場合、デスクトップビューで境界線の色が定義されていても、境界線が適用されなくなりました。
モバイルビューはフラグメントでは使用でき ません