最終更新日: 2025年8月22日
ドラッグ＆ドロップエリアを使用することで、開発者はコンテンツエディター内でレイアウト、スタイル、コンテンツを直接変更できる、ページ内のセクションとグローバルパーシャルを作成できます。ドラッグ＆ドロップエリアのセットアップ手順については、ドラッグ＆ドロップエリアの作成チュートリアルをご覧ください。 ドラッグ＆ドロップエリアは、12列のレスポンシブグリッドを基盤としています。ドラッグ＆ドロップタグでは、列と行を指定するクラス名を指定して、マークアップをレンダリングします。そのようなクラス名を対象とするスタイルシートを追加する必要があります。実装可能なレイアウトスタイルの例については、HubSpotのCMSボイラープレート（英語）を参照してください。スタイルシートをテンプレートに追加するには、{{ require_css() }}を使用します。
**注：**現時点では、ブログ記事とEメールテンプレートでドラッグ＆ドロップエリアを使用することはできません。

​
dnd_area

ドラッグ＆ドロップエリアは、ウェブページの一部の構造、デザイン、コンテンツを編集可能にするためのコンテナーです。ドラッグ＆ドロップエリアの既定のコンテンツは、{% dnd_area %}タグの本文として提供します。 モジュール自体にドラッグ＆ドロップエリアを含めることはできません。モジュールへの追加コンテンツを統一するインターフェイスを制作担当者に提供するには、繰り返し可能なフィールドとグループを代わりに使用してください。 dnd_areaタグには、以下のパラメーターを指定することができます。
パラメータータイプ説明
class文字列dnd_areaを囲むdivに追加するクラス。
label文字列エディター上のサイドバーのラベルとして使用されます。
{% dnd_area "unique_name", class="main" %}

{% end_dnd_area %}
dnd_areaタグには、dnd_sectionタグを含めることもできます。
**注：**コンテンツ制作担当者は、テンプレートで「dnd_area」タグが使用されているかどうかに応じて、ページのテンプレートを同じタイプの別のテンプレートと入れ替えることができます。
  • ビジュアルドラッグ＆ドロップ レイアウト エディター上で作成したテンプレートは、「dnd_area」タグの有無に関係なく、他のドラッグ＆ドロップテンプレートまたはコードテンプレートと入れ替えることができます。
  • 「dnd_area」タグが使用されているコードテンプレートは、「dnd_area」タグが使用されている他のコードテンプレートとのみ入れ替えることができます。
  • 「dnd_area」タグが使用されていないコードテンプレートは、「dnd_area」タグが使用されていない他のコードテンプレートとのみ入れ替えることができます。

​
dnd_section

{% dnd_section %}は、最上位の行で、{% dnd_area %}タグ内にネストする必要があります。セクションはテンプレートとして定義してから、dnd_areaに含めることもできるため、テンプレートの迅速な作成に最適です。 dnd_sectionタグには、以下のパラメーターを指定することができます。
パラメータータイプ説明
background_colorディクショナリー背景色の指定に使用するディクショナリー。文字列としても指定できます。
background_imageディクショナリー背景画像の指定に使用するディクショナリー。
background_linear_gradientディクショナリー線形グラデーションの背景の指定に使用するディクショナリー。
full_widthブール値セクションを全幅にするか、または内側のコンテナーの幅によって制限するかを指定するブール値。
marginディクショナリーcm、mm、Q、in、pc、pt、px、em、ex、ch、rem、lh、vw、vh、vmin、vmax、%でのマージン値の指定に使用するディクショナリー。単位を指定しない場合、既定のpxが適用されます。
max_width整数ラッピングディクショナリーでコンテンツの最大幅を設定するピクセル値。
paddingディクショナリーcm、mm、Q、in、pc、pt、px、em、ex、ch、rem、lh、vw、vh、vmin、vmax、%でのパディング値の指定に使用するディクショナリー。単位を指定しない場合、既定のpxが適用されます。
vertical_alignment文字列子コンテンツの垂直方向の位置合わせ。使用可能なオプションには、以下のものがあります。
  • TOP
  • MIDDLE
  • BOTTOM
注：dnd_sectionタグあたり1つのbackgroundパラメーターのみ使用できます。
{% dnd_section
background_image={
"backgroundPosition": "MIDDLE_CENTER",
"backgroundSize": "cover",
"imageUrl": "https://example.com/path/to/image.jpg"
},
margin={
"top": 32,
"bottom": 32
},
padding={
"top": "1em",
"bottom": "1em",
"left": "1em",
"right": "1em"
},
max_width=1200,
vertical_alignment="MIDDLE"
%}

{% end_dnd_section %}
dnd_sectiondnd_sectionタグには、以下のタグも含めることができます。
  • dnd_column
  • dnd_module

​
dnd_column

{% dnd_column %}は、垂直方向の構成要素であり、親の行で定義された1つ以上のレイアウト列を占めます。 このHubLタグは、{% dnd_area %}タグ内にネストする必要があります。 dnd_columnタグには、以下のパラメーターを指定することができます。
パラメータータイプ説明
background_colorディクショナリー背景色の指定に使用するディクショナリー。
background_imageディクショナリー背景画像の指定に使用するディクショナリー。
background_linear_gradientディクショナリー線形グラデーションの背景の指定に使用するディクショナリー。
marginディクショナリーcm、mm、Q、in、pc、pt、px、em、ex、ch、rem、lh、vw、vh、vmin、vmax、%でのマージン値の指定に使用するディクショナリー。単位を指定しない場合、既定のpxが適用されます。
max_width整数ラッピングディクショナリーでコンテンツの最大幅を設定するピクセル値。
paddingディクショナリーcm、mm、Q、in、pc、pt、px、em、ex、ch、rem、lh、vw、vh、vmin、vmax、%でのパディング値の指定に使用するディクショナリー。単位を指定しない場合、既定のpxが適用されます。
vertical_alignment文字列子コンテンツの垂直方向の位置合わせ。使用可能なオプションには、以下のものがあります。
  • TOP
  • MIDDLE
  • BOTTOM
注：dnd_columnタグあたり1つのbackgroundパラメーターのみ使用できます。
{% dnd_column
offset=0,
width=12,
background_color={
r: 255,
g: 0,
b: 0,
a: 1
},
margin={
"top": "1em",
"bottom": "1em"
},
%}

{% end_dnd_column %}
dnd_columnタグには、dnd_rowを含めることもできます。

​
dnd_row

{% dnd_row %}は横方向の構成要素であり、列とモジュールを配置できる、ネストされた12列レイアウトのグリッドを作成します。 このHubLタグは、{% dnd_area %}タグ内にネストする必要があります。 dnd_rowタグには、以下のパラメーターを含めることができます。
パラメータータイプ説明
background_colorディクショナリー背景色の指定に使用するディクショナリー。
background_imageディクショナリー背景画像の指定に使用するディクショナリー。
background_linear_gradientディクショナリー線形グラデーションの背景の指定に使用するディクショナリー。
marginディクショナリーcm、mm、Q、in、pc、pt、px、em、ex、ch、rem、lh、vw、vh、vmin、vmax、%でのマージン値の指定に使用するディクショナリー。単位を指定しない場合、既定のpxが適用されます。
max_width整数ラッピングディクショナリーでコンテンツの最大幅を設定するピクセル値。
paddingディクショナリーcm、mm、Q、in、pc、pt、px、em、ex、ch、rem、lh、vw、vh、vmin、vmax、%でのパディング値の指定に使用するディクショナリー。単位を指定しない場合、既定のpxが適用されます。
vertical_alignment文字列子コンテンツの垂直方向の位置合わせ。使用可能なオプションには、以下のものがあります。
  • TOP
  • MIDDLE
  • BOTTOM
注：dnd_rowタグあたり1つのbackgroundパラメーターのみ使用できます。
{% dnd_row
background_color={
r: 123,
g: 123,
b: 123,
a: 1.0
},
margin={
"top": 20,
"bottom": 200
},
padding={
"top": 20,
"bottom": 200,
"left": 20,
"right": 20
}
%}

{% end_dnd_row %}
dnd_rowタグには、以下のタグも含めることができます。
  • dnd_column
  • dnd_module

​
dnd_module

{% dnd_module %}は、div内に囲まれたモジュールであり、レイアウト、スタイル、コンテンツを追加できます。このモジュールを指定するには、そのパスを参照します。HubSpotの既定のモジュールを指定することも（@hubspot//名前空間を使用）、独自に作成したモジュールを、デザインマネージャーのファイルツリー内のパスで指定することもできます。 このHubLタグは、{% dnd_area %}タグ内にネストする必要があります。 dnd_moduleタグには、以下のパラメーターを指定することができます。
パラメータータイプ説明
path文字列モジュールへのパス
horizontal_alignment文字列横方向の位置。値LEFT、CENTER、RIGHTを使用できます。
offset整数12列グリッド上での位置を示す0からの値。
width整数12列グリッドを占めるカラムの数。
flexbox_positioning文字列**推奨されません。使用しないでください。**代わりに、horizontal_alignmentを行やセクションのvertical_alignmentを併せて使用します。
モジュールのフレックスボックスの位置。垂直方向の位置、次に水平方向の位置を示す以下の文字列に対応しています。
  • TOP_LEFT
  • TOP_CENTER
  • TOP_RIGHT
  • MIDDLE_LEFT
  • MIDDLE_CENTER
  • MIDDLE_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_CENTER
  • BOTTOM_RIGHT
上記のdnd_moduleパラメーターのいずれかに一致するフィールド名がある古いモジュールを使用していますか？フィールドグループの場合と同様に、fieldsパラメーターを使用して既定値を渡すことができます。
{% dnd_module
path="@hubspot/rich_text",
offset=0,
width=8,
%}
{% module_attribute "html" %}
<h1>Hello, world!</h1>
{% end_module_attribute %}
{% end_dnd_module %}

​
背景

列、セクション、行のdnd要素に背景を設定するには、background_image、background_linear_gradient、background_colorを使用できます。

​
background_color

列、セクション、行のdndタグは、背景色をサポートしています。ドラッグ＆ドロップ要素の既定の背景色を設定するには、background_colorパラメーターを使用します。これは文字列のパラメーターであり、以下の例に示されている形式を含めることができます。 
{% dnd_section %}
  // Hex Value (both 3 and 6 char length)
  {% dnd_column background_color="#F7F7F7" %}
  {% end_dnd_column %}
  {% dnd_column background_color="#FFF" %}
  {% end_dnd_column %}
// Both RGB and RGBA
  {% dnd_column background_color="rgb(255,255,255)" %}
  {% end_dnd_column %}
  {% dnd_column background_color="rgba(0,0,0,.25)" %}
  {% end_dnd_column %}
{% end_dnd_section %}

​
background_linear_gradient

列、セクション、行のdnd要素は、背景の線形グラデーションをサポートしています。既定のグラデーションを設定するには、background_linear_gradientパラメーターを使用します。このパラメーターで想定される値はディクショナリーです。現時点でサポートされるのは色の開始点と終了点のみです。
パラメータータイプ説明
direction文字列グラデーションの方向を設定します。
  • to bottom
  • to top
  • to left
  • to right
colorsarray色を表す文字列の配列。現在、始点と終点を示す2つの値をサポートしています。値は、以下の形式の文字列として指定します。
  • RGB
  • RGBA
  • 3 char hex
  • 6 char hex
  • 8 char hex
{% dnd_section
  background_linear_gradient={
    "direction": "to bottom",
    "colors": [
      "#1EB6C3",
      "#2A2859"
    ]
  }
  %}
  {% dnd_module path="@hubspot/rich_text" width="6" %}
  {% end_dnd_module %}
{% end_dnd_section %}

​
background_image

列、セクション、および行のdnd要素は、背景画像をサポートしています。既定の背景画像を指定するには、background_imageパラメーターを使用します。このパラメーターで想定される値はディクショナリーです。
キー型説明
backgroundPosition文字列画像の背景位置。最初に垂直方向、次に水平方向の位置を示す文字列をサポートしています。
  • TOP_LEFT
  • TOP_CENTER
  • TOP_RIGHT
  • MIDDLE_LEFT
  • MIDDLE_CENTER
  • MIDDLE_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_CENTER
  • BOTTOM_RIGHT
backgroundSize文字列画像に使用されるCSS背景サイズのプロパティー。
サポートされる値：
  • cover
  • contain
  • auto
imageUrl文字列画像への絶対URL。
{% dnd_section
  background_image = {
      "backgroundPosition": "MIDDLE_CENTER",
      "backgroundSize": "cover",
      "imageUrl": "https://www.example.com/bg-image.jpg"
    },
%}
  {% dnd_module path="@hubspot/rich_text" width="6" %}
  {% end_dnd_module %}

{% end_dnd_section %}

​
dndのスタイルパラメーターからページへの変換方法

背景、マージン、パディングなど、スタイルのパラメーターを使用した場合、クラス名はセクション、列、行、モジュールに基づいて自動的に割り出されます。割り当てたプロパティー値は、自動的に作成されたクラス名に追加され、その後生成されたCSSコードがページ内の</body>終了タグの前にある<style>タグに配置されます。 ブレークポイントごとに異なるドラッグ＆ドロップのスタイルを設定して、外観をレスポンシブにすることができます。