ヘルプセンター
/
コンテンツ
/
テンプレート
/
アドバンステンプレート設計

ハイブリッドメールテンプレートの作成方法

推定 1 分で読めます
|
更新日 2025年7月7日 0:00 EST

このページで学べること

Klaviyo のドラッグ&ドロップ エディタと互換性のあるカスタム HTML テンプレート（例：ハイブリッド テンプレート）の作成方法について説明します。次の手順に従うと、ドラッグ＆ドロップ エディタでのみ利用できる機能（例：商品ブロックやユニバーサルコンテンツ ブロック）へのアクセスを維持したまま、完全にカスタムの HTML メールをデザインできます。

カスタム HTML の使用は、技術に詳しいマーケター、またはデベロッパーにアクセスできる方にのみおすすめします。弊社の製品ではカスタム HTML をサポートしていますが、サポートチームでは、このドキュメントで扱っている一般的なガイダンスの提供を超えて、カスタムテンプレートの構築を支援できません。お困りですか？Klaviyo パートナーにお問い合わせください。

データのセキュリティを維持するため、Klaviyo のサポートチームは HTML ファイルを開くことができません。

HTML テンプレートにコードスニペットを追加する

メールテンプレートごとに、以下に示すコードスニペットのいずれか 1 つだけを追加してください。1 つのコードスニペットで複数のドラッグ＆ドロップブロックを追加できるため、複数のコードスニペットを追加する必要はありません。

たとえば、ドラッグ＆ドロップ エディターを使用して画像ブロックと表ブロックを追加する場合は、以下の カスタマイズ可能な画像ブロックを追加する 手順に従ってください。テンプレートを Klaviyo にアップロードしてキャンペーンまたはフローで使用すると、画像ブロックの上または下にブロックを追加できるようになります。

編集可能なテキストブロックを追加
  1. 任意の HTML エディタを使用して、カスタム HTML テンプレートを作成します。
  2. 次のコードスニペットを HTML テンプレートに追加します。テンプレート内でテキストブロックを追加したい場所に配置します。
text
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>
  1. Klaviyo で、[コンテンツ] > [テンプレート]に進みます。
  2. [メール テンプレート] タブを選択します。
  3. [インポート] をクリックします。
  4. テンプレートの名前を入力し、HTML ファイルをアップロードして、インポートします。
  5. テンプレートタブからテンプレートを開くと、Klaviyo の HTML エディタにテンプレートのコードが表示されます。
A hybrid email template's html
A hybrid email template's html
  1. Klaviyo のドラッグ&ドロップ エディターでテンプレートにアクセスするには、キャンペーンまたはフローに追加してください。
  2. テンプレートタイプとして ドラッグ＆ドロップ を選択します。
The drag and drop email option
The drag and drop email option
  1. Hello world! と書かれたテキストブロックに注意してください。これは編集可能なテキストブロックです。
  2. 必要に応じて、追加のブロックをテキストブロックの上または下にドラッグ＆ドロップします。
カスタマイズ可能な画像ブロックを追加
  1. 任意の HTML エディタを使用して、カスタム HTML テンプレートを作成します。
  2. 次のコードスニペットを HTML テンプレートに追加します。テンプレートをインポートした後、画像ブロックを追加したい場所に必ず配置してください。
text
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block"></div>
</td>
  1. 必要に応じて、div 内にプリセット画像を追加できます。その場合、コードは次のようになります。
text
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block">
        <a href="http://klaviyo.com><img src="example.com/my_image.png" alt="My Image" /></a>    </div>
</td>
  1. Klaviyo で、[コンテンツ] > [テンプレート]に進みます。
  2. [メール テンプレート] タブを選択します。
  3. [インポート] をクリックします。
  4. テンプレートの名前を入力し、HTML ファイルをアップロードしてインポートしてください。
  5. テンプレートタブからテンプレートを開くと、Klaviyo の HTML エディタにテンプレートのコードが表示されます。
The hybrid template's HTML
The hybrid template's HTML
  1. Klaviyo のドラッグ＆ドロップエディタでテンプレートにアクセスするには、キャンペーンまたはフローに追加します。コンテンツのステップで、インポートしたテンプレートを選択します。
  2. 画像ブロックには、画像をアップロードするボタン、または含めた画像のいずれかが表示されます。
  3. 必要に応じて、画像ブロックの上または下に追加のブロックをドラッグ＆ドロップします。
Image blocks
Image blocks
ユニバーサルコンテンツブロックを追加

このプロセスは、ユニバーサルコンテンツブロックではサポートされていますが、ユニバーサルセクションではサポートされていません。

  1. 任意の HTML エディタを使用して、カスタム HTML テンプレートを作成します。
  2. 次のコードスニペットを HTML テンプレートに追加します。テンプレートをインポートした後、画像ブロックを追加したい場所に必ず配置してください。
text
<td data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">     <div data-klaviyo-universal-block="block_id_1">&nbsp;<div></td>
  1. block_id_1 をユニバーサルコンテンツブロックの ID に置き換えます。ユニバーサルコンテンツブロックの ID を見つけるには：
    1. [コンテンツ] > [ユニバーサルコンテンツ] に移動します。
    2. ユニバーサルコンテンツのブロックを開いて編集します。
    3. このページの URL は、次の形式になります：https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID。
    4. URL からブロック ID をコピーします。
  2. Klaviyo で、[コンテンツ] > [テンプレート]に進みます。
  3. [メール テンプレート] タブを選択します。
  4. [インポート] をクリックします。
  5. テンプレートの名前を入力し、HTML ファイルをアップロードしてインポートしてください。
  6. テンプレートタブからテンプレートを開くと、Klaviyo の HTML エディタにテンプレートのコードが表示されます。
The hybrid template's HTML
The hybrid template's HTML
  1. Klaviyo のドラッグ＆ドロップエディタでテンプレートにアクセスするには、キャンペーンまたはフローに追加します。コンテンツのステップで、インポートしたテンプレートを選択します。
  2. ユニバーサルコンテンツのブロックに注意してください。

単一の コードスニペット で複数の ユニバーサルコンテンツ ブロックを追加できます。そのためには、上記のコードスニペット内で、最初の div 要素の直後に別の div 要素を追加し、別のブロックの ID を使用してください。

別の種類のブロック（例：商品ブロック、表ブロック）を追加します。
  1. 任意の HTML エディタを使用して、カスタム HTML テンプレートを作成します。
  2. 次のコードスニペットを HTML テンプレートに追加します。テンプレートをインポートした後、ブロックを追加したい場所に配置します。
text
<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>
  1. Klaviyo で、[コンテンツ] > [テンプレート]に進みます。
  2. [メール テンプレート] タブを選択します。
  3. [インポート] をクリックします。
  4. テンプレートの名前を入力し、HTML ファイルをアップロードしてインポートしてください。
  5. テンプレートタブからテンプレートを開くと、Klaviyo の HTML エディタにテンプレートのコードが表示されます。
The template's html
The template's html
  1. Klaviyo のドラッグ＆ドロップエディタでテンプレートにアクセスするには、キャンペーンまたはフローに追加します。コンテンツのステップで、インポートしたテンプレートを選択します。
  2. Hello world! と書かれたテキストブロックに注意してください。別のブロック（例: 商品ブロック）をこのブロックの下にドラッグしてください。
  3. テキスト ブロックを削除し、必要に応じて追加のカスタム ブロックを追加します。
Add blocks
Add blocks

サンプルのハイブリッドメールテンプレートコード

以下の例は、テキスト ブロック用のハイブリッド コードスニペットを含む機能的な HTML ファイルを示しています。このコードを使用して、ハイブリッド エディターの機能をテストします。

A simple hybrid email
This is a very simple HTML email
Hello world!
{% unsubscribe %}
" style="--bg: #2d2d30;--headerBg: #1e1e1e;--border: #3e3e3e;--filenameText: #cccccc;" data-astro-cid-pyzdmkoo>
text
  <html>
  <head>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>A simple hybrid email</title>
    <style>
      body {
        background-color: #f6f6f6;
        font-family: sans-serif;
        margin: 20px;
      }
      .main {
        background: #ffffff;
        border-radius: 3px;
        width: 100%;
      }
      .container {
        margin: 0 auto !important;
        width: 600px;
      }
      .wrapper {
        box-sizing: border-box;
        padding: 15px;
      }
      table {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <table class="main">
        <tr>
          <td class="wrapper">This is a very simple HTML email</td>
        </tr>
        <tr>
          <td class="wrapper">
            <table>
              <tr>
                <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
                  <div class="klaviyo-block klaviyo-text-block">
                    Hello world!
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td class="wrapper">{% unsubscribe %}</td>
        </tr>
      </table>
    </div>
  </body>
</html>

絵文字とハイブリッド メールテンプレート

2024年2月時点で、すべての絵文字がすべての Klaviyo Email エディタ（ドラッグ&ドロップ エディタ、ハイブリッド エディタ、テキストのみエディタ、カスタム HTML エディタ）でサポートされています。

達成できること

これらの手順を完了すると、カスタム HTML テンプレートの特定の領域を追加および編集できるようになります。初期ブロックが配置された場所を除き、カスタムテンプレートのどの領域でもドラッグ＆ドロップ ブロックを追加または編集することはできない点にご注意ください。

その他のリソース

この記事は役に立ちましたか？
この記事へのフィードバックには、このフォームのみを使用してください。 サポートへの連絡方法.

Klaviyo の詳細を見る

コミュニティ
同業者、パートナー、Klaviyo のエキスパートとつながり、インスピレーションを得たり、インサイトを共有したり、あらゆる質問への回答を得たりできます。
コミュニティにアクセスする
パートナー
特定のタスクのサポートや継続的なマーケティング管理のために、Klaviyo 認定エキスパートを雇いましょう。
パートナーを雇う
サポート

アカウントからサポートにアクセスしてください。

メールサポート (無料トライアルと有料アカウント) 24 時間 365 日利用可能

チャット/バーチャル アシスタント
 利用可否は地域およびプランタイプによって異なります

ログイン