---
title: QA用アコーディオンモジュールの作り方【レベル1】Hubspot CMS Hub
description: よくあるタイプのQA用アコーディオンのモジュールの作り方。CMS Hub（Hubspot CMS）：レベル1
image: 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
---

[Skip to content](https://www.hub-ken.net/lab/accordion-1#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)

 2022年1月月7日

# QA用アコーディオンモジュールの作り方【レベル1】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/accordion-1) [linkedin-in icon](http://www.linkedin.com/shareArticle?mini=true&url=https://www.hub-ken.net/lab/accordion-1) [twitter icon](https://twitter.com/intent/tweet?url=https://www.hub-ken.net/lab/accordion-1) [pinterest-p icon](http://pinterest.com/pin/create/link/?url=https://www.hub-ken.net/lab/accordion-1) [envelope icon](mailto:?body=https://www.hub-ken.net/lab/accordion-1)

Webサイトでよく見かけるQA要素。コンパクトなアコーディオンタイプなら、ページが長くならず、スッキリ見せることができます。  
今回はレベル1の名にふさわしく、超・超、簡易的なモジュールを作成します。はっきり言って汎用性は低いですが、基本的な知識も書いていますので「最近CMS Hubを始めたばかりなんだよね」という方にもオススメの内容となっています。  
（次回は【レベル2】と称して、もう少し汎用性の高いアコーディオンモジュールの作成方法の記事を書こうと思っていますので、乞うご期待！）

## アコーディオンモジュール（レベル1）の仕様

- モジュールのドラッグアンドドロップ配置が可能
- QAの個数、記載内容、デザインは固定（記載内容を書き換えたい場合は、モジュールの大本を書き換える必要あり）※この仕様が「レベル1」とした理由です。

## 手順

【下準備 1】[モジュールをドラッグアンドドロップできるテンプレートを作る](https://www.hub-ken.net/hubken-lab/simple-template)  
【下準備 2】[モジュールを配置するためのWebサイトページを作る](https://www.hub-ken.net/hubken-lab/simple-websitepage)

1. アコーディオンのhtml+cssソースコードを用意する
2. アコーディオンのモジュールを作成する
3. ウェブサイトページにアコーディオンのモジュールを配置してみる
4. 確認・完成！

## 1.アコーディオンのhtml+cssソースコードを用意する

こんな感じの「Qを押下するとAが開く」タイプのアコーディオンのソースコードを用意します。

![accordion](https://www.hub-ken.net/hs-fs/hubfs/accordion.gif?width=920&name=accordion.gif)

### HTML

```
<details>
<summary>
    ここを押すとアコーディオンが開きます
</summary>
	<div class="ac_inner">
    <div class="answer">
        <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
    </div>
    </div>
</details>
<details>
<summary>
    ここを押すとアコーディオンが開きます
</summary>
	<div class="ac_inner">
    <div class="answer">
        <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
    </div>
    </div>
</details>
```

### CSS

```

summary{
position: relative;
max-width: 600px;
padding: 20px 50px 20px 20px;
cursor: pointer;
background-color: #689DB4;
color: #fff;
margin: 10px auto;
letter-spacing: 0.1em;
}
summary::-webkit-details-marker{
position: absolute;
color: transparent;
}

summary {
  display: block;
}
summary::-webkit-details-marker {
  display: none;
}
summary:before {
  content: 'Q  ';
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 20px;
}

summary:hover, details[open] summary {
background-color: #5B7A8E;
margin-bottom: 0px;
}

summary::after {
content: '+';
font-size: 130%;
position: absolute;
top: 45%;
right: 30px;
transform: translateY(-50%);
transition: transform.5s;
}
details[open] summary::after{
transform:translateY(-50%) rotate(45deg);
}
.ac_inner{
padding: 20px 20px;
background-color: #F4F6F6;
max-width: 630px;
margin: auto;
}
.answer {
padding: 15px 20px;
margin: auto;
}
.answer p {
background: none;
line-height: 1.8;
letter-spacing: 0.1em;
color: #728389;
}
details[open] .answer{
animation:fadein .5s ease-in-out;
}
.answer {
  display: block;
  padding-left: 35px;
  position: relative;
  line-height: 1.5;
}
.answer ::before {
  position: absolute;
  left: 0;
  content: "A ";
  color: #689DB4;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 26px;
}
@keyframes fadein {
0% { opacity: 0; }
100%{ opacity: 1; }
}
```

## 2.アコーディオンのモジュールを作成する

上記「1.アコーディオンのhtml+cssソースコードを用意する」で用意したhtmlとcssを使って、Hubspot CMSの管理画面からモジュールを作成していきます。

### アコーディオンモジュールの作成手順

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

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

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

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

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

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

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

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

「新規モジュールのセットアップ」が開きます。  
ページにチェックを入れ（ブログ記事、ブログ一覧でも使いたい場合はそちらにもチェック）、モジュールコンテンツ範囲は「ローカルモジュール」にチェック（グローバルモジュールは共通パーツを意味するので今回は選択しません）、ファイル名に「accordion-level-1」と入力します。   
必要に応じて、これから作るモジュールファイルの保管場所（フォルダ）を設定します。 【作成ボタン】を押下します。

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

上記で設定したモジュールファイル「accordion-level-1」の編集画面が表示されます。

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

ラベルに「accordion-level-1」と入力します。

用意しておいたアコーディオンのhtmlとcssを各エディターに流し込みます。   
htmlは【module.html】エディターに、cssは【module.css】エディターに流し込みます。

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

【変更を公開】ボタンを押下し、モジュールを公開します。 これでアコーディオンのモジュールが出来ました。（念の為、プレビューからアコーディオンの動作を確認してみることをおすすめします。）

## 3.ウェブサイトページにアコーディオンのモジュールを配置してみる

作ったモジュールを実際のページに配置してみましょう。 今回はCMS Hubのウェブサイトページにします。（ページの性質によって、「ウェブサイトページ」と「ランディングページ」を使い分けます。）

Hubspot管理画面ヘッダー【マーケティング】→【ウェブサイト】→【ウェブサイトページ】から、新規ウェブサイトページを作成します。テンプレートはドラッグアンドドロップができる仕様のものをお選びください。 Hub研Lab.にも、[ドラッグアンドドロップ可能なテンプレートを使ったウェブサイトページの作り方を説明したページ](https://www.hub-ken.net/lab/simple-websitepage)がありますので、よろしければご参照いただければと思います。

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

【追加】の検索窓に「accordion」と入力すると、先程作成したモジュール「accordion-level-1」が候補としてあがってきますので、Drop module hereと書かれたエリアにドラッグアンドドロップします。

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

モジュール「accordion-level-1」が配置されました。  
【公開】または【更新ボタン】を押下します。

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

今すぐページを更新ボタンを押下します。

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

URL箇所に書かれたテキストリンクから実際のページを確認してみます。   
[https://www.hub-ken.net/accordion-module](https://www.hub-ken.net/accordion-module)

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

無事にアコーディオンモジュールを配置することができました。  
ページ冒頭でお伝えしたように、このモジュールのQA記載内容や表示数を変えるには、デザインツールのモジュールファイル内に書かれたhtmlファイルを直接修正しなければなりません。 せっかくモジュールを作成するのであれば、ウェブサイトページから手軽に記載内容を書き換えられなければ不便ですね。（モジュールのメリットをあまり享受できませんね！）

ということで、次回はQAの記載内容をウェブサイトページに配置したアコーディオンモジュールから書き換えられる仕様のモジュールの作り方をご説明できればと思いますので、ご期待ください！

## Related posts

[![HubSpot CMS Hub QA用アコーディオンのモジュールの作り方](https://www.hub-ken.net/hubfs/Canva%20images/accordion-level2-1.png)](https://www.hub-ken.net/lab/accordion-2-1)

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

 2022年1月月19日

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

[![](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)

 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)

 2022年1月月19日

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

- [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++