つぶやき

-ブログ-

ユーザーのよくある疑問を解決できるQ＆AをWEBサイトに設置しておくと、単純な内容の問い合わせを減らすことができます。WEBサイトでQ＆Aを作る際には、アコーディオンパネルという開閉できるパネルがよく使われます。

アコーディオンパネルはプログラミング言語のjavascriptを使えば作成可能です。ただプラグインを活用すればプログラミングの知識がなくてもアコーディオンパネルは作成できます。そこで今回はプラグインの「Easy Accordion」を使って、Q＆Aを作成する方法を解説します。

Easy Accordionでアコーディオンパネルを作成する方法

まずは「プラグイン」から、Easy Accordionを有効化しましょう。

有効化すると、ダッシュボードの左側に「Easy Accordion」と表示されます。この「Easy Accordion」を選択して「Add New」をクリックしましょう。

まずはこれから作成するアコーディオンパネルのタイトルをつけましょう。タイトルはサイトに表示しなくてもよいものですが、管理するために必要です。

タイトルを作成したら「Add New Item」をクリックしてください。

「Add New Item」をクリックすると、個々のパネルごとのタイトルと内容を記入できます。

次のパネルを作成したいときには「Add New Item」をクリックしてください。

質問1を作成したので、下記のように次は質問２を作成しています。

作りたいパネルをすべて作成したら、公開をクリックしましょう。

そして画面したにはアコーディオンパネルを表示するためのショートコードがあります。サイトにアコーディオンパネルを表示したい際には、このショートコードを使えば表示できます。

アコーディオンパネルを表示する方法

投稿ページでアコーディオンパネルを表示させるには、下記のように「＋」マークをタップして「Easy Accordion」をクリックしましょう。下記の画面に「Easy Accordion」がなかった場合は、その下にある「すべてを表示」からEasy Accordionを探してください。

「Easy Accordion」を選択すると、下記のようにこれまでEasy Accordionで作成したアコーディオンパネルのタイトルが表示されます。ここで自分が表示させたいタイトルを選択すれば、指定のアコーディオンパネルが表示されます。

ということで下記のようにアコーディオンパネルを表示できました。

背景や色もオプションで自在に設定できる

Easy Accordionではオプションの設定で、背景の色や文字など細かい設定も可能です。

下記のように「ACCORDION SETTINGS」「DISPLAY SETTINGS」「TYPOGRAPHY」から様々な設定が可能です。

例えば下記のような設定が可能です。

• Activator Event → パネルの開閉のトリガーの設定。クリックかマウスオバーを選択できる
• Accordion Mode on Load → ページを開いた際のパネルの状態。一番最初だけ開くか？などを設定できる
• Fixed Content Height → パネルの高さを設定する
• Accordion Section Title → パネルのタイトルを表示/非表示の設定
• Expand & Collapse Icon Size → アイコンのサイズの設定
• Icon Color → アイコンの色の設定
• Accordion Border →パネルの枠の大きさ、線の種類、色の設定
• Title Background Color → タイトルの背景色の設定
• Description Background Color → パネルの説明欄の背景色の設定
• Load Accordion Item Title Font → タイトル文字の大きさと文字の色の設定
• Load Accordion Item Description Font →パネルの説明文の大きさと色の設定

上記のように細かい設定ができるので、自分好みのアコーディオンパネルを作成してみてください。

GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。