ホーム » アコーディオンの使い方

アコーディオンの使い方

アコーディオンの使い方

質問を押すと回答が開く、折りたたみ式の案内を作れます。

このページでできること
よくある質問を開閉式にする

スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記載した画面で行います。

① 「アコーディオン」を追加する

  1. 編集したいページを「Elementorで編集」で開きます。
  2. 左上の「+」(要素を追加)を押し、「アコーディオン」で検索します。
  3. 該当するウィジェットをページの入れたい場所へドラッグします。配置済みなら、その部品をクリックします。
撮影画面は入れ子式アコーディオンです。FAQスキーマは表示を整えるために必須の設定ではありません。

② 質問と回答を用意する

アコーディオン:コンテンツの実際の設定画面124
1 項目 #1 / 2 タイトル / 4 項目を追加
赤い番号は手順の番号に対応しています。
  1. 「アイテム」の「項目 #1」を開きます。
  2. 「タイトル」に「予約は必要ですか?」などの質問を入力します。
  3. 右側のページでその質問を開き、中に「テキストエディター」を追加して回答を書きます。
  4. 「項目を追加」で質問を増やし、同じ手順で回答を入れます。
ここを確認:質問を押すと、対応する回答が開く。

③ 見た目と表示を確認する

アコーディオン:スタイルの実際の設定画面12
1 項目間のスペース / 2 ヘッダー/コンテンツ
赤い番号は手順の番号に対応しています。
  1. 「スタイル」→「アコーディオン」で項目間のスペースを調整します。
  2. 「ヘッダー」で質問部分、「コンテンツ」で回答部分の見た目を整えます。
  3. 最初に開く項目などの動作は「コンテンツ」→「インタラクション」で確認します。
入力・使い方の例

Q. 予約は必要ですか? → 押すと「事前予約をお願いします。」という回答が開きます。

④ スマホで確認して保存する

上部のスマートフォンのアイコンで表示を確認します。「公開」または「更新」で保存し、プレビューや実際のページで動作を確認します。作成途中の場合は下書き保存を使います。

完了チェック
  • 質問を押すと、対応する回答が開く。
  • 回答が長くてもスマホで読める。

スマホ表示の調整方法保存・公開の手順

うまくいかないとき

回答を書く欄が見つからない

現在の入れ子式では右側で項目を開き、中に文章の部品を置きます。旧式ではコンテンツ欄に入力します。

画面は撮影時のバージョンです。同じ名前のAtomic版・Pro版・追加プラグインのウィジェットは設定が異なる場合があります。


← Elementor使い方マニュアルの目次へ