Show Menu
トピック×

レガシーエディターの電子メールコンテンツの変換

電子メールデザイナーで作業する際に開始が発生した場合は、レガシーエディターで作成した電子メールHTMLから、再利用可能なテンプレートやフラグメントを作成してください。
この使用例では、HTML電子メールを使用して電子メールデザイナーテンプレートを作成し、電子メールデザイナーでHTMLコンポーネントに分割できます。
互換モードと同様に、HTMLコンポーネントは次の制限付きオプションで編集できます。 インプレースエディションのみ実行できます。
この節は、HTMLコードに詳しい上級ユーザー向けです。

電子メールコンテンツの準備

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

電子メール構造の作成

  1. を開き、空の電子メールコンテンツ Email Designer を作成します。
  2. ボディレベルの属性を設定します。 背景色、幅など For more on this, see Editing email styles .
  3. 断追加面を持つ構造コンポーネントの数と同じ数 詳しくは、「電子メール構造の 編集 」を参照してください。

追加HTMLコンテンツ

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

電子メールのスタイルの管理

  1. Switch to Mobile view . 詳しくは、 この節 を参照してください。
  2. これを修正するには、ソースコードモードに切り替えて、スタイルセクションを新しいスタイルセクションにコピー&ペーストします。 次に例を示します。
    <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>
    
    
    この後に、別のカスタムスタイルタグでスタイルを追加してください。
    電子メールデザイナで生成された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 プレートに変換してみましょう。

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

この電子メールの11のセクションを特定できます。
HTMLのどのセクションかを識別するために、要素を選択できます。
電子メールのHTMLバージョンを表示するには、をクリックし Show source ​ます。

電子メールテンプレートとその構造の作成

  1. 電子メールのレイアウトを Structure components 反映してドラッグ&ドロップします。
  2. 必要な回数だけ繰り返します。 11個の構造コンポーネントを作る必要があります

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

  1. の各ファイル HTML component にを挿入し Structure component ます。
  2. 各セクションで、をクリックし Show source code ます。
  3. HTMLセクションを挿入します。
  4. クリック Save .
これで、電子メールのレンダリングを確認できます。

モバイル表示に合わせたスタイルの管理

  1. CSS要素を挿入して、電子メールがモバイル表示に適していることを確認します。
  2. ソースコードに切り替え、スタイルセクションを新しいスタイルセクションにコピー&ペーストします。
詳しくは、「電子メールのスタイルの 管理 」を参照してください。
従来の電子メールが電子メールデザイナーで使用できるようになりました。