レガシーエディターの E メールコンテンツの変換 converting-an-html-content

E メールデザイナーの使用を開始し、レガシーエディターで作成した E メールHTMLから、再利用可能なテンプレートとフラグメントを構築します。

この使用例では、HTMLE メールを使用し、E メールデザイナーでHTMLコンポーネントに分割することで、E メールデザイナーテンプレートを作成できます。

NOTE
互換モードと同様に、HTMLコンポーネントは、制限付きオプションで編集できます。インプレース編集のみ実行できます。
IMPORTANT
この節は、HTMLコードに詳しい上級ユーザー向けです。

E メールコンテンツを準備中

  1. HTMLE メールを選択
  2. HTMLE メールを分割するセクションを特定します。
  3. HTMLから異なるブロックを切り取ります。

電子メール構造を作成する

  1. を開きます。 Email Designer 空の e メールコンテンツを作成します。
  2. ボディレベルの属性(背景色、幅など)を設定します。 詳しくは、メールスタイルの編集を参照してください。
  3. 構造コンポーネントをセクションと同じ数だけ追加します。 詳しくは、メール構造の編集を参照してください。

HTMLコンテンツを追加

  1. 各構造コンポーネントにHTMLコンポーネントを追加します。 詳しくは、フラグメントとコンポーネントの追加を参照してください。
  2. すべてのコンポーネントにHTMLをコピー&ペーストします。

E メールのスタイルを管理 manage-the-style-of-your-email

  1. 切り替え先 Mobile view. 詳しくは、この節を参照してください。

  2. これを修正するには、ソースコードモードに切り替えて、スタイルセクションを新しいスタイルセクションにコピー&ペーストします。 例:

    code language-none
    <style type="text/css">
    a {text-decoration:none;}
    body {min-width:100% !important; margin:0 auto !important; padding:0 !important;}
    img {line-height:100%; text-decoration:none; -ms-interpolation-mode:bicubic;}
    ...
    </style>
    
    note note
    NOTE
    別のカスタムスタイルタグで、この後にスタイルを必ず追加してください。
    E メールデザイナーで生成された CSS を変更しないでください。
    • <style data-name="default" type="text/css">(##)</style>
    • <style data-name="supportIOS10" type="text/css">(##)</style>
    • <style data-name="mediaIOS8" type="text/css">(##)</style>
    • <style data-name="media-default-max-width-500px" type="text/css">(##)</style>
    • <style data-name="media-default--webkit-min-device-pixel-ratio-0" type="text/css">(##)</style>
  3. モバイル表示に戻って、コンテンツが正しく表示されていることを確認し、変更を保存します。

ユースケース

従来のエディターで作成したこのメールを、 Email Designer テンプレート。

E メールのセクションを特定する

この電子メールで 11 のセクションを特定できます。

要素のどのセクションかを識別するには、HTMLを選択します。

E メールのHTMLバージョンを確認するには、 Show source.

E メールテンプレートとその構造を作成します。

  1. ドラッグ&ドロップ Structure components メールのレイアウトを反映します。

  2. 必要な回数だけ繰り返します。 11 個の構造コンポーネントを作成する必要があります。

HTMLコンテンツコンポーネントの挿入

  1. 挿入: HTML componentStructure component .

  2. 各セクションで、 Show source code .

  3. 「HTML」セクションを挿入します。

  4. Save」をクリックします。

これで、E メールのレンダリングを確認できます。

モバイルビューに合わせたスタイルの管理

  1. CSS 要素を挿入して、電子メールがモバイル表示に適していることを確認します。

  2. ソースコードに切り替え、スタイルセクションを新しいスタイルセクションにコピー&ペーストします。

詳しくは、 E メールのスタイルを管理.

従来の E メールを E メールデザイナーで使用できるようになりました。

recommendation-more-help
3ef63344-7f3d-48f9-85ed-02bf569c4fff