---
title: QA用アコーディオンモジュールの作り方【レベル2-前半】Hubspot CMS Hub
description: よくあるタイプのQA用アコーディオンのモジュールの作り方。CMS Hub（Hubspot CMS）：レベル2（前半）
image: https://www.hub-ken.net/hubfs/Canva%20images/accordion-level2-1.png
---
[Skip to content](https://www.hub-ken.net/lab/accordion-2-1#main-content)
[](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月月19日
# QA用アコーディオンモジュールの作り方【レベル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/accordion-2-1) [linkedin-in icon](http://www.linkedin.com/shareArticle?mini=true&url=https://www.hub-ken.net/lab/accordion-2-1) [twitter icon](https://twitter.com/intent/tweet?url=https://www.hub-ken.net/lab/accordion-2-1) [pinterest-p icon](http://pinterest.com/pin/create/link/?url=https://www.hub-ken.net/lab/accordion-2-1) [envelope icon](mailto:?body=https://www.hub-ken.net/lab/accordion-2-1)
前回、[超・超、簡易的なQAモジュールの作成方法](https://www.hub-ken.net/lab/accordion-1) （レベル1）をご説明しました。
今回は前回より使い勝手をよくしたQAモジュールを作っていきたいと思います。
具体的には、QAの記載内容をウェブサイトページに配置したアコーディオンモジュールから、簡単に書き換えられる仕様のモジュールの作成方法のご説明となります。（長いので前半と[後半](https://www.hub-ken.net/lab/accordion-2-2)に分けさせていただきますね。）
## アコーディオンモジュール（レベル2）の仕様
- モジュールのドラッグアンドドロップ配置が可能
- ウェブサイトページに配置したアコーディオンモジュールから、QAの文字情報の書き換えが可能。
- ウェブサイトページに配置したアコーディオンモジュールから、QAの個数の増減が可能。
## 完成までの手順
【下準備 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が開く」タイプのアコーディオン用のソースコードを用意します。
（下のGIFアニメは文字情報が流し込まれた状態です）
### HTML
``
1.
2.
3.
4.
5.
10.
### CSS
``
1. /\*アコーディオンcss\*/
2. summary{
3. position: relative;
4. max-width: 600px;
5. padding: 20px 50px 20px 20px;
6. cursor: pointer;
7. background-color: #689DB4;
8. color: #fff;
9. margin: 10px auto;
10. letter-spacing: 0.1em;
11. }
12. summary::-webkit-details-marker{
13. position: absolute;
14. color: transparent;
15. }
16.
17. summary {
18. display: block; /\* デフォルトの矢印を消す \*/
19. }
20. summary::-webkit-details-marker {
21. display: none; /\* デフォルトの矢印を消す \*/
22. }
23. summary:before {
24. content: 'Q '; /\* 画像URLを指定 \*/
25. font-family: 'Montserrat', sans-serif;
26. font-weight: 500;
27. font-size: 20px;
28. }
29.
30. summary:hover, details\[open\] summary {
31. background-color: #5B7A8E;
32. margin-bottom: 10px;
33. }
34.
35. summary::after {
36. content: '+';
37. font-size: 130%;
38. position: absolute;
39. top: 45%;
40. right: 30px;
41. transform: translateY(-50%);
42. transition: transform.5s;
43. }
44. details\[open\] summary::after{
45. transform:translateY(-50%) rotate(45deg);
46. }
47. .ac\_inner{
48. padding: 20px 20px;
49. background-color: #F4F6F6;
50. max-width: 630px;
51. margin: auto;
52. }
53. .answer {
54. padding: 0px 20px;
55. margin: auto;
56. }
57. .answer p {
58. background: none;
59. line-height: 1.8;
60. letter-spacing: 0.1em;
61. color: #728389;
62. }
63. details\[open\] .answer{
64. animation:fadein .5s ease-in-out;
65. }
66. .answer {
67. display: block;
68. padding-left: 35px;
69. position: relative;
70. line-height: 1.5;
71. }
72. .answer:before {
73. position: absolute;
74. top: -5px;
75. left: 0;
76. content: "A ";
77. color: #689DB4;
78. font-family: 'Montserrat', sans-serif;
79. font-weight: 600;
80. font-size: 26px;
81. }
82. .answer a {
83. color: #2da59a;
84. text-decoration:underline;
85. }
86. .answer a:hover {
87. opacity: 0.5;
88. }
89. @keyframes fadein {
90. 0% { opacity: 0; }
91. 100%{ opacity: 1; }
92. }
93. /\*アコーディオンcss\*/
## 2.アコーディオンのモジュールを作成する
上記「1.アコーディオンのhtml+cssソースコードを用意する」で用意したhtmlとcssを使って、Hubspot CMSの管理画面からモジュールを作成していきます。
### アコーディオンモジュールの作成手順
Hubspot管理画面ヘッダー【マーケティング】→【ファイルとテンプレート】→【デザインツール】を開きます。
【ファイル】→【新規ファイル】を選択します。または、オレンジ色の【新規ファイルを作成】を押下。
「新規ファイル」と書かれたモーダルウィンドウが開くので、コンポーネントの【モジュール】を選択します。
【次へ】ボタンを押下します。
「新規モジュールのセットアップ」が開きます。
ページにチェックを入れ（ブログ記事、ブログ一覧でも使いたい場合はそちらにもチェック）、モジュールコンテンツ範囲は「ローカルモジュール」にチェック（グローバルモジュールは共通パーツを意味するので今回は選択しません）、ファイル名に「accordion-level-1」と入力します。
必要に応じて、これから作るモジュールファイルの保管場所（フォルダ）を設定します。 【作成ボタン】を押下します。
上記で設定したモジュールファイル「accordion-level-2」の編集画面が表示されます。
ラベルに「accordion-level-2」と入力します。
用意しておいたアコーディオンのhtmlとcssを各エディターに流し込みます。
htmlは【module.html】エディターに、cssは【module.css】エディターに流し込みます。
QAアコーディオンの「Q」用のフィールド（入力欄）を作っていきます。
「フィールドの追加」から【テキスト】を選択します。
テキストフィールド欄に「accordion-q」と入力します。
既定のテキスト欄に「質門を入力してください」と入力します。
「質門を入力してください」でなくても、例えば「QAを入力する」「質門と回答フィールド」等、わかりやすい名称をつけていただければOKです。
HubL変数名と書かれた直下にあるコピーから【値のみをコピー】を選択し、HubL変数名の値をコピーします。
HTMLでQAの「Q」の文言が入る箇所（との間）に、先程コピーしたHubL変数名の値をペーストします。
次の作業に移るので、スパナがクロスしているアイコンを押下してモジュール編集画面のトップに戻ります。
モジュールの編集画面のトップ（モジュール名「accordion-level-2」のトップ）に戻ったら、次はQAアコーディオンの「A」用のフィールド（入力欄）を作っていきます。
フィールドの追加から「リッチテキスト」を選択します。
テキストフィールド欄に「accordion-a」と入力します。
予め参考テキストを入れておきたい場合（フォームの入力欄に予め文言が表示されているアレです）は、既定のリッチテキスト欄に適宜文言を入力します。
HubL変数名と書かれた直下にあるコピーから「値のみをコピー」を選択し、HubL変数名の値をコピーします。
HTMLでQAの「A」の文言が入る箇所（と
の間）に、先程コピーしたHubL変数名の値をペーストします。
次の作業に移るので、スパナがクロスしているアイコンを押下してモジュール編集画面のトップに戻ります。
モジュールの編集画面のトップ（モジュール名「accordion-level-2」のトップ）に戻ったら、次は前の工程で作成した２つのフィールド（「accordion-q」と「accordion-a」）を一つのグループにしていきます。
【グループ】を押下します。
「accordion-q」と「accordion-a」を選択し（選択するとスクショにあるように背景色が水色に変わります）、【グループを作成】ボタンを押下します。
フィールドグループ作成の画面が表示されるので、HubL変数名に「QA\_accordion\_group」と入力します。
上で作成したグループ（QA\_accordion\_group）をリピート表示できるようにしたいので、「リピーターオプション】」を【ON】にして、オブジェクト数の上限の「最小」に2と入力します。（QAの数が沢山あるとわかっている場合は、大きな数にしておきましょう）
これで、「リピート表示可能なQAのグループ」が完成しました。
次の作業に移るので、スパナがクロスしているアイコンを押下してモジュール編集画面のトップに戻ります。
上で作成したグループ（QA\_accordion\_group）を、module.html内に記述していきます。
HubLソースコードをこのページで表示させられないため、画像で恐縮なのですが、以下ご参考にしていただければと思います。
【変更を公開】ボタンを押下し、モジュールを公開します。
これでQAアコーディオンのモジュールが出来ました。（念の為、プレビューからアコーディオンの動作を確認してみることをおすすめします。）
これで、「2.アコーディオンのモジュールを作成する」のご説明は終わりです。
「3.ウェブサイトページにアコーディオンのモジュールを配置してみる」のご説明は、[次のページ](https://www.hub-ken.net/lab/accordion-2-2)からどうぞ！
## Related posts
[](https://www.hub-ken.net/lab/accordion-1)
## [QA用アコーディオンモジュールの作り方【レベル1】Hubspot CMS Hub](https://www.hub-ken.net/lab/accordion-1)
2022年1月月7日
[Read more](https://www.hub-ken.net/lab/accordion-1)
[](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/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/)
運営会社：[株式会社VIVIBOND](https://vivibond.com)
Copyright © 2026, 株式会社VIVIBOND++