Hub研 Lab.（ハブケン ラボ）

QA用アコーディオンモジュールの作り方【レベル2-前半】Hubspot CMS Hub

作成者: Shinobu Minabe｜2022年1月19日

前回、超・超、簡易的なQAモジュールの作成方法 （レベル1）をご説明しました。
今回は前回より使い勝手をよくしたQAモジュールを作っていきたいと思います。
具体的には、QAの記載内容をウェブサイトページに配置したアコーディオンモジュールから、簡単に書き換えられる仕様のモジュールの作成方法のご説明となります。（長いので前半と後半に分けさせていただきますね。）

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

  • モジュールのドラッグアンドドロップ配置が可能
  • ウェブサイトページに配置したアコーディオンモジュールから、QAの文字情報の書き換えが可能。
  • ウェブサイトページに配置したアコーディオンモジュールから、QAの個数の増減が可能。

完成までの手順

【下準備 1】モジュールをドラッグアンドドロップできるテンプレートを作る
【下準備 2】モジュールを配置するためのWebサイトページを作る

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

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

以下のような「Qを押下するとAが開く」タイプのアコーディオン用のソースコードを用意します。
（下のGIFアニメは文字情報が流し込まれた状態です）

HTML

  1. <details>
  2.   <summary>
  3.  
  4.   </summary>
  5.   <div class="ac_inner">
  6.     <div class="answer">
  7.  
  8.     </div>
  9.   </div>
  10. </details>

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」の文言が入る箇所（<summary>と</summary>の間）に、先程コピーしたHubL変数名の値をペーストします。

次の作業に移るので、スパナがクロスしているアイコンを押下してモジュール編集画面のトップに戻ります。

モジュールの編集画面のトップ（モジュール名「accordion-level-2」のトップ）に戻ったら、次はQAアコーディオンの「A」用のフィールド（入力欄）を作っていきます。
フィールドの追加から「リッチテキスト」を選択します。

テキストフィールド欄に「accordion-a」と入力します。
予め参考テキストを入れておきたい場合（フォームの入力欄に予め文言が表示されているアレです）は、既定のリッチテキスト欄に適宜文言を入力します。

HubL変数名と書かれた直下にあるコピーから「値のみをコピー」を選択し、HubL変数名の値をコピーします。

HTMLでQAの「A」の文言が入る箇所（<div class="answer">と</div>の間）に、先程コピーした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.ウェブサイトページにアコーディオンのモジュールを配置してみる」のご説明は、次のページからどうぞ！
完全な記事を表示