ドキュメント Campaign Campaign Standard ドキュメント

従来のエディターのメールコンテンツの変換 converting-an-html-content

Last update: Fri Jul 19 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
電子メールのデザイン

作成対象：

中級
ユーザー

メールDesignerの使用を開始し、従来のエディターで作成したメールエディターから、再利用可能なテンプレートとフラグメントをHTMLします。

このユースケースを使用すると、HTMLのメールを使用し、メールDesignerでHTMLのコンポーネントに分割することで、メールDesignerテンプレートを作成できます。

NOTE

互換モードと同様に、HTMLコンポーネントも編集できますが、編集できるオプションは限られています。つまり、インプレース編集のみを実行できます。

IMPORTANT

この節は、HTMLコードに精通した上級ユーザーを対象としています。

メールコンテンツの準備

HTMLメールを選択します。
HTMLメールを分割するセクションを特定します。
HTMLから様々なブロックを切り取ります。

メール構造の作成

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

HTMLコンテンツを追加

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

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

Mobile view に切り替えます。詳しくは、この節を参照してください。

これを修正するには、ソースコードモードに切り替えて、「スタイル」セクションをコピーして新しい「スタイル」セクションに貼り付けます。例：

code language-none

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>`

<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
この後に、必ず別のカスタムスタイルタグでスタイルを追加してください。
メールDesignerで生成された 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>`