WordPressのテーマビルダープラグイン「Elementor」のファンブログ

Elementorのアコーディオン ウィジェットマニュアル

Elementorのアコーディオン 意外と使えるウィジェットについて、今日はレビューして行きたいと思います。このウィジェット実は兄弟ウィジェットがあって、実はそっちの方が便利なのでは?と悩ましいのですが、その辺も合わせてご紹介して参ります。

アコーディオンウィジェットとは?

アイテムをリスト表示し、1つのアイテムがクリックされると、その中のコンテンツがびよ〜んと表示されるウィジェットです。ただ、世界的に言われているのが、初期表示(画面が表示された時)で1つめのアイテムが開いてしまう点にあります。

この回避策はこの記事の最後に紹介したいと思います。

基本の使い方(コンテンツ)

いつもの様に、各設定項目を見ていきたいと思います。

accordion-01

まずは、コンテンツタブで設定出来る項目を見て行きましょう!最初にあるのが、「アコーディオンアイテム」です。これは上の図の様に、1つのブロックが1つのアコーディオンアイテムとなります。タイトルや中身のコンテンツはここで設定をします。このアイテムを削除したい場合は「×」、複製はその隣、新規追加はグレーの「+項目追加」をクリックしてアコーディオンアイテムを増やして行きます。

accordion-02

中身はアコーディオンアイテムをクリックすると、ここもびよ〜んって広がり、タイトルとコンテンツを編集する事が出来ます。コンテンツ部分は投稿と同じエディターが使え、画像やリンクなどを挿入する事が出来ます。

accordion-03

記憶が正しければ・・・投稿のエディタと同じなので、ショートカットも入れられます。ので、Pro版をお使いの方は、ここへElementorのテンプレートを入れる事が出来ます!(※記憶が正しければです)

おじさん
おじさん
アイアンシェフ!!!

世代がバレますよ・・・(笑)

accordion-04

次はアイコンです。アイコンの設定方法は、アイコンウィジェットと同じなので、こちらの記事をご覧ください。

Elementorのアイコン 完全解説

上の「アイコン」がアコーディオンアイテムが閉じている時、下の「アクティブアイコン」がクリックされてコンテンツを表示している時のアイコンを設定出来ます。

UI/UXを加味したアイコンの選び方

ここで、ちょっと話がそれますが・・・このアコーディオンウィジェット、作った本人は「ここをクリックして中身を見てもらって・・・」なんて理解していますが、初めてこのアコーディオンを見た人が、アコーディオンと気付かない場合があります。

実際、依頼を受けサイト制作した際に・・・

クライアント:「この文の中身はどこに書いてあるの?」
自分:「ここをクリックして頂くと・・・」
クライアント:「あぁ〜、わかりづらいね」
自分:「す、すみません」

と、なった事があります。つまりは、初見の人がクリック出来る場所と認識してもらえない事があるという事です。

この事から、対策としては2つ、

1)アイコンはクリック出来るよ〜という事がわかるアイコンが望ましい!
2)ウィジェット周辺に「ご覧になりたい項目をクリックして下さい」と補足説
  明を掲載する。

少しでも自分の体験がお役に経てば幸いっす!

おぉーたまには役に立つ事言うじゃん!
おじさん
おじさん

ぶはっ・・・たまにって・・・(苦笑)

で、話を戻しますと、最後が「タイトルHTMLタグ」です。これはCSSやSEOなどに関連する内容となりますので、こちらの記事を参考にご覧下さい。

SEOとElementorについて

基本の使い方(スタイル)

accordion-05

まずはスタイルのカテゴリは「アコーディオン」「タイトル」「アイコン」「コンテンツ」で、それぞれのスタイルを設定する事が出来ます。

【アコーディオン】
ここで設定出来るのは枠線=ボーダーです。「幅」と「色」

accordion-06

ボーダー幅を設定すると、画像の様に緑の部分に枠線がつきます。枠線幅は10段階です。残念ながら、一部分のみ枠線を加える事は出来ません。

 

【タイトル】

(余計な矢印のせいでわかりづらいかも・・・すみません)
accordion-07

背景はアコーディオンアイテムのタイトル部分の背景です。背景は開く・閉じる関係なく、1色のみの設定しか出来ません。

「色」はテキストカラーの設定で、ここは閉じいる時の文字色設定です。開いた時に文字色を変化させるには、「有効時の色」を設定します。

「書体」は文字サイズなどいつものヤツです。

「パディング」は、このタイトル領域の設定が出来ます。

accordion-08

試しに、上下左右40pxで設定すると、タイトルの文字周辺の余白が大きくなります。この部分をこのパディングで設定します。

 

【アイコン】


accordion-09

まずは「配置」ですが、これは説明するまでもなく、「左」か「右」にアイコンを配置するか決められます。

「色」はタイトル同様、有効時と閉じた状態とそれぞれ設定出来ます。「色」が閉じている時の色、「有効時の色」が開いている時のアイコンの色をそれぞれ設定する事が出来ます。

「スペース」はアイコンとタイトルの隙間を設定する事が出来ます。

 

【コンテンツ】

最後はコンテンツです。

accordion-10

背景、色、書体はそれぞれ字の如し!ちなみにコンテンツは有効時にしか表示されませんので、閉じた状態の設定はありません。

ここで小難しいのが、パディングかと思います。上の画像では「%」で、上下左右「20%」で設定しました。ピンクの矢印がそれぞれのパディングとなります。「タイトルとの位置を揃えたい!」など、文章のスペース余白でやるとレイアウトが崩れたりするので、注意しましょう!

※詳細については共通項目として割愛させて頂きます。

兄弟ウィジェット?

実はこのアコーディオンウィジェットには、兄弟ウィジェットと言われるものが(注意:これは勝手に自分が名付けてるだけです)存在します。その名は?!

kirikae-icon

切り替えウィジェットです!

ここで、突然ですがクイズです!次の動画をご覧下さい。

左右どちらがアコーディオンウィジェットでしょうか?

正解は左です!って簡単すぎましたね。でも、パッと見、分からなくないですか?(あえてデザインを無理やり近づけているせいもあるのですが)この2つのウィジェットの違いを見て行きたいと思います。

切り替えウィジェットとの違い①

accordion-kirikae2

まず違うのがページを読み込み最初に表示される状態です。左のアコーディオンは1つめのアイテムがぱっかーんって開いて表示されます。ですが、切り替えウィジェットは全て閉じた状態です。

実はこの初期表示がアコーディオンの最大のデメリットと世界中のユーザーが騒いでおります。ただ、個人的な考えとしては1つ開いて表示される事で、視覚的に「こうやって開けるので2つ3つ見てって〜」と主張され、開ける事に気づけるのでは?と考えます。ただ、初手で閉じてスッキリ見せる!というデザイン的気持ちも分かります。

難しい所ですなっ・・・
おじさん
おじさん

で、初手では閉じておきたい!となると現時点では出来ません。方法としてはプログラムコードをいじるか、アドオンプラグイン(閉じて表示するだけの)を導入するか、この兄弟ウィジェット「切り替え」を使うかがスタンダードの様です。

 

切り替えウィジェットとの違い②

アコーディオンの良いところ、1つのアイテムを開くと、別に開いてあったアイテムが自動的に閉じる所です。ですが、切り替えウィジェットは、開けたら開きっぱなし・・・閉じない限り開きっぱなし・・・という訳で、「ユーザーに閉じてもらうという負荷」の懸念があるのが切り替えウィシェットです。

ただ、ここまでくると考えに個人差が生じるので、①と②の違いを理解して上で、チョイスすると良いかと思います。

まとめ

アコーディオンも切り替えも効果的に使うと便利なウィジェットですが、ユーザー視点でクリック出来る場所と気付けるかなど、少し工夫が必要なウィジェットだと思います。

無理にこのウィジェットを使わず、箇条書きで表示した方がユーザーにとっては分かりやすい場合もあります。

この場合に限る事ではありませんが、常にユーザー視線でウィジェットの利用を考えると、素敵なサイトが出来ると思います!

この記事の関連講座

Elementorを使うためのWordPress講座
ブログの作り方講座

author

ITKA / 加藤 誠

ITKA / 加藤 誠

Elementorを使い始めて6年目、好き過ぎてファンブログを始めて4年。Elementorを使って年間約30サイトを制作しております。主にWebマーケティング支援事業を中心とし、現在5社の顧問・コンサルティングとして携らさせて頂いております。Elementorのご相談からWeb集客のご相談はお気軽にお問い合わせ下さい。

こちらもご覧下さい

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。