ドキュメントCampaignCampaign Standard ドキュメント

従来のエディターのメールコンテンツの変換

最終更新日： 2024年7月19日
  • 適用対象：
  • Campaign Standard
  • トピック：
  • 電子メールのデザイン

作成対象：

  • 中級
  • ユーザー

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

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

メモ
互換モードと同様に、HTMLコンポーネントも編集できますが、編集できるオプションは限られています。つまり、インプレース編集のみを実行できます。
重要
この節は、HTMLコードに精通した上級ユーザーを対象としています。

メールコンテンツの準備

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

メール構造の作成

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

HTMLコンテンツを追加

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

メールのスタイルの管理

  1. 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>
    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>

  3. モバイルビューに戻ってコンテンツが正しく表示されていることを確認し、変更を保存します。

ユースケース

従来のエディターで作成されたこのメールを、Email Designer テンプレートに変換してみましょう。

メールのセクションを識別

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

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

メールのHTMLバージョンを確認するには、「Show source」をクリックします。

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

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

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

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

  1. 各 Structure component に HTML component を挿入します。

  2. 各セクションで、「Show source code」をクリックします。

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

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

メールのレンダリングを確認できるようになりました。

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

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

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

詳しくは、 メールのスタイルの管理を参照してください。

従来のメールが、メールDesignerで使用できるようになりました。

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