> ## Documentation Index > Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt > Use this file to discover all available pages before exploring further. # カスタムEメールテンプレートでのドラッグ＆ドロップエリアの指定 > カスタムEメールテンプレートでドラッグ＆ドロップエリアを指定する方法について説明します。 export const SupportedProducts = ({marketing, sales, service, cms, marketingLevel, salesLevel, serviceLevel, cmsLevel}) => { const translations = { header: "サポートされる製品", description: "次のいずれかの製品またはそれ以上が必要です。", productNames: { marketing: "Marketing Hub", sales: "Sales Hub", service: "Service Hub", cms: "Content Hub" }, tiers: { free: "無料ツール", starter: "Starter", professional: "Professional", enterprise: "Enterprise" } }; const translateTier = tier => { if (!tier) return ''; const lowerTier = tier.toLowerCase(); return translations.tiers[lowerTier] || tier; }; const products = [{ name: marketing ? translations.productNames.marketing : '', level: translateTier(marketingLevel), icon: "https://mintlify-assets.b-cdn.net/Icons/marketing-bolt.svg", alt: "Marketing Hub" }, { name: sales ? translations.productNames.sales : '', level: translateTier(salesLevel), icon: "https://mintlify-assets.b-cdn.net/Icons/sales-star.svg", alt: "Sales Hub" }, { name: service ? translations.productNames.service : '', level: translateTier(serviceLevel), icon: "https://mintlify-assets.b-cdn.net/Icons/service-heart.svg", alt: "Service Hub" }, { name: cms ? translations.productNames.cms : '', level: translateTier(cmsLevel), icon: "https://mintlify-assets.b-cdn.net/Icons/content-play.svg", alt: "Content Hub" }].filter(product => product.name && product.level); if (products.length === 0) return null; return
{translations.description}
{products.map((product, index) =>
{product.alt} {product.name} - {product.level}
)}
; }; [ドラッグ＆ドロップエリア](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview)を使用することで、開発者はEメールエディター内でレイアウト、スタイル、コンテンツを直接変更できる、カスタム Eメール テンプレートのセクションを作成できます。これにより、開発者はグローバル構造を使用してテンプレート作成数を減らすことができ、作成されたEメールテンプレートを使用してコンテンツ制作担当者は個々の目的に応じてさまざまなレイアウトのページを作成できるようになります。 **注**: カスタムEメールテンプレートに含めることができるドラッグ＆ドロップエリアは1つだけです。 新しいHTMLテンプレートを作成して、ドラッグ＆ドロップセクションのHubLおよびHTMLコードを含めます。 * HubSpotアカウントで［コンテンツ］＞［デザインマネージャー］の順に進みます。 * 新しいファイルを作成するには、左のサイドバーで［ファイル］＞［新規ファイル］をクリックします。 * ダイアログボックスで、［今日は何を作成しますか？］の下にあるドロップダウンメニューをクリックし、［HTML + HubL］を選択します。 * ［次へ］をクリックします。 * ［テンプレートタイプ］ドロップダウンメニューをクリックし、［Eメール］を選択します。 * テンプレートの**名前**を入力します。 * テンプレートの保存場所を更新するには、［ファイルの場所］の下にある［変更］をクリックし、テンプレートを作成する新しいフォルダーを選択します。 * ［作成］をクリックします。 スタイル設定と互換性の目的でEメールテンプレートの``セクションに含めることができる必須のタグと任意のタグを以下でご確認ください。 ### 必須タグ `{{ dnd_area_stylesheet }}` このタグは、次の機能を提供します。 * 関連付けられたメディアクエリーを追加する * Outlookの既知のスタイル設定に関する問題を修正する * マージンとパディングをリセットする * アンチエイリアス処理を有効にする * 特定のCSSを追加する ### 任意のタグ 全ての主要なEメールクライアントで一貫性のあるテンプレートの表示を確保するために、以下の任意のHubLタグをテンプレートに含めることもできます。 * `{{ email_header_includes }}`：このタグはCSSをテンプレートに挿入して、一貫したスタイルをレンダリングし、一般的なスタイルの問題を修正し、EメールのHTMLにメタデータを追加します。このHubLタグを解析すると、Eメールの``内に次の内容が追加されます。 | パラメーター | 説明 | | ------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | `` | iOS11によりEメールが自動的にスケーリングされないようにします。 | | `` | ブラウザーやEメールクライアントに、さまざまな文字をどのように解釈するかを伝えます。 | | `` | Windows Phone 7.5でCSS3とメディアクエリーを有効にし、可能な限り最適なモードでコンテンツをレンダリングするようにInternet Explorerに通知し、EメールをレンダリングするInternet Explorerのバージョンをブラウザーが選択できるようにします。 | | `` | 表示可能領域をデバイス画面の幅に設定して、Eメールをレスポンシブにします。 | * `{{ reset_css_stylesheet }}`：このタグを含めると、Outlookにおける多くのスタイルの問題が修正されると同時に、Eメールの余白とパディングがリセットされます。 * `{{ outlook_background_snippet }}`：このタグは、関連する背景CSSルールを指定している場合に、Outlookの背景画像または色を設定します。 `{{ dnd_area_stylesheet }}` HubLタグとその他の任意のタグをテンプレートの``に追加したら、テンプレート本文に`dnd_area`を設定できます。 ### 空のドラッグ＆ドロップエリアを作成する `dnd_area`は、ウェブページの一部の構造、デザイン、およびコンテンツを編集可能にするためのコンテナーです。ドラッグ＆ドロップエリアのデフォルトのコンテンツは、`dnd_area`タグの本文で指定します。 ドラッグ＆ドロップエリアは、`
`または``で囲むことができます。ドラッグ＆ドロップエリアの制限の1つは、最小幅が624ピクセルに設定されており、この値をオーバーライドできないことです。 このタグの独自機能により、制作担当者がモジュールをEメールエディター内にドラッグするためのドロップエリアが生成されます。 次のコードは、空のドラッグ＆ドロップエリアを指定します。 ```hubl theme={null} {% dnd_area "main" %} {% end_dnd_area %} ``` ### 空の列を含むドラッグ＆ドロップエリアを作成する `dnd_section`フィールドと`dnd_column`フィールドを使用してドラッグ＆ドロップエリアをカスタマイズし、デフォルトのセクションと列を指定することもできます。 例えば、以下のHubLコードでは、3列のドラッグ＆ドロップエリアを指定します。 ```hubl theme={null} {% dnd_area "main" %} {% dnd_section padding={'top': 25, 'bottom': '20} %} {% dnd_column width=4 %} {% end_dnd_column %} {% dnd_column width=4 %} {% end_dnd_column %} {% dnd_column width=4 %} {% end_dnd_column %} {% end_dnd_section %} {% end_dnd_area %} ``` `dnd_row` HubLタグは、現在Eメールテンプレートでサポートされていません。 セクションにあらかじめコンテンツを取り込むには、`dnd_module`タグを使用して、取り込むモジュールのパスを参照します。モジュールをセクションと列内に追加し、ドラッグ＆ドロップエリアにコンテンツが事前に取り込まれるようにする必要があります。 以下の例ではデフォルトのHubSpotモジュールが参照されていますが、デザインツールのファイルツリー内のパスを指定して、自分で作成したモジュールを含めることもできます。 `dnd_module`のデフォルト値を指定するには、`module_attribute`タグを使用できます。 ```hubl theme={null} {% dnd_area "main", full_width=False %} {% dnd_section padding={ 'top':'25', 'bottom':'20' }, full_width=False %} {% dnd_column width=6 %} {% dnd_module path='@hubspot/image_email', img={ 'alt':'NavyLogo', 'height':38, 'src':'email_dnd_template_images/NavyLogo.png', 'width':120 }, alignment='center', hs_enable_module_padding=True, hs_wrapper_css={ 'padding-bottom':'10px', 'padding-left':'20px', 'padding-right':'20px', 'padding-top':'10px' } %} {% end_dnd_module %} {% end_dnd_column %} {% dnd_column width=6 %} {% end_dnd_column %} {% end_dnd_section %} {% end_dnd_area %} ``` ドラッグ＆ドロップのHubLタグ（`dnd_area`、`dnd_section`、`dnd_column`など）のそれぞれには、デフォルトのスタイルを指定したり、その他の動作（Eメールエディターのサイドバーに表示するラベルなど）を指定したりするために使用できるさまざまなパラメーターが含まれています。 各タグで使用できるパラメーターの詳細については、各タグの以下のリンクを確認してください。 * [dnd\_area](/cms/reference/hubl/tags/dnd-areas#dnd-area) * [dnd\_section](/cms/reference/hubl/tags/dnd-areas#dnd-section) * [dnd\_column](/cms/reference/hubl/tags/dnd-areas#dnd-column) * [dnd\_module](/cms/reference/hubl/tags/dnd-areas#dnd-module)