ドラッグ＆ドロップエリアのHubLタグ

ドラッグ＆ドロップエリアを使用することで、開発者はコンテンツエディター内でレイアウト、スタイル、コンテンツを直接変更できる、ページ内のセクションとグローバルパーシャルを作成できます。ドラッグ＆ドロップエリアのセットアップ手順については、ドラッグ＆ドロップエリアの作成チュートリアルをご覧ください。ドラッグ＆ドロップエリアは、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 %}

<div class="container-fluid main">
<div class="row-wrapper">
<div class="row-fluid">
<div
class="span12 widget-span widget-type-cell "
style=""
data-widget-type="cell"
data-x="0"
data-w="12"
></div>
</div>
</div>
</div>

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 %}

<div
class="row-fluid-wrapper row-depth-1 row-number-1 unique_name-row-0-background-image dnd-section unique_name-row-0-max-width-section-centering unique_name-row-0-margin unique_name-row-0-padding"
>
<div class="row-fluid "></div>
<!--end row-->
</div>
<!--end row-wrapper -->

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 %}

<div
class="span12 widget-span widget-type-cell unique_name-column-1-margin unique_name-column-1-background-color unique_name-column-1-vertical-alignment dnd-column"
style=""
data-widget-type="cell"
data-x="0"
data-w="12"
></div>
<!--end widget-span -->

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 %}

<div
class="row-fluid-wrapper row-depth-1 row-number-1 main-row-0-padding main-row-0-background-color main-row-0-margin"
>
<div class="row-fluid "></div>
</div>

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 %}

<div
class="span8 widget-span widget-type-custom_widget"
style=""
data-widget-type="custom_widget"
data-x="0"
data-w="12"
>
<div
id="hs_cos_wrapper_main-module-1"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="module"
>
<span
id="hs_cos_wrapper_module-1_"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="rich_text"
>
<h1>Hello, world!</h1>
</span>
</div>
</div>

背景

列、セクション、行の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`
`colors`	array	色を表す文字列の配列。現在、始点と終点を示す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>タグに配置されます。ブレークポイントごとに異なるドラッグ＆ドロップのスタイルを設定して、外観をレスポンシブにすることができます。

​dnd_area

​dnd_section

​dnd_column

​dnd_row

​dnd_module

​背景

​background_color

​background_linear_gradient

​background_image

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

dnd_area

dnd_section

dnd_column

dnd_row

dnd_module

背景

background_color

background_linear_gradient

background_image

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