今回は、ノーコードツールSTUDIOでアコーディオンメニューを作成する方法を紹介します。
「STUDIOでアコーディオンメニューを作成したい!」
「STUDIOの公式サイトにも作れないって書いてあるし無理だよね。。」
こういった疑問や不安をこの記事を読めば、解決できます。
今回ご紹介する方法を真似して頂くと、アコーディオンメニューを簡単に作ることができますので、ぜひ一緒に作っていきましょう。
100枚以上の画像で、丁寧に解説しております。
ちなみに、この記事を書いている私は、STUDIO関連の案件を30個以上こなしてきました。
かなり多くの経験があるので、信頼担保に繋がるのかなと。
Contents
STUDIOでアコーディーオンメニューの作成方法を紹介
![](https://design-yandy.com/wp-content/uploads/2020/12/shutterstock_175948544-e1547963038599-1024x669.jpg)
それでは、ノーコードツールSTUDIOでアコーディオンメニューの作成方法を紹介します。
今回は、以下のようなアコーディオンメニューを作成します。
※音が出ますのでご注意ください。
以下のような手順で解説します。
① アコーディオンメニューの土台の作成
② 土台のカスタマイズ
③ STUDIOとGTMの連携
④ HTMLの記述
⑤ STUDIOの公開作業
また、YouTubeにて徹底解説しました。
文字情報よりも頭に入りやすいかと思いますので、基本的には動画を推奨します。
アコーディオンメニューを実装するためには、STUDIOのBASICプラン以上の契約が必須になっておりますので、ご注意ください!
① アコーディオンメニューの土台の作成
まずは、アコーディオンメニューの土台を作成します。
今回、アコーディオンメニューを設定したいサイトを開いておいてください。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_01_34_16.静止画001-1024x576.jpg)
ちなみに、今回は3つのQAがあるアコーデオンメニューを作成していきます。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_01_44_14.静止画002-1024x576.jpg)
①-1 レイヤー構造の把握
まず、今回作成したいアコーディオンメニューのレイヤー構造がどのようになっているかを事前に確認しておきましょう。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_01_52_02.静止画003-1024x576.jpg)
STUDIOでWEBサイトを作成する際は、レイヤー構造の考え方が重要になってきますので、なんとなく作成するのではなく、レイヤー構造を把握しながら作成して下さい。
今回作成するアコーディオンメニューは、ベースとなる大きな<div>タグのボックスの中に、
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_02_13_10.静止画004-1024x576.jpg)
3つの<div>タグのボックスで構成されております。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_02_18_13.静止画005-1024x576.jpg)
さらに、<div>タグのボックスの中には、質問と回答で2つの<div>タグが用意されており、
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_02_26_23.静止画006-1024x576.jpg)
その中に質問文と回答文の文字が配置されております。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_02_36_13.静止画007-1024x576.jpg)
今回のアコーディオンメニューの土台を作成する流れとしては、まずベースの<div>タグのボックスを作成し、
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_02_43_04.静止画008-1024x576.jpg)
その中に、質問と回答をまとめるための<div>ボックスを1つ配置します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_02_51_21.静止画009-1024x576.jpg)
そして、その<div>タグのボックスの中に質問と回答の2つの<div>タグのボックスを配置し、質問と回答文をその中に配置していきたいと思います。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_03_04_12.静止画010-1024x576.jpg)
ちなみに、2つ目と3つ目の質問と回答をまとめた<div>タグについては、効率的に作成するために、1つ目に作成した<div>タグをコピーして作成してきたいと思います。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_03_17_10.静止画011-1024x576.jpg)
①-2 メインの<div>タグの配置
まず、ベースとなる<div>タグのボックスを配置します。
左側にある「エレメンツパネル」から「ボックス」を選択し、
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_03_38_04.静止画012-1024x576.jpg)
アコーディングメニューを作成したい場所に、ドラックアンドドロップしましょう。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_03_52_00.静止画013-1024x576.jpg)
このボックスのサイズは、一旦横幅を「90%」、縦幅を「500px」に設定しました。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_04_12_10.静止画016-1024x576.jpg)
また、このボックスに色をつけておきましょう。
上部のパネルから「塗り」を選択し、色コードを今回は「#EAD5D3」に設定しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_04_25_19.静止画018-1024x576.jpg)
そして、このボックスに「id」も設定します。
<div>タグのボックスの右上にある「矢印」を押して、このボックスの「設定」を開きます。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_04_38_17.静止画019-1024x576.jpg)
そして、IDに「accordion」と設定しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_04_50_03.静止画020-1024x576.jpg)
「ID」については、アコーディオンメニューを作成するために、必ずこの名前で設定が必要になります。必ず「accordion」に設定されるようにして下さい。
IDが入力できたら、「矢印」を押して、「設定」を閉じます。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_05_08_04.静止画021-1024x576.jpg)
これで、ベースとなる<div>タグのボックスが配置できました。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_05_25_14.静止画022-1024x576.jpg)
①-3 質問と回答をまとめた<div>タグの配置
次に、配置した<div>タグのボックスの中に、1つの質問と回答をまとめる箱のような役割の<div>タグを配置します。
まず、左側にある「エレメンツパネル」から「ボックス」を選択し、
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_05_31_22.静止画023-1024x576.jpg)
先ほど作った<div>タグのボックスの中に、配置します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_05_37_15.静止画024-1024x576.jpg)
そして、横幅を「90%」、縦幅を「30%」にします。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_05_47_20.静止画025-1024x576.jpg)
また、このボックスの色も変更しておきましょう。
上部のパネルから「塗り」を選択し、「白色」に変更します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_06_01_16.静止画026-1024x576.jpg)
また、先ほどと同様に、「ID」も設定しておきましょう。
<div>タグのボックスを選択し、<div>タグのボックスの右上にある「矢印」を押して、このボックスの「設定」を開きます
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_06_15_04.静止画027-1024x576.jpg)
そして、IDに「accordion__item–1」と設定しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_06_38_15.静止画028-1024x576.jpg)
IDは、「accordion__(アンダーバー:2個)item–(ハイフン2個)1」ですので、間違いないようにして下さい。
以下の赤枠の「矢印」を押して、「設定」を閉じます。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_06_41_00.静止画029-1024x576.jpg)
これで、質問と回答をまとめた<div>タグのボックスの配置ができました。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_06_44_15.静止画030-1024x576.jpg)
①-4 文字を配置するための<div>タグの配置
次に、先ほど作った<div>タグのボックスの中に、質問と回答の文字を配置するために、<div>タグのボックスを2つ作成します。
まずは、左側にある「エレメンツパネル」から「ボックス」を選択し、
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_07_06_06.静止画031-1024x576.jpg)
先ほど作った<div>タグのボックスの中に、配置します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_07_11_16.静止画032-1024x576.jpg)
そして、横幅を「100%」、縦幅を「50%」にします。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_07_24_14.静止画033-1024x576.jpg)
このボックスの色については、「白色」にしたいのですが、今はわかりやすいようにこのままにしておきます。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_07_30_00.静止画034-1024x576.jpg)
①-5 テキストの配置
次に、この<div>タグのボックスにテキストを配置します。
左側のエレメンツパネルから「テキスト」を選択し、
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_07_43_13.静止画035-1024x576.jpg)
先ほど作成した<div>タグの中に配置します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_07_48_15.静止画036-1024x576.jpg)
そして、「Type Something」の上でダブルクリックをして、文字を変更します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_07_57_08.静止画037-1024x576.jpg)
今回は、「Q.あなたの将来の夢は何ですか??」と入力します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_08_12_23.静止画038-1024x576.jpg)
これで文字の入力が完了です。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_08_21_02.静止画039-1024x576.jpg)
同様に、「回答」についても同じものが必要ですので、この<div>タグをコピーして複製します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_08_32_05.静止画040-1024x576.jpg)
<div>タグが選択されているかを確認した状態で、Macの方は、「command +c」と「command +v」、Windowsの方は、「control +c」と「control +v」で複製します。
これで<div>タグを複製することができました。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_08_45_17.静止画041-1024x576.jpg)
そして、下の<div>タグの文字を「A.アナウンサーです!」に文言を変更します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_08_55_01.静止画042-1024x576.jpg)
2つの<div>タグの編集が終わりましたので、この2つの<div>タグの背景色を「白色」に変更しておきます。
「背景色」の変更方法は、1番上の<div>タグを選択した状態で、上部のパネルの「塗り」を選択し、「白色」を選択するだけです。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_09_20_14.静止画043-1024x576.jpg)
同様に、下の<div>タグの「背景色」も「白色」に変更しておいて下さい。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_09_32_15.静止画044-1024x576.jpg)
これで<div>タグの編集は完了です。
①-6 質問と回答をまとめた<div>タグに波線を追加
そして、質問と回答をまとめた<div>タグのボックスの上下に破線を付けたいと思います。
波線をつける<div>タグのボックスを選択した状態で、
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_09_40_03.静止画045-1024x576.jpg)
上部のパネルの「枠線」の上にマウスオーバします。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_09_52_07.静止画046-1024x576.jpg)
そして、以下の赤枠の「四角の枠」をクリックし、
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_09_55_11.静止画047-1024x576.jpg)
上下の数値に「1」と入力します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_10_02_23.静止画048-1024x576.jpg)
最後に「スタイル」から、以下の赤枠の「波線」をクリックすると、
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_10_09_03.静止画049-1024x576.jpg)
以下のように上下に波線を表示させることができました。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_10_13_19.静止画050-1024x576.jpg)
これで1つのQ &Aを作成することができました。
①-7 質問と回答の複製
今回は、3つのQ&Aを作成したいので、今作った質問と回答をまとめた<div>タグを2つ複製して下さい。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_10_13_19.静止画050-1024x576.jpg)
複製すると、以下のように3つの<div>タグが作成できました。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_10_36_21.静止画051-1024x576.jpg)
今、複製したこちらの2つの<div>タグの文字も変更しておきましょう。
今回は、2つ目のQAは、「Q.好きな食べ物は何ですか?」、「A.プリンです!」に変更し、
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_10_47_22.静止画052-1024x576.jpg)
3つ目のQAは,「Q.出身はどこですか?」、「A.東京です!」に変更しておきました。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_10_53_04.静止画053-1024x576.jpg)
最後に、追加した2つの<div>タグにIDを設定することを忘れないようにして下さい。
追加した1つ目のQAを選択し、「設定」を開き、「accordion__item–2」に変更します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_11_10_11.静止画054-1024x576.jpg)
追加した2つ目のQAについては、IDを「accordion__item–3」に変更しておきましょう。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_11_19_00.静止画055-1024x576.jpg)
これで、アコーディオンメニューの土台の作成は終了です。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_11_22_15.静止画056-1024x576.jpg)
② 土台のカスタマイズ
次に、「土台のカスタマイズ」をしていきます。
この作業は、アコーディオンメニューを作成するために、必要なカスタマイズになっております。
「なんでこんな設定にするの?」と思うかもしれませんが、何も考えずに一緒に作業して頂けたらと思います。
まずは、1つ目の質問と回答をまとめた<div>タグのボックスの中にある「回答」部分の<div>タグを選択します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_11_51_22.静止画057-1024x576.jpg)
そして、先ほど縦幅を「50%」に設定しましたが、「0px」にして下さい。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_12_06_19.静止画058-1024x576.jpg)
そして、さらに上部のタブにある「はみ出し」から「切り取り」を選択しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_12_14_22.静止画059-1024x576.jpg)
これで、質問の部分だけ表示されるようになったはずです。
2つ目のQAと3つ目のQAにも同様の作業を行ってください。
これで、以下のように質問の部分だけになりましたら、「土台のカスタマイズ」は終了です。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_12_30_16.静止画060-1024x576.jpg)
③ STUDIOとGoogleタグマネージャーを連携
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_12_41_01.静止画061-1024x576.jpg)
次に、STUDIOとGoogleタグマネージャーを連携していきます。
まずは、Googleタグマネージャーのアカウントを作成しますので、Googleタグマネージャーのサイトにこちらからアクセスして下さい。
そして、Googleタグマネージャーにアクセスされましたら、「無料で利用する」をクリックして下さい。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_12_58_08.静止画062-1024x576.jpg)
そして、「アカウントを作成」をクリックしましょう。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_13_03_11.静止画063-1024x576.jpg)
まず、アカウントの設定を行います。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_13_07_09.静止画064-1024x576.jpg)
「アカウント名」はお好きな名前をつけましょう。
私は、「portfolio」と入力します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_13_18_04.静止画065-1024x576.jpg)
そして、「国」は「日本」に設定しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_13_19_09.静止画069-1024x576.jpg)
次に、「コンテナの設定」です。
「コンテナ名」も自由に設定して頂いて問題ないので、アコーディオンメニューを設定するサイトのURLを記載しておきます。
私は、「portfolio-yuta.net」と入力します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_13_48_20.静止画066-1024x576.jpg)
そして、「ターゲットプラットフォーム」は、「ウェブ」を選択します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_13_56_23.静止画067-1024x576.jpg)
「作成」をクリックしましょう。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_13_58_11.静止画068-1024x576.jpg)
すると、「利用規約」が表示されます。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_14_02_18.静止画070-1024x576.jpg)
内容を確認をしたら、「同意ボタン」にチェックを付け、
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_14_09_11.静止画073-1024x576.jpg)
「はい」を押しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_14_12_06.静止画072-1024x576.jpg)
「Googleタグマネージャーをインストール」と表示されますが、こちらはそのまま「バツボタン」を押します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_14_23_00.静止画074-1024x576.jpg)
これで、アカウントが作成できました。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_14_25_19.静止画075-1024x576.jpg)
次に、GoogleタグマネージャーのIDを確認します。
IDは、Googleタグマネージャーの管理画面の上部に「GTM」から始まるコードがIDになりますので、それをコピーします。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_14_35_18.静止画076-1024x576.jpg)
そして、STUDIOの管理画面に戻り、左上のサイトの名前が書かれている部分にマウスオーバーして下さい。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_14_53_01.静止画077-1024x576.jpg)
すると、「ホーム」が表示されますので、クリックしましょう。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_14_56_23.静止画078-1024x576.jpg)
そして、「Apps」をクリックしましょう。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_15_01_16.静止画079-1024x576.jpg)
すると、「Google Tag Manager」が表示されておりますので、クリックして下さい。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_15_06_10.静止画080-1024x576.jpg)
そして、先ほどコピーしたGoogle Tag ManagerのIDをこちらに貼り付けて、「保存」を押しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_15_19_08.静止画081-1024x576.jpg)
これで、STUDIOとGoogleタグマネージャーの連携は終了です。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_15_23_10.静止画082-1024x576.jpg)
④ HTMLの記述
次に、GoogleタグマネージャーにHTMLを記述します。
この作業は、アコーディオンメニューを実装するためにコードを書く作業になります。
まずは、Google タグマネージャーの管理画面に戻ります。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_15_41_08.静止画083-1024x576.jpg)
「新しいタグを追加」をクリックします。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_15_44_19.静止画084-1024x576.jpg)
以下の赤枠部分でクリックして下さい。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_15_49_00.静止画085-1024x576.jpg)
「タグタイプを選択」から「カスタムHTML」を選択します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_15_56_13.静止画086-1024x576.jpg)
そして、以下の「HTML」をそのままコピーして下さい。
<style> .accordion__answer--active { height: auto !important; padding-top: 16px !important; } </style> <script> "use strict"; var accordion = document.querySelector("#accordion"); var accordionItems = document.querySelectorAll("div[id*='accordion__item']"); accordion.style.cursor = "pointer"; accordion.addEventListener("click", function (e) { e.preventDefault(); var clickedAccordionItem = e.target.closest("div[id*='accordion__item']"); if (!clickedAccordionItem) return; var clickedAccordionAnswer = clickedAccordionItem.children
; accordionItems.forEach(function (accordionItem) { accordionItem.children
.classList.remove("accordion__answer--active"); }); clickedAccordionAnswer.classList.add("accordion__answer--active"); }); </script>
gaz STUDIO Blogより引用
上記のHTMLをコピーして以下のように貼り付けて下さい。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_16_30_09.静止画087-1024x576.jpg)
次に、HTMLの下にあるトリガーを設定していきます。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_16_39_15.静止画088-1024x576.jpg)
今回は、「ウィンドウの読み込み」というものを選択するようにしたいので、右上にある「+ボタン」から選択します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_16_48_15.静止画089-1024x576.jpg)
再度以下の赤枠をクリックし、
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_16_53_07.静止画090-1024x576.jpg)
「ウィンドウの読み込み」を選択し、
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_16_56_04.静止画091-1024x576.jpg)
「保存」を押します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_17_00_00.静止画092-1024x576.jpg)
「トリガー名」はそのままで、「保存」を押しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_17_04_05.静止画093-1024x576.jpg)
もう一度、右上の「保存」を押します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_17_11_02.静止画094-1024x576.jpg)
タグの名前についても、そのままで、「保存」を押しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_17_15_23.静止画095-1024x576.jpg)
そして、「公開」ボタンを押します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_17_22_23.静止画096-1024x576.jpg)
そして、「バージョン名」と「バージョンの詳細」はお好きなように記載しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_17_24_14.静止画098-1024x576.jpg)
今回、私は、「バージョン名」を「001」と入力します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_17_33_19.静止画101-1024x576.jpg)
「バージョンの説明」は、「アコーディオンメニュー用」と入力します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_17_36_13.静止画102-1024x576.jpg)
そして、「公開」を押します。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_17_41_22.静止画103-1024x576.jpg)
これで、HTMLの記述が完了し、「公開」されました。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_17_48_23.静止画104-1024x576.jpg)
⑤ STUDIOの公開
最後に、STUDIOで公開作業をしてアコーディオンメニューが作成できているかを確認して下さい。
STUDIOの管理画面に戻り、「デザインエディタ」をクリックします。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_18_04_13.静止画105-1024x576.jpg)
そして、右上の「公開」を押して、
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_18_08_11.静止画106-1024x576.jpg)
再度、「公開」を押しましょう。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_18_11_18.静止画107-1024x576.jpg)
最後に、URLをクリックします。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_18_16_11.静止画108-1024x576.jpg)
念の為、URLを選択し、「enter」を押して、再度更新しておきます。
![](https://design-yandy.com/wp-content/uploads/2022/02/シーケンス-009.00_18_22_12.静止画109-1024x576.jpg)
すると、以下のように、質問の上をクリックすると、答えが表示されるようになりました。
これで、アコーディングメニューの作成は終了です。
ライフプレビューではこの動作は確認できませんのでご注意ください。
まとめ
今回は、アコーディオンメニューを作成する方法を5つのSTEPで紹介しました。
① アコーディオンメニューの土台の作成
② 土台のカスタマイズ
③ STUDIOとGTMの連携
④ HTMLの記述
⑤ STUDIOの公開作業
アコーディオンメニューを利用すると、サイト訪問者が必要な情報を探しやすくなり、ユーザビリティーも上がりますので、ぜひ積極的に利用していきましょう。
![](https://design-yandy.com/wp-content/uploads/2022/01/アイキャッチ画像(studio)-1-320x180.jpg)