【Elementorを使ったWordPressサイト制作⑧】アコーディオンの作り方
記事コラム
こんにちは、webデザイナーのLeycoです。
「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。
前回に引き続き、「WordPressで簡単にwebサイトが作れる！」と人気が高いElementorというプラグインをご紹介しています。
今回は、Elementorでセクションを完成させます。
webサイトを自作したいという方は、ぜひご覧ください。
（なお、今回の内容は、ご自身のサーバーでWordPressが作業できる環境になっていることが前提です。
まだ設定されていない方は、他のブログで設定方法をご紹介していますので、ご確認ください。）
今回、作っているwebページのデザインはこちらです。
今回は、「セクション③」のアコーディオン部分を作っていきます。
はじめに：アコーディオンってどういうもの？
アコーディオンとは、クリックすると折りたたまれている部分が出てくるように動くものを指します。
サブメニューがたくさんある時や、今回のような「ご質問」の時によく使われます。
情報量が多くて、まとめておきたい時によく使うものなので、ぜひマスターしてみてください。
【アコーディオンの作り方①】編集画面にアコーディオンを追加します
エレメンターの編集画面を開き、左側のウィジェットメニューから「アコーディオン」を見つけてください。
（下のほうにあるので、「ウィジェットの検索」から探してもOKです）
もし、この画面になっていない方は、「elementor」の右脇にある９つの点のマークをクリックしてください。
「アコーディオン」を置きたい部分のコンテナにドロップします。
このような画面になりました。
【アコーディオンの作り方②】アコーディオンのそれぞれの項目を作成します
次に、テキストなどを入れていきます。
「アコーディオンアイテム」１つが、今回では１つの質問と回答のペアになります。
最初は２項目だけなので、「項目を追加」を選んで必要な数を増やします。
下の項目は、次のようになっています。
・「アイコン」：アコーディオンの下部分が開いていないときのアイコン
・「アクティブアイコン」：アコーディオンの下部分が開いているときのアイコン
今回は、変更していません。
次にそれぞれのアコーディオンアイテムにテキストを追加していきます。
「アコーディオン＃１」をクリックして、編集画面を開きます。
設定するのは以下の部分です。
・「タイトル」：今回はQ（質問）のテキストを入力
・「コンテンツ」：今回はA（回答）のテキストを入力
同様に、他のアコーディオンアイテムも設定しておきましょう。
【アコーディオンの作り方③】全体のデザインを整えます
最後に、色やフォントなどを修正します。
「アコーディオンを編集」の下にある「スタイル」を選んでください。
最初に「タイトル」の部分を設定します。
（今回は質問の部分が「タイトル」です）
・「背景」：文字の背景色です。今回は#EEEEEE
・色：文字色です。今回は#333333
・有効時の色：アコーディオンの下が開いているときの文字色です。閉じているときと違う色にすると、開いていることがわかりやすくなります。
今回は#01406E
また、タイポグラフィの部分は、
・フォント：Noto sans JP Bold 16px
で設定しています。
（以前にグローバルカラー・グローバルフォントを設定している場合は、地球儀マークから選べます）
文字の周りの余白はこのままでも良いのですが、設定をしておきます。
「パディング」を上下左右15pxにしておきました。
次に、「アイコン」を設定します。
・「配置」：テキストの前に置くか、後ろに置くか選べます。今回は後ろにおきました。
・「色」：アイコンの色です。
・「有効時の色」：アコーディオンの下部分が開いているときのアイコンの色です。
今回は、「色」「有効時の色」は「タイトル」と同じ色にしておきました。
続いて、「コンテンツ」の設定です。
「タイトル」と同じように設定します。
今回は、
・「色」：#333333
・「タイポグラフィ」：Noto sans JP medium 16px
にしました。
最後に、一番上の「アコーディオン」で、背景の長方形の枠線を設定します。
今回は、白の太めの枠線を設定して、それぞれの質問が独立して見えるようにしました。
これで終了です。
まとめ：これでアコーディオンが完成しました
最後にプレビューで見てみましょう。
（「更新」の左側にある「目」マークで、プレビューできます）
アコーディオンが動くのを確認してみてください。
ここまでご覧いただきありがとうございます。
次からはフッターの部分です。
サイトの完成も見えてきました。
次回もどうぞよろしくお願いいたします。
