コンテンツ部分を折りたためるアコーディオンをカスタマイズ

ホームページ制作サービス「BiNDup」のアコーディオンブロックのカスタマイズについて紹介します。すでに活用されている方も、BiND初心者の方も参考にしてみてください。

アコーディオンブロックとは、タイトルバーをクリック（またはマウスオーバー）すると、コンテンツ部分が開閉するブロックのことです。実際の動作はサンプルサイトをご覧ください。

サンプルサイトを見る

アコーディオンブロックは長くなりがちなコンテンツをすっきり見せたい時に役立ちます。サンプルのように、お知らせやよくあるお問い合わせ、各種案内事項などに使うと良いでしょう。

アコーディオンブロックの作り方

まずはアコーディオンブロックの作り方です。

ブロックテンプレートから選択する場合

ブロックテンプレート一覧の「タブ／アコーディオン」というカテゴリーにアコーディオンブロックも用意されています。こちらを挿入して編集する方法が簡単です。

エディタモードでゼロから作成する場合

ブロックの設定タブを開き、ブロックレイアウトからアコーディオンを選択してください。
オプションは用途に合わせて選択します。一部または全部のコンテンツを開いた状態にしたり、コンテンツが開くタイミングをクリックにするかロールオーバー（マウスオーバー）にするかを指定できます。

段落スタイルを「タイトル」で指定した箇所がアコーディオンのバー部分になります。タイトルの下に入力した内容（次のタイトルの前まで）がバーをクリックした時のコンテンツになります。

編集内容を適用するとこのように表示されます。

アコーディオンブロックをカスタマイズ（基本編）

Dressでアコーディオンの色を変えてみましょう。

アコーディオンのバーの色を変える

Dressを開き、プルダウンから「アコーディオンブロック ＞ アコーディオン：バー ＞ リンク」を選択します。背景色や文字色を設定すると、バーの色を変更できます。

Dressの設定方法はサポートサイトをご確認ください。
Dressの編集方法

現在開いているバーの色を変える

現在地（コンテンツが開いている箇所の）バーの色を変えたい場合は、「アコーディオンブロック ＞ アコーディオン：バー：現在地 ＞ リンク」を選択して、色を設定します。

マウスオーバー時にバーの色を変える

マウスオーバーでバーの色を変えたい場合は、「アコーディオンブロック ＞ アコーディオン：バー ＞ リンク：マウスオーバー」を選択してください。

コンテンツの背景色などを変える

コンテンツエリアをカスタマイズする場合は、「アコーディオンブロック ＞ カラム」を選択して、背景色などを設定してください。

デザインに合わせてWebフォントを使用するのもオススメです。

WebフォントはDressの編集項目の中の「フォント」から選択できます。

こちらが色を変更した状態です。

角丸やボーダーを設定すれば、一味違うイメージになります。

角丸にする時は、前述の「アコーディオンのバーの色を変える」と同じ手順で項目を選択し、角丸を４隅に設定します。
開いた状態の時はバーとコンテンツが一体化しているように見せたいので、まずは前述の「現在開いているバーの色を変える」と同じ手順で項目を選択し、下側の角丸を「0」にします。次に「コンテンツの背景色などを変える」と同じ手順で項目を選択し、下側だけに角丸を設定します。

アコーディオンブロックをカスタマイズ（応用編）

ここからはより高度な設定になりますが、Dressで擬似要素のbeforeやafterを使用すれば、さらに上級向けのカスタマイズができます。

before要素、after要素はプルダウンのオプションから選択します。

バーのbefore要素（アコーディオンブロック ＞ アコーディオン：バー ＞ リンク ＞ before）で、三角のアイコンを追加したデザインです。
現在地（アコーディオンブロック ＞ アコーディオン：バー：現在地 ＞ リンク ＞ before）では向きを変え、トランジションを設定すれば、開閉時に回転する矢印になります。

バーのbefore要素（アコーディオンブロック ＞ アコーディオン：バー ＞ リンク ＞ before）で、右側に矢印を入れました。
さらに、コンテンツ部分を吹き出しっぽく見せるため、バーのafter要素（アコーディオンブロック ＞ アコーディオン：バー：現在地 ＞ リンク ＞ before）でコンテンツ上部に表示される▲を追加しています。

サンプルサイトのダウンロード

ちょっと難しいと感じられた方でも安心してください。
今回のサンプルサイトのサイトデータをBiNDupで実際に試すことができます。
（BiND10以降、BiNDup対応）
BiNDupをまずは無料で使ってみる
データは以下に用意しましたのでログインしてダウンロードしてみてください。