文量が多いとき便利！折りたためるアコーディオンメニューの作り方｜BiNDup

こんにちは、デザイナーのオモトです。
私がノーコードCMS「BiNDup」を使う上で、活用している実用的なカスタマイズ・テクニック第１弾です。
今回は、コードを記述せずにのCSS編集ができるDressを使い、「アイコンがアニメーションするアコーディオンメニュー」を作成する方法について解説します。

簡単に凝ったサイトに見せることができたり、スマホのフッターメニューとしても使えるので良かったら参考にしてみてくださいね。
設定できなかった方にはサイトデータを用意しているのでご安心を！

★作業前のご注意★ 必ずお読みください！

※ブログの内容についてはサポート対象外なので要注意！質問いただいてもお答えできません。（ごめんなさい！）

→ノーコードで自由にデザインできるホームページ作成サービスBiNDupを30日間無料体験

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

アコーディオンメニューは任意の場所をクリックすると、隠れていた内容が表示されるもののことです。
jQueryなどが必要なことが多く導入でつまづきがちな機能ですが、BiNDupではデフォルトでアコーディオン機能がついていますので、かんたんに自サイトに取り入れることができます。

アコーディオンメニューの基本のアレンジ

アコーディオンメニューのカスタマイズをしたい場合は、主に以下の指定を使い分けます。

• アコーディオンブロック>アコーディオンバー※1
• アコーディオンブロック>アコーディオンバー>リンク※1
• アコーディオンブロック>アコーディオンバー：現在地>リンク
• アコーディオンブロック>アコーディオンコンテンツ
• アコーディオンブロック>アコーディオンコンテンツ内カラム

※1 これに加え、before要素・after要素を使うカスタマイズ例もあります。
基本のアレンジについては、いくつか記事がありますので、こちらも併せてご覧ください。

ブロックDressで簡単にデザインパーツを増やす【タブ・アコーディオン編】
コンテンツ部分を折りたためるアコーディオンをカスタマイズ

→ノーコードで自由にデザインできるホームページ作成サービスBiNDupを30日間無料体験

カスタマイズ例の共通のDressの設定

今回は３種類のカスタマイズ例をご紹介しますが、アイコン以外の部分は共通のデザインにしています。
まずは共通部分のDressを設定から始めてみてください。

サンプルを見る

デフォルトのデザインを解除する①アコーディオンバーの背景を透明にする方法

デフォルトでは、背景色が設定されているので透明にしていきます。

「アコーディオンブロック>アコーディオンバー>リンク」の背景色をTRANSPARENT（透明）にします。

デフォルトのデザインを解除する②展開されたコンテンツの背景を透明にする方法

「アコーディオンブロック>アコーディオンコンテンツ」「アコーディオンブロック>アコーディオンコンテンツ内カラム」の両方の背景色をTRANSPARENT（透明）にします。

→ノーコードで自由にデザインできるホームページ作成サービスBiNDupを30日間無料体験

「アコーディオンブロック：アコーディオンバー」の設定

①文字サイズ15px
②余白：外側の余白の下30px
③表示形式（display）：フレックス

「アコーディオンブロック：アコーディオンバー：リンク」の設定

①背景色：透明（TRANPARENT）
②枠線：下辺 実線 １px
③余白：内側の余白 上下7px
④幅（width）：100%
⑤表示形式（display）：インラインフレックス
⑥フレックスコンテナ：アイテム揃えを中央揃えに
⑦配置方法（position）：相対配置（relative）

「アコーディオンブロック：アコーディオンバーリンク「after要素」

after要素に、矢印やプラスアイコンを設定していきいます。

①表示形式（display）：ブロック（block）
②トランジション（transition）: all 0.5s 0s ease
③内容（content）
""
④配置方法（position）:絶対配置（absolute）
⑤位置：右0px

→ノーコードで自由にデザインできるホームページ作成サービスBiNDupを30日間無料体験

カスタマイズ例①開閉で向きが変わる！矢印付きのアコーディオンメニュー

サンプルを見る
ここから個別のDress設定の説明をしていきます。よく見かけるアコーディオンといえばこれですよね。
クリックすると矢印が回転します。前章の共通設定に以下の指定を加えてください。
矢印の画像はこちらを使ってください↓

「アコーディオンブロック：アコーディオンバーリンク：after要素」の設定

①背景画像：↑の画像を設定、繰り返し：なし、サイズ：背景領域に収まるサイズで表示、位置：中央
②幅（width）：16px
③高さ（height）：10px
⑦位置：下18px

「アコーディオンブロック：アコーディオンバー（現在地）：リンク：after要素」の設定

マウスオーバーした時に、回転する角度を指定します。
①変形（transform）：rotate(180deg)

→ノーコードで自由にデザインできるホームページ作成サービスBiNDupを30日間無料体験

カスタマイズ例②プラスがマイナスにアニメーションするアコーディオンメニュー

プラスアイコンは、矢印アイコンと同じくメニューを展開するアフォーダンスとしてよく使われます。
プラスの方が直感的ですし、見た目もシュッとしてるので重宝しています。
前章の共通設定に以下の指定を加えてください。

サンプルを見る

「アコーディオンブロック：アコーディオンバー：リンク：before要素」の設定

プラス・マイナスの表現は、「アコーディオンブロック>アコーディオンバー>リンク」のbefore要素・after要素を使って表現していきます。
まずはbefore要素で、プラスの縦線を作っています。
①背景色：#000000
②幅（width）：18px
③高さ（height）：1px
⑦位置：下位置20px

「アコーディオンブロック：アコーディオンバー：リンク：after要素」の設定

次にafter要素で、プラスの横線を作っていきます。
④のrotateで、90度回転させ縦線にします。

①背景色：#000000
②幅（width）：18px
③高さ（height）：1px
④変形（transform）：rotate(-90deg)
⑤位置：下位置20px

「アコーディオンブロック：アコーディオンバー：現在地：リンク」の設定

クリックした際にこのafter要素を90度回転させ、前述のbefore要素にぴったりと重ねてマイナスを表現します。
①の指定で、元の角度に戻し横線にします。

①変形（transform）：rotate(0deg)

→ノーコードで自由にデザインできるホームページ作成サービスBiNDupを30日間無料体験

Q・Aアイコン付きにアコーディオンメニュー

カスタマイズ例②をベースにQとAのアイコンを追加して、より凝ったデザインにします。

サンプルを見る

「アコーディオンブロック：アコーディオンコンテンツ内カラム」の設定

Aアイコンの幅だけ、左側に余白を開けます。
①余白：内側の余白の左87px

「アコーディオンブロック：アコーディオンバー：before要素」の設定

Qアイコンを追加します。
①文字色（color）：#ffffff
②文字サイズ（font-size）：27px
③フォント（font-family）：Manrope
④装飾：文字の太さを太字
⑤背景色：#000000
⑥角丸（border-radius）：5px
⑦幅（width）：幅100%、幅の上限48px
⑧高さ（height）高さ100%、高さの上限48px
⑨表示形式（display）：フレックス
⑩内容（content）
"Q"
⑪フレックスコンテナ：主軸の配置を中央寄せ、アイテム揃えを中央揃え

「アコーディオンブロック：アコーディオンコンテンツ内カラム：before要素」

Aアイコンを追加します。Qアイコンを作る時とほぼ同じ設定でできます。
①文字色（color）：#ffffff
②文字サイズ（font-size）：27px
③フォント（font-family）：Manrope
④装飾：文字の太さを太字に
⑤背景色：#e7e7e7
⑥角丸（border-radius）：5px
⑦幅（width）：幅100%、幅の上限48px
⑧高さ（height）高さ100%、高さの上限48px
⑨表示形式（display）：フレックス
⑩内容（content）
"A"
⑪フレックスコンテナ：主軸の配置を中央寄せ、アイテム揃えを中央揃え
⑫配置方法：絶対配置
⑬位置：左位置0px

まとめ

いかがでしたでしょうか？
こんな感じで実用的なカスタマイズ・テクニックを引き続き紹介していくので、楽しみにしていてくださいね！

ホームページ作成サービスのBiNDupでは、複雑なCSSやJavaScriptの記述なしで簡単にオリジナルデザインのサイトが作成できます。
今回のようなデザインアレンジされたアコーディオンを実装しているテンプレートも沢山ありますので、まだお使いになっていない方はぜひ試してみてください。

BiNDupのテンプレートTSUBAME Hotel｜テンプレートのアコーディオンも自由にアレンジ可能

ホームページ作成サービスBiNDupを無料で使ってみるBiNDの制作事例を見る

今回作成したサンプルサイトのダウンロード

自分では設定ができなそう・・と不安な方は
今回のサンプルサイトのサイトデータを用意しましたので、以下よりログインしてダウンロードしてみてください。
（BiND10以降、BiNDup対応）