---
title: モジュールをドラッグアンドドロップできるテンプレートの作り方｜Hubspot CMS Hub
description: よくあるタイプのQA用アコーディオンのモジュールの作り方。CMS Hub（HubSpot CMS）：レベル1
image: https://www.hub-ken.net/hubfs/Canva%20images/accordion-dnd.png
---

[Skip to content](https://www.hub-ken.net/lab/simple-template#main-content)

[![logo_skills](https://www.hub-ken.net/hubfs/logo_skills.svg)](https://www.hub-ken.net/)

- [Hub研とは](https://www.hub-ken.net/about)
- [Hub研 Lab.](https://www.hub-ken.net/lab)

Open main navigation

Close main navigation

- [Hub研とは](https://www.hub-ken.net/about)
- [Hub研 Lab.](https://www.hub-ken.net/lab)
- [お問い合わせ](https://www.hub-ken.net/contact)

[お問い合わせ](https://www.hub-ken.net/contact)

 2024年5月月2日

# モジュールをドラッグアンドドロップできるテンプレートの作り方｜Hubspot CMS Hub

[Shinobu Minabe](https://www.hub-ken.net/lab/author/shinobu-minabe)

共有： [facebook-f icon](http://www.facebook.com/share.php?u=https://www.hub-ken.net/lab/simple-template) [linkedin-in icon](http://www.linkedin.com/shareArticle?mini=true&url=https://www.hub-ken.net/lab/simple-template) [twitter icon](https://twitter.com/intent/tweet?url=https://www.hub-ken.net/lab/simple-template) [pinterest-p icon](http://pinterest.com/pin/create/link/?url=https://www.hub-ken.net/lab/simple-template) [envelope icon](mailto:?body=https://www.hub-ken.net/lab/simple-template)

ドラッグアンドドロップできるシンプルなテンプレートの作り方を説明します。

## テンプレートの仕様

- ウェブサイトページ用のテンプレート（テンプレートはブログ用等も作ることができます）
- モジュールをドラッグアンドドロップで配置することが可能

## テンプレート作成手順

Hubspot管理画面ヘッダー【マーケティング】→【ファイルとテンプレート】→【デザインツール】を開きます。

![accordion-1](https://www.hub-ken.net/hs-fs/hubfs/hubkenlab-image/accordion-1.png?width=860&name=accordion-1.png)

【ファイル】→【新規ファイル】を選択します。または、オレンジ色の【新規ファイルを作成】を押下。

![template-2](https://www.hub-ken.net/hs-fs/hubfs/hubkenlab-image/template-2.png?width=860&name=template-2.png)

「新規ファイル」と書かれたモーダルウィンドウが開くので、コンポーネントの【テンプレート】を選択します。

![template-3](https://www.hub-ken.net/hs-fs/hubfs/hubkenlab-image/template-3.png?width=600&name=template-3.png)

【次へ】ボタンを押下します。

![template-4](https://www.hub-ken.net/hs-fs/hubfs/hubkenlab-image/template-4.png?width=600&name=template-4.png)

「新規 HTML &nbsp HUBLテンプレートのセットアップ」が開きます。  
テンプレートにチェックを入れ（デフォルトでチェックが入っていると思います）、テンプレートタイプは「ページ」、ファイル名に「implement」と入力します。  
必要に応じて、これから作るテンプレートファイルの保管場所（フォルダ）を設定します。  
作成ボタンを押下します。

![template-5](https://www.hub-ken.net/hs-fs/hubfs/hubkenlab-image/template-5.png?width=600&name=template-5.png)

上記で設定したテンプレートファイルの編集画面が表示されます。  
自動的にソースコードが入った状態で表示されます。

![template-6](https://www.hub-ken.net/hs-fs/hubfs/hubkenlab-image/template-6.png?width=860&name=template-6.png)

自動的に入るソースコードだとモジュールのドラッグアンドドロップが出来ないので、下記の内容に書き換えます。  
書き換えたら、【変更を公開】ボタンを押下し、テンプレートを公開します。

![template-7](https://www.hub-ken.net/hs-fs/hubfs/hubkenlab-image/template-7.png?width=860&name=template-7.png)

これでテンプレートが出来ました。  
※プレビューで確認すると真っ白なページが表示されますが、とくにスタイル設定をしていないから白いページになっているだけなので問題有りません。

## Related posts

[![](https://www.hub-ken.net/hubfs/Canva%20images/websitepage.png)](https://www.hub-ken.net/lab/simple-websitepage)

## [ウェブサイトページの作り方。｜Hubspot CMS Hub](https://www.hub-ken.net/lab/simple-websitepage)

[Shinobu Minabe](https://www.hub-ken.net/lab/author/shinobu-minabe) 

 2022年1月月7日

...

[Read more](https://www.hub-ken.net/lab/simple-websitepage)

[![](https://www.hub-ken.net/hubfs/Canva%20images/accordion-level2-2.png)](https://www.hub-ken.net/lab/accordion-2-2)

## [QA用アコーディオンモジュールの作り方【レベル2-後半】Hubspot CMS Hub](https://www.hub-ken.net/lab/accordion-2-2)

[Shinobu Minabe](https://www.hub-ken.net/lab/author/shinobu-minabe) 

 2022年1月月19日

このページは、[...](https://www.hub-ken.net/lab/accordion-2-1)

[Read more](https://www.hub-ken.net/lab/accordion-2-2)

[![](https://www.hub-ken.net/hubfs/Canva%20images/%E3%82%A2%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA%E3%83%B3%E3%81%AEQA%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E8%A8%AD%E7%BD%AE.png)](https://www.hub-ken.net/lab/accordion-1)

## [QA用アコーディオンモジュールの作り方【レベル1】Hubspot CMS Hub](https://www.hub-ken.net/lab/accordion-1)

[Shinobu Minabe](https://www.hub-ken.net/lab/author/shinobu-minabe) 

 2022年1月月7日

...

[Read more](https://www.hub-ken.net/lab/accordion-1)

- [Hub研とは](https://www.hub-ken.net/about)
- [Hub研Lab.](https://www.hub-ken.net/lab)
- [お問い合わせ](https://www.hub-ken.net/contact)

---

[![](https://www.hub-ken.net/hubfs/logo_skills.svg)](https://www.hub-ken.net/)

運営会社：[株式会社VIVIBOND](https://vivibond.com)

Copyright © 2026, 株式会社VIVIBOND++