ドラッグ＆ドロップエリアを作成する

サポートされる製品

次のいずれかの製品またはそれ以上が必要です。

Marketing Hub -Professional

Content Hub -Professional

ドラッグ＆ドロップエリアは、ページエディターから直接変更できる空のコンテナーとして機能するテンプレート内のセクションです。ドラッグ＆ドロップエリアをテンプレート内に組み込むことで、制作担当者はテンプレートに組み込まれた静的モジュールに頼るのではなく、必要に応じてページエディター内でモジュールを追加、管理できるようになります。

制作担当者はドラッグ＆ドロップエリアを空のドロップ領域として使用できるだけでなく、開始点として機能するさまざまなモジュール、レイアウト、コンテンツをドラッグ＆ドロップエリアに事前に配置することもできます。このチュートリアルでは、簡単なドラッグ＆ドロップエリアの設定について説明します。ドラッグ＆ドロップエリアの開発者向けリソースについては、実装のベストプラクティスとしてのボイラープレート（英語）と、ドラッグ＆ドロップエリアHubLタグのリファレンスドキュメントをご覧ください。

注: コンテンツ制作担当者は、テンプレートで「dnd_area」タグが使用されているかどうかに応じて、ページのテンプレートを同じタイプの別のテンプレートと入れ替えることができます。

ビジュアルレイアウトエディター上で作成したドラッグ＆ドロップテンプレートは、「dnd_area」タグの有無に関係なく、他のドラッグ＆ドロップテンプレートまたはコードテンプレートと入れ替えることができます。
「dnd_area」タグが使用されているコードテンプレートは、「dnd_area」タグが使用されている他のコードテンプレートとのみ入れ替えることができます。
「dnd_area」タグが使用されていないコードテンプレートは、「dnd_area」タグが使用されていない他のコードテンプレートとのみ入れ替えることができます。

ページのテンプレートが入れ替わっても、最初のテンプレートのドラッグ＆ドロップエリアに追加した既存のコンテンツは保持されます。

新規HTMLテンプレートを作成する

新しいHTMLテンプレートを作成して、ドラッグ＆ドロップセクションのHubLおよびHTMLを含めます。

ドラッグ＆ドロップエリアは、12列のレスポンシブグリッドを基盤としています。ドラッグ＆ドロップタグでは、列と行を指定するクラス名を指定して、マークアップをレンダリングします。これらのクラス名をターゲットとするスタイルシートは、開発者が追加する必要があります。実装可能なレイアウトスタイルの例については、HubSpotのCMSボイラープレート（英語）を参照してください。スタイルシートをテンプレートに追加するには、{{ require_css() }}を使用します。

ドラッグ＆ドロップエリアを作成する

dnd_areaは、ウェブページの一部の構造、デザイン、およびコンテンツを編集可能にするためのコンテナーです。ドラッグ＆ドロップエリアのデフォルトのコンテンツは、dnd_areaタグの本文として提供します。このタグ自体によって、制作担当者がモジュールをコンテンツ制作ツール内にドラッグするためのドロップ領域が生成されます。

{% dnd_area "body_dnd_area" %}
	<!-- generates an empty drag and drop area drop-section -->
{% end_dnd_area %}

モジュールでセクションを作成する

dnd_sectionは最上位の行であり、常にdnd_areaの直接の子でなければなりません。セクションでは、制作担当者がコンテンツ制作ツール内のセクションに指定するスタイルのデフォルト値を制御するさまざまなパラメーターがサポートされます。例として、次のコードでは背景画像（background_image）を含むセクションを作成します。このセクションはvertical-alignmentパラメーターを基準に中央に配置し、子コンテンツのフィールドの最大幅を1000pxに設定しています。ドラッグ＆ドロップのHubLタグでサポートされる全てのパラメーターについては、ドラッグ＆ドロップエリアのHubLタグに関する資料をご参照ください。セクションのコンテンツを事前に配置しておくために、コードにはパスを参照してモジュールを組み込むdnd_moduleタグも含まれています。この例では、pathパラメーターで設定されているHubSpotのデフォルトのリッチテキストモジュールをdnd_moduleで取り込んでいます。リッチテキストモジュールのデフォルト値は、module_attributeタグを使用して指定します。

{% dnd_area "body_dnd_area" %}
    {% dnd_section
        background_image = {
            'backgroundPosition': 'MIDDLE_CENTER',
            'backgroundSize': 'cover',
            'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
          },
          max_width=1000,
          vertical_alignment='MIDDLE'
    %}
        {% dnd_module path='@hubspot/rich_text' %}
            {% module_attribute "html"%}
                This is your main headline.
                Use this space to tell everyone about what you have to offer.
            {% end_module_attribute %}
        {% end_dnd_module %}
    {% end_dnd_section %}
{% end_dnd_area %}

結果として、制作担当者がコンテンツエディター内で編集できるモジュールを含むドラッグ＆ドロップエリアになります。dnd_sectionにmax_widthを設定する場合、コンテンツにどのような影響があるかにご注意ください。

複数のモジュールを含める

複数のモジュールを含めるには、複数のdnd_moduleタグを使用します。12列グリッドに基づくoffsetおよびwidthパラメーターを設定することで、以下のようにリッチテキストモジュールの横に画像モジュールを配置できます。

{% dnd_area "body_dnd_area" %}
    {% dnd_section
        background_image={
            'backgroundPosition': 'MIDDLE_CENTER',
            'backgroundSize': 'cover',
            'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
        },
        max_width=1000,
        vertical_alignment='MIDDLE'
    %}
        {% dnd_module path='@hubspot/rich_text', width=8, offset=0, label="Rich Text" %}
            {% module_attribute "html"%}
            	<h1>This is your main headline.</h1>

Use this space to tell everyone about what you have to offer.
            {% end_module_attribute %}
        {% end_dnd_module %}
        {% dnd_module path='@hubspot/linked_image',
          width=4,
          offset=8,
          img={
            "src": "https://www.dragndrop.com/placeholder-image.jpg",
            "alt": "Stock placeholder image"
          }
        %}
        {% end_dnd_module %}
    {% end_dnd_section %}
{% end_dnd_area %}

また、ページには編集可能な画像モジュールとドラッグハンドルも用意されているため、制作担当者がモジュールの幅とオフセットを変更できます。dnd_sectionにvertical_alignmentを設定すると、コンテンツが垂直方向の中央に配置される点にご注意ください。

セクションに追加された画像モジュールを表示するページエディターのスクリーンショット

列と行を組み込む

ドラッグ＆ドロップエリアをさらに細かく設定するには、dnd_rowタグとdnd_columnタグを使用して行と列を組み込むことができます。行と列はコンテンツエディターのセクションと同様に機能します。制作担当者は行と列をドラッグして操作し、複製、削除、スタイル設定を行うことも可能です。

{% dnd_area "body_dnd_area" %}
  {% dnd_section
    background_image={
        'backgroundPosition': 'MIDDLE_CENTER',
        'backgroundSize': 'cover',
        'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
    },
    max_width=1000,
    vertical_alignment='MIDDLE'
  %}
    {% dnd_module path='@hubspot/linked_image',
      width=6,
      img={
        "src": "https://www.dragndrop.com/placeholder-image.jpg",
        "alt": "Stock placeholder image"
      }
    %}
    {% end_dnd_module %}
    {% dnd_column width=6, offset=6 %}
      {% dnd_row
        padding={
            'bottom': 15
        }
      %}
        {% dnd_module path='@hubspot/rich_text' %}
          {% module_attribute "html"%}
              <h1>This is your main headline.</h1>

Use this space to tell everyone about what you have to offer.
          {% end_module_attribute %}
        {% end_dnd_module %}
      {% end_dnd_row %}
      {% dnd_row %}
        {% dnd_module path='@hubspot/form' %}
        {% end_dnd_module %}
      {% end_dnd_row %}
    {% end_dnd_column %}
  {% end_dnd_section %}
{% end_dnd_area %}

これで制作担当者は、モジュールやセクションに加えて、特定の行や列に対するスタイル設定とレイアウト制御ができるようになりました。

2列の行を表示するページエディターのスクリーンショット。左側に画像モジュール、右側にリッチテキストモジュールとフォームモジュール

ドラッグ＆ドロップコンポーネントの汎用スタイルを設定する

ドラッグ＆ドロップエリア、セクション、列、行、モジュールのさまざまなコンポーネント全てには、CSSを使用してスタイル設定できるクラスがあります。これらのコンポーネントの編集可能なスタイルとオプションは、HubLではなくCSSを使用して設定できます。例えば、デフォルトのパディングはCSSでdnd_sectionsに設定できます。

.dnd-section {
  padding: 80px 20px;
}

ドラッグ＆ドロップエリアコンポーネントの汎用CSSセレクターは、.dnd-section、.dnd-column、.dnd-row、および.dnd-moduleです。これらのdndプレフィックスが付いたクラス以外、マークアップの実際のグリッドクラス名はブートストラップ2の名前に基づいています。これは、ドラッグ＆ドロップでブートストラップ2を使用する必要があることを意味するわけではありません。ページにdnd_areaを追加する場合、開発者には、グリッドが機能するようなスタイルを指定する責任があります。実装可能なレイアウトスタイルの例については、HubSpotのCMSボイラープレート（英語）をご参照ください。スタイルシートをテンプレートに追加するには、{{ require_css() }}を使用します。

​関連チュートリアル

関連チュートリアル