レガシーエディターの E メールコンテンツの変換 converting-an-html-content
E メールデザイナーの使用を開始し、レガシーエディターで作成した E メールHTMLから、再利用可能なテンプレートとフラグメントを構築します。
この使用例では、HTMLE メールを使用し、E メールデザイナーでHTMLコンポーネントに分割することで、E メールデザイナーテンプレートを作成できます。
E メールコンテンツを準備中
- HTMLE メールを選択
- HTMLE メールを分割するセクションを特定します。
- HTMLから異なるブロックを切り取ります。
電子メール構造を作成する
- を開きます。 Email Designer 空の e メールコンテンツを作成します。
- ボディレベルの属性(背景色、幅など)を設定します。 詳しくは、メールスタイルの編集を参照してください。
- 構造コンポーネントをセクションと同じ数だけ追加します。 詳しくは、メール構造の編集を参照してください。
HTMLコンテンツを追加
- 各構造コンポーネントにHTMLコンポーネントを追加します。 詳しくは、フラグメントとコンポーネントの追加を参照してください。
- すべてのコンポーネントにHTMLをコピー&ペーストします。
E メールのスタイルを管理 manage-the-style-of-your-email
-
切り替え先 Mobile view. 詳しくは、この節を参照してください。
-
これを修正するには、ソースコードモードに切り替えて、スタイルセクションを新しいスタイルセクションにコピー&ペーストします。 例:
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>
-
モバイル表示に戻って、コンテンツが正しく表示されていることを確認し、変更を保存します。
ユースケース
従来のエディターで作成したこのメールを、 Email Designer テンプレート。
E メールのセクションを特定する
この電子メールで 11 のセクションを特定できます。
要素のどのセクションかを識別するには、HTMLを選択します。
E メールのHTMLバージョンを確認するには、 Show source.
E メールテンプレートとその構造を作成します。
-
ドラッグ&ドロップ Structure components メールのレイアウトを反映します。
-
必要な回数だけ繰り返します。 11 個の構造コンポーネントを作成する必要があります。
HTMLコンテンツコンポーネントの挿入
-
挿入: HTML component 各 Structure component .
-
各セクションで、 Show source code .
-
「HTML」セクションを挿入します。
-
「Save」をクリックします。
これで、E メールのレンダリングを確認できます。
モバイルビューに合わせたスタイルの管理
-
CSS 要素を挿入して、電子メールがモバイル表示に適していることを確認します。
-
ソースコードに切り替え、スタイルセクションを新しいスタイルセクションにコピー&ペーストします。
詳しくは、 E メールのスタイルを管理.
従来の E メールを E メールデザイナーで使用できるようになりました。