【コードをコピペでOK】STUDIOでアコーディオンメニューを実装する方法を解説

こんにちは!会社員クリエイターのこばたです!

今回は、STUDIOでカスタムコードを利用してアコーディオンメニューを実装する方法を解説します。

読者の中にはクライアントから要望をいただいたこともあるのではないでしょうか。

現時点でSTUDIOのオリジナルセクションでは備わっていませんが、カスタムコードを利用することで実装可能です。

是非使いこなして、実装の幅を増やしてクライアントの要望にも応えられるようにしていきましょう。それでは解説していきます。

スポンサーリンク
目次

アコーディオンメニューとは

アコーディオンメニューとは、Webサイトにおけるナビゲーションメニューのひとつで、項目をクリックしたりタップしたりすることで、隠れている詳細画面を表示させることができるものです。その項目を再度クリックすると、表示されていた画面はまた元のように隠れます。

このように、クリックするたびに楽器のアコーディオンのように開いたり閉じたりすることから、アコーディオンメニューと呼ばれています。

なお、ナビゲーションメニューとはWebサイトの各コンテンツのページにリンクされているもので、WEBサイトの目次のようなものです。

アコーディオンメニューのメリット

1.スペースの節約

アコーディオンメニューは、コンテンツを隠すことでスペースを節約します。複数のメニューアイテムがある場合でも、メニュー全体をスクロールすることなく、コンパクトに表示することができます。

2.階層構造の整理

アコーディオンメニューは、階層構造を整理するための効果的な手段です。メニューアイテムをカテゴリごとにグループ化し、必要な情報にスムーズにアクセスできるようにします。ユーザーは必要なコンテンツに直接移動するため、迷うことなく情報を探すことができます。

3.ユーザビリティの向上

アコーディオンメニューは、ユーザビリティを向上につながります。初めにヘッダー部分のみが表示されるため、ユーザーは必要な情報を素早くアクセスすることができ、必要に応じて展開することができます。ユーザーは不要な情報を見ることなく、関心のあるコンテンツにフォーカスすることができます

今回の見本

今回は下記のような一般的なアコーディオンメニューを作成します。

iframeをドラック&ドロップ

コンテンツパネルのEmbedのBlank(iframe)をドラック&ドロップします。

埋め込みコードにサンプルコードをコピペ

コードを見るのが嫌な人もいると思うのですが少し我慢してください。

下記がサンプルコードです。分からなくて良いのでコピーしてください。

<html>
<head>
  <title>アコーディオンメニュー</title>
  <style>
    .accordion {
      background-color: #81C7D4;
      color: #333;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 28px;
      transition: 0.4s;
    }
    
    .active, .accordion:hover {
      background-color: #81C7D4;
    }
    
    .panel {
      padding: 18px;
      font-size: 24px;
      display: none;
      background-color: #A5DEE4;
      overflow: hidden;
    }
  </style>
</head>
<body>

<button class="accordion">Q.好きな食べ物はなんですか?</button>
<div class="panel">
  <p>A.お寿司です。</p>
</div>

<button class="accordion">Q.好きな国はどこですか?</button>
<div class="panel">
  <p>A.アルメニアです。</p>
</div>

<button class="accordion">Q.好きな映画はなんですか?</button>
<div class="panel">
  <p>A.インターンシップです。</p>
</div>

<script>
  var accordions = document.getElementsByClassName("accordion");

  for (var i = 0; i < accordions.length; i++) {
    accordions[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    });
  }
</script>

</body>
</html>

再びSTUDIOのエディタ画面に戻り、埋め込み部分にコピーした上記コードをペーストします。
ペーストする際に、元々入力してあるコードは削除して下さい。

レイアウトを調整

コードを入力して、エディタ画面のどこかをクリックするとiframeのボックス内にアコーディオンメニューが反映されます。

つぎに、レイアウトを調整します。
お好みのサイズに調整するのと、背景色は透明にしておきましょう。

縦幅をautoにすると挙動が不自然になるので、縦幅は余裕を持ったピクセル指定をするのが良いと思います。

テキストを変更

テキストはコード内の下記の青下線部分に記述することで変更可能です。

<button class=”accordion”>Q.好きな食べ物はなんですか?</button>
<div class=”panel”>
<p>A.お寿司です。</p>
</div>

お好みのテキストを入れましょう。この際に青下線部分以外のコードは絶対にいじらないようにしてください。

フォントサイズや背景色を変更

下画像の赤枠部分を変更したい場合は下のコード部分に変更を加えてきます。

.accordion {
background-color: #81C7D4;
color: #333;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 28px;
transition: 0.4s;
}

・background-colorは背景色。
・colorはテキストの色。
・paddingはテキストとボックスの間の間隔
・font-sizeはフォントの大きさ。

下画像の赤枠部分を変更したい場合は下のコード部分に変更を加えてきます。

.panel {
padding: 18px;
font-size: 24px;
display: none;
background-color: #A5DEE4;
overflow: hidden;
}

まとめ

お好みのアコーディオンメニューが実装できましたでしょうか。

以前までは有料プランのみで利用できるGoogleタグマネージャーを利用して実装するしか方法がありませんでした。
しかし、カスタムコードで自由記述ができるようにアップデートされてから、無料プランでも実現が可能になりました。

クライアントからの要望も多いので、ぜひ使いこなせるようにしておきましょう。

STUDIOでサイトの制作を依頼したい、STUDIOでWebサイト作りたいけど、何から始めていいか分からない…という方へ。
STUDIOにてサイトの制作依頼や講師等の依頼も承っておりますので、ぜひご連絡ください!

最後までお読みいただきありがとうございました。

スポンサーリンク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

1999年生まれの会社員クリエイター。
ノーコードWeb制作ツール「STUDIO」に特化して、副業でホームページやランディングページの制作を行っているWeb製作者。「Figma」を利用したWebデザインも得意領域。本業はITベンチャーの営業職会社員。

STUDIOを誰よりも愛する僕が、ユーザーの皆さんにとって役立つ情報を発信しています。

目次