Webサイトでよく見かけるQA要素。コンパクトなアコーディオンタイプなら、ページが長くならず、スッキリ見せることができます。
今回はレベル1の名にふさわしく、超・超、簡易的なモジュールを作成します。はっきり言って汎用性は低いですが、基本的な知識も書いていますので「最近CMS Hubを始めたばかりなんだよね」という方にもオススメの内容となっています。
（次回は【レベル2】と称して、もう少し汎用性の高いアコーディオンモジュールの作成方法の記事を書こうと思っていますので、乞うご期待！）
【下準備 1】モジュールをドラッグアンドドロップできるテンプレートを作る
【下準備 2】モジュールを配置するためのWebサイトページを作る
こんな感じの「Qを押下するとAが開く」タイプのアコーディオンのソースコードを用意します。
<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>
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; }
}上記「1.アコーディオンのhtml+cssソースコードを用意する」で用意したhtmlとcssを使って、Hubspot CMSの管理画面からモジュールを作成していきます。
Hubspot管理画面ヘッダー【マーケティング】→【ファイルとテンプレート】→【デザインツール】を開きます。
【ファイル】→【新規ファイル】を選択します。または、オレンジ色の【新規ファイルを作成】を押下。
「新規ファイル」と書かれたモーダルウィンドウが開くので、コンポーネントの【モジュール】を選択します。
【次へ】ボタンを押下します。
「新規モジュールのセットアップ」が開きます。
ページにチェックを入れ（ブログ記事、ブログ一覧でも使いたい場合はそちらにもチェック）、モジュールコンテンツ範囲は「ローカルモジュール」にチェック（グローバルモジュールは共通パーツを意味するので今回は選択しません）、ファイル名に「accordion-level-1」と入力します。
必要に応じて、これから作るモジュールファイルの保管場所（フォルダ）を設定します。 【作成ボタン】を押下します。
上記で設定したモジュールファイル「accordion-level-1」の編集画面が表示されます。
ラベルに「accordion-level-1」と入力します。
用意しておいたアコーディオンのhtmlとcssを各エディターに流し込みます。
htmlは【module.html】エディターに、cssは【module.css】エディターに流し込みます。
【変更を公開】ボタンを押下し、モジュールを公開します。 これでアコーディオンのモジュールが出来ました。（念の為、プレビューからアコーディオンの動作を確認してみることをおすすめします。）
作ったモジュールを実際のページに配置してみましょう。 今回はCMS Hubのウェブサイトページにします。（ページの性質によって、「ウェブサイトページ」と「ランディングページ」を使い分けます。）
Hubspot管理画面ヘッダー【マーケティング】→【ウェブサイト】→【ウェブサイトページ】から、新規ウェブサイトページを作成します。テンプレートはドラッグアンドドロップができる仕様のものをお選びください。 Hub研Lab.にも、ドラッグアンドドロップ可能なテンプレートを使ったウェブサイトページの作り方を説明したページがありますので、よろしければご参照いただければと思います。
【追加】の検索窓に「accordion」と入力すると、先程作成したモジュール「accordion-level-1」が候補としてあがってきますので、Drop module hereと書かれたエリアにドラッグアンドドロップします。
モジュール「accordion-level-1」が配置されました。
【公開】または【更新ボタン】を押下します。
今すぐページを更新ボタンを押下します。
URL箇所に書かれたテキストリンクから実際のページを確認してみます。
https://www.hub-ken.net/accordion-module
無事にアコーディオンモジュールを配置することができました。
ページ冒頭でお伝えしたように、このモジュールのQA記載内容や表示数を変えるには、デザインツールのモジュールファイル内に書かれたhtmlファイルを直接修正しなければなりません。 せっかくモジュールを作成するのであれば、ウェブサイトページから手軽に記載内容を書き換えられなければ不便ですね。（モジュールのメリットをあまり享受できませんね！）
ということで、次回はQAの記載内容をウェブサイトページに配置したアコーディオンモジュールから書き換えられる仕様のモジュールの作り方をご説明できればと思いますので、ご期待ください！