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

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

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

デフォルトでは、Eメールの​Plain text​バージョンが自動的に生成され、Edit​バージョンと同期されます。

HTMLバージョンに追加されたパーソナライゼーションフィールドとコンテンツブロックも、プレーンテキストバージョンと同期されます。

メモ

プレーンテキストバージョンのコンテンツブロックを使用するには、HTMLコードが含まれていないことを確認します。

HTMLバージョンとは異なるプレーンテキストバージョンを使用するには、電子メールの​Plain text​ビューの​Sync with HTML​スイッチをクリックして、この同期を無効にします。

その後、必要に応じてプレーンテキストバージョンを編集できます。

メモ

同期が無効な状態で​Plain text​バージョンを編集する場合、次に​Sync with HTML​オプションを有効にすると、プレーンテキストバージョンで行った変更がすべてHTMLバージョンに置き換えられます。 Plain text​ビューで行った変更は、HTML​ビューには反映されません。

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

最も上級のユーザーおよびデバッグの場合は、EメールコンテンツをHTMLで直接表示および編集できます。

EメールのHTMLバージョンを編集する方法は2つあります。

  • Edit > HTML​を選択して、電子メール全体のHTMLバージョンを開きます。

  • WYSIWYGインターフェイスで、要素を選択し、「Source code」アイコンをクリックします。

    選択した要素のソースのみが表示されます。 選択した要素が​HTML​コンテンツコンポーネントの場合は、ソースコードを編集できます。 その他のコンポーネントは読み取り専用モードですが、Eメールの完全なHTMLバージョンでは引き続き編集できます。

HTMLのコードを変更すると、Eメールの応答性が損なわれる可能性があります。 必ず​Preview​ボタンを使用してテストしてください。 メッセージのプレビューを参照してください。

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

モバイル表示用のすべてのスタイルオプションを個別に編集することで、Eメールのレスポンシブデザインを微調整できます。 例えば、余白とパディングの調整、より小さいまたは大きいフォントサイズの使用、ボタンの変更、またはモバイルバージョンのEメールに固有の様々な背景色の適用を行うことができます。

すべてのスタイルオプションは、モバイル表示で使用できます。 Eメールデザイナーのスタイル設定については、このページで既に説明しています。

  1. Eメールを作成し、コンテンツの編集を開始します。 詳しくは、ゼロからのEメールコンテンツのデザインを参照してください。

  2. 専用のモバイルビューにアクセスするには、「Switch to mobile view」ボタンを選択します。

    Eメールのモバイルバージョンが表示されます。 デスクトップビューで定義されたすべてのコンポーネントとスタイルが含まれます。

  3. 背景色、整列、パディング、マージン、フォントファミリー、テキスト色など、すべてのスタイル設定を個別に編集します。

  4. モバイル表示でスタイル設定を編集すると、変更はモバイル表示にのみ適用されます。

    例えば、画像のサイズを小さくし、緑の背景を追加して、モバイルビューでのパディングを変更します。

  5. モバイルデバイスで表示する際に、コンポーネントを非表示にすることができます。 これをおこなうには、Display options​から​Show only on desktop devices​を選択します。

    また、デスクトップデバイスでこのコンポーネントを非表示にすることもできます。つまり、このコンポーネントはモバイルデバイスでのみ表示されます。 これをおこなうには、Show only on mobile devices​を選択します。

    例えば、このオプションを使用すると、モバイルデバイスで特定の画像を表示し、デスクトップデバイスで別の画像を表示できます。

    このオプションは、モバイル表示またはデスクトップ表示から設定できます。

  6. Switch to mobile view​ボタンをもう一度クリックして、標準のデスクトップビューに戻ります。 先ほど行ったスタイルの変更は反映されません。

    メモ

    唯一の例外は​Style inline​設定です。 スタイルのインライン設定の変更は、標準のデスクトップビューにも適用されます。

  7. テキスト編集、新しい画像のアップロード、新しいコンポーネントの追加など、Eメールの構造やコンテンツに対するその他の変更。 は標準ビューにも適用されます。

    例えば、モバイル表示に切り替え、テキストを編集して画像を置き換えます。

  8. Switch to mobile view​ボタンをもう一度クリックして、標準のデスクトップビューに戻ります。 変更が反映されます。

  9. モバイルビューでスタイルを削除すると、デスクトップモードで適用されたスタイルに戻ります。

    例えば、モバイル表示では、ボタンに緑の背景色を適用します。

  10. デスクトップビューに切り替え、同じボタンにグレーの背景を適用します。

  11. もう一度モバイル表示に切り替え、Background color​設定を無効にします。

    デスクトップビューで定義された背景色が適用されるようになりました。灰色に変わります(空白にはなりません)。

    唯一の例外は​Border color​設定です。 モバイル表示で無効にした場合、デスクトップ表示で境界線の色が定義されていても、境界線は適用されなくなります。

メモ

モバイルビューはフラグメントでは使用できません。

このページ