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

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

Share on facebook
Share on twitter
Share on pocket
Share on pinterest
accordion_thumbnail

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段階です。残念ながら、一部分のみ枠線を加える事は出来ません。

 

【タイトル】

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