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

BiNDのアコーディオンブロックのカスタマイズについて紹介します。すでに活用されている方も、BiND初心者の方も参考にしてみてください。 アコーディオンブロックとは、タイトルバーをクリック(またはマウスオーバー)すると、コンテンツ部分が開閉するブロックのことです。実際の動作はサンプルサイトをご覧ください。 accordion_example_02

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

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

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

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

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

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

accordion_setting_02 ブロックの設定タブを開き、ブロックレイアウトからアコーディオンを選択してください。 オプションは用途に合わせて選択します。一部または全部のコンテンツを開いた状態にしたり、コンテンツが開くタイミングをクリックにするかロールオーバー(マウスオーバー)にするかを指定できます。 accordion_setting_03 段落スタイルを「タイトル」で指定した箇所がアコーディオンのバー部分になります。タイトルの下に入力した内容(次のタイトルの前まで)がバーをクリックした時のコンテンツになります。 accordion_default 編集内容を適用するとこのように表示されます。

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

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

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

accordion_dress_01 Dressを開き、プルダウンから「アコーディオンブロック > アコーディオン:バー > リンク」を選択します。背景色や文字色を設定すると、バーの色を変更できます。 Dressの設定方法はサポートサイトをご確認ください。 Dressの編集方法

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

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

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

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

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

accordion_dress_04 コンテンツエリアをカスタマイズする場合は、「アコーディオンブロック > カラム」を選択して、背景色などを設定してください。 デザインに合わせてWebフォントを使用するのもオススメです。 accordion_dress_06 WebフォントはDressの編集項目の中の「フォント」から選択できます。 こちらが色を変更した状態です。 accordion_sample_01 角丸やボーダーを設定すれば、一味違うイメージになります。 accordion_sample_02 角丸にする時は、前述の「アコーディオンのバーの色を変える」と同じ手順で項目を選択し、角丸を4隅に設定します。 開いた状態の時はバーとコンテンツが一体化しているように見せたいので、まずは前述の「現在開いているバーの色を変える」と同じ手順で項目を選択し、下側の角丸を「0」にします。次に「コンテンツの背景色などを変える」と同じ手順で項目を選択し、下側だけに角丸を設定します。

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

ここからはより高度な設定になりますが、Dressで擬似要素のbeforeやafterを使用すれば、さらに上級向けのカスタマイズができます。 accordion_dress_05 before要素、after要素はプルダウンのオプションから選択します。 accordion_sample_03 バーのbefore要素(アコーディオンブロック > アコーディオン:バー > リンク > before)で、三角のアイコンを追加したデザインです。 現在地(アコーディオンブロック > アコーディオン:バー:現在地 > リンク > before)では向きを変え、トランジションを設定すれば、開閉時に回転する矢印になります。 accordion_sample_04 バーのbefore要素(アコーディオンブロック > アコーディオン:バー > リンク > before)で、右側に矢印を入れました。 さらに、コンテンツ部分を吹き出しっぽく見せるため、バーのafter要素(アコーディオンブロック > アコーディオン:バー:現在地 > リンク > before)でコンテンツ上部に表示される▲を追加しています。

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

ちょっと難しいと感じられた方でも安心してください。今回のサンプルサイトのサイトデータを用意しましたので、ダウンロードしてご利用ください。 (BiND10以降、BiNDクラウド対応)