ドラッグ&ドロップテンプレート

Last updated:

ドラッグ&ドロップテンプレートは、新しいテンプレートには推奨されません。ドラッグ&ドロップテンプレートはテーマの一部として使用できないため、テーマフィールドのようなテーマ機能と、テーマモジュールをサポートしません。また、CMS Hub Starterではサポートされないため、代わりにdnd_areaを使用してください。ドラッグ&ドロップテンプレートでは、CMSの一部の新しい機能(アクセス権設定(メンバーシップ)ドラッグ&ドロップエリア再利用可能セクション、GraphQLなど)がサポートされません。拡張性が十分ではなく、制作担当者や開発者にとってコードテンプレートほどの利便性が得られません。代わりに、ドラッグ&ドロップエリアを有する、コード化されたHTML+HubLテンプレートの利用をお勧めします。開発者やマーケティング担当者にとっての利便性が向上します。CMSの利用を始めるには、コードテンプレートを使用して構築されているHubSpot Theme Boilerplate(テーマボイラープレート)をぜひご参照ください。

APPLICABLE PRODUCTS
  • Marketing Hub
    • Professional or Enterprise
  • CMS Hub
    • Professional or Enterprise

ドラッグ&ドロップテンプレートは、技術的な知識がなくてもHubSpotのCMS上で簡単にウェブサイトを構築できるように設計されています。ドラッグ&ドロップテンプレートには視覚的なテンプレートビルダーが採用されていますが、内部ではHTML+HubLが生成されます。 

ビジュアルビルダーの動作に必要なHTML出力はHubSpotによって制御されていて、開発者がその構造化部分を直接制御することはできません。さらに、layout.cssファイルがページに読み込まれて、ブートストラップ2に基づく基本的な12列グリッドが有効になります。これにより、ドラッグ&ドロップテンプレートを使用したウェブサイトは既定で、コンテンツの行が縦に積み重なったレスポンシブ対応になります。レスポンシブデザインの複雑なカスタマイズを行う場合には、独自のレスポンシブスタイルを追加可能です。

ドラッグ&ドロップテンプレートはデザインマネージャー内で構築し、APIまたはローカル開発ツールを使用する場合にはJSONで表記します。ドラッグ&ドロップテンプレートの編集方法としては、その性質上、デザイン マネージャー インターフェイスを使用する方法が推奨されます。コーディングが必要な場合は、バージョン管理機能を使用するか、使い慣れたローカルツールを使用して編集します。HTML+HubLコードテンプレートにより、最適な開発体験が提供されます。HTML+HubLテンプレートのdnd_area機能でも、ビジュアル コンテンツ エディター内で制作担当者が作業できるので、デザインマネージャーのドラッグ&ドロップインターフェイスよりも優れた利便性を備えています。 

ドラッグ&ドロップ テンプレート ビルダー

ドラッグ&ドロップテンプレートを作成するには、デザインマネージャーを開き、ファインダー内で新しいファイルを作成し、作成するテンプレートとテンプレートのタイプを選択します。

ドラッグ&ドロップテンプレートには、モジュール、グループ、グローバルグループ、フレキシブルカラムというさまざまな構成要素があります。

詳しくはドラッグ&ドロップ テンプレート ビルダーの使用方法をご覧ください。

モジュール

モジュールは、ページ上で編集できる再利用可能な要素です。モジュールは、HTML+HubLテンプレートのフラグメント、CSS、JS、およびフィールドで構成されます。制作担当者は、モジュールをフレキシブルカラムとdnd_areasの内部に配置できます。制作担当者によるウェブサイトのコンテンツ管理の基本機能です。モジュールを作成することで、数多くの機能、検索、画像ギャラリー、メニュー、複雑なマーケティングアニメーション、電卓、製品比較など、想像力次第でさまざまな処理が可能になり、制作担当者の利便性の向上につながります。フィールドは、制作担当者が出力を制御する手段になります。モジュールはドラッグ&ドロップテンプレートに使用できるだけではなく、HubSpotのCMSにおける重要な構成要素です。ドラッグ&ドロップテンプレートでは、モジュールフィールドの既定値をインスペクター内で設定できます。詳しくはモジュールについてをご参照ください。

モジュールを示すデザイン マネージャー インターフェイス

グループ

グループは他のグループやモジュールのためのラッパーであり、CSSクラスやラッピングHTMLを使用できます。グループの配置とサイズ設定を円滑化する、レイアウトクラスを伴うラッピングHTMLとして機能します。グループには内部専用名を付けることができます。このようにデザインマネージャー上でモジュールをグループ化することで、ページのさまざまな部分が識別しやすくなります。例として、サイドバーやバナーが挙げられます。

新しいサイトではHTML+HubLファイルが推奨されるため、ドラッグ&ドロップエリアの列、セクション、行によってグループの目的の大半が置き換えられます。

さらに開発者は、パーシャルおよびグローバルパーシャルを作成し、ドラッグ&ドロップエリアに加えて自由形式のコードも含められます。

ドラッグ&ドロップテンプレートでは、ドラッグ&ドロップエリア、パーシャル、およびグローバルパーシャルがサポートされません。

デザインマネージャーでサイドバーグループが選択されているスクリーンショット

グローバルグループ

グローバルグループは、編集されると、特定のページだけでなくウェブサイト全体に影響するグループです。グローバルグループは、複数のテンプレートに配置可能で、通常はウェブサイトのヘッダーやフッターに使用されます。グローバルグループはパーシャルに似ていますが、ドラッグ&ドロップテンプレートによって適用される構造に限定されます。必要に応じてHTML+HubLファイルに埋め込むこともできますが、その場合はグローバルパーシャルを使用する方が理にかなっています。

ヘッダーとフッターのグローバルグループを示すデザイン マネージャー インターフェイス

フレキシブルカラム

フレキシブルカラムは特別なタイプのグループです。モジュールの既定のセットを含めることができますが、制作担当者はその中のモジュールを追加、削除、移動することが可能です。フレキシブルカラムを利用すると、1次元的にモジュールを上から下に並べ替えることができます。dnd_areaタグとは異なりフレキシブルカラムでは、モジュールを格納できるセクションもスタイル機能もサポートされません。フレキシブルカラムは、ドラッグ&ドロップテンプレートに限定されません。HTML+HubLテンプレートで使用できるHubLタグがあります。詳しくはドラッグ&ドロップテンプレートにフレキシブルカラムを追加する方法をご確認ください。

一般的に、ドラッグ&ドロップエリアの使用が推奨されます。多くの状況で使いやすく、フレキシブルカラムに相当する機能を全て利用できるためです。

ただしサイドバーのように、フレキシブルカラムを使用する方が便利な場合もあります。メインのコンテンツ領域としては、ドラッグ&ドロップエリアが非常に柔軟です。

デザインマネージャーでのメイン コンテンツ グループの選択を示すスクリーンショット

フレキシブルカラムを使用する理由を考えてみてください。ウェブサイトは変化を伴い、長期間にわたって構築および維持されます。例えば、企業のホームページで特定の製品が大きく扱われることがありますが、マーケティングニーズの変化につれて頻繁な変更が必要になる場合もあります。フレキシブルカラム内のコンテンツは制作担当者による追加、削除、変更が可能なので、マーケティング担当者にとって煩雑な作業ではありません。開発者は軽微なページ調整に対応する代わりに、本質的な開発作業に集中できます。

同じように、1つのウェブサイトのページごとに異なる構造が必要な場合があるかもしれません。こうしたページもフレキシブルカラムというコントロールを利用すれば、マーケティング担当者がカスタムモジュールを使用して作成できます。

ドラッグ&ドロップテンプレートにカスタムコードを追加する

複数の追加方法が用意されており、 中でも最も基本的な方法はカスタムモジュールです。ただし、モジュールやグループのラッパーコードの追加が必要になる場合があります。そのためには、モジュールまたはグループをクリックして、それをインスペクターで表示し、ラッピングHTMLフィールドを検索します。そのフィールドにHTMLを追加します。

また、HTMLのheadへのコード追加や、</body>の直前へのコード追加が必要になる場合もあります。テンプレートを開いた状態で、何も選択していないことを確かめてください。インスペクターには、テンプレート自体のフィールドが表示されます。この状態で、スタイルシートやJavaScriptファイルへのリンクを追加したり、headまたは</body>タグの直前にHTMLを追加したりできます。

追加するにはインスペクターを使用します。インスペクターには、スタイルシート、JavaScript<head>マークアップなどのための、テンプレート側のフィールドがあります。

デザインマネージャーのカスタム コード インスペクター パネル

参考になりましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。