Wix よくある質問の作り方!【質問をクリックすると回答が表示されるようなパーツの作成方法】

Wix よくある質問の作り方!

Webサイトでよく見かける「よくある質問」のパーツですがWixでアコーディオンも含めた実装方法が分からなかったのでこの記事にて記録します。

サイト編集内を色々と探してもそれらしきパーツは見当たらないんですよね,,,
私と同じような経験をする人が一人でも減ることを願い、さっそく本題に進みましょう。

では、よくある質問の作り方を解説していきます!

目次

よくある質問の追加

さっそく「よくある質問」のパーツを追加しましょう!
サイト編集のアプリから追加します。

サイト編集 → 画面左にあるツールバー → アプリ
検索バーで「よくある質問」と検索 → Wix FAQ を選択。

よくある質問の追加

するとよくある質問のパーツが追加されます。

「よくある質問」のパーツが追加されます

よくある質問の編集

追加したパーツはそのままでも十分に使えますが編集方法も少し解説していきます。

デザイン変更

最初から1番目の回答が開いているのが気になるので、クリックしたら表示される仕様に変更します。

よくある質問」パーツをクリック → 編集アイコンがでるので「設定」を選択。

編集アイコンがでるので「設定」を選択

Wix FAQの編集がでるので「設定」を選択。

Wix FAQの編集がでるので「設定」を選択

最初の回答を常に表示」のチェックを外す。

「最初の回答を常に表示」のチェックを外す

そうするとクリックしたら回答が表示される仕様に変更できます。

変更前
変更前
変更後
変更後

SNSアイコンを削除

デフォルトでは回答を表示すると画像のようなSNSアイコンがありますが、「よくある質問」のパーツに表示する可能性は少ないため削除します。

回答を表示するとSNSアイコンがあります

よくある質問」パーツをクリック → 編集アイコンがでるので「設定」を選択。
Wix FAQの編集がでるので「表示情報」を選択し、各SNSのチェックを外す。

各SNSのチェックを外す

これで回答を表示してもSNSアイコンがでなくなりました!

回答を表示してもSNSアイコンがでなくなった
SNSアイコンがでていない

質問と回答のテキスト変更

次は質問回答の内容を変更します。
よくある質問」パーツをクリック → 編集アイコンがでるので「よくある質問を管理」を選択。

編集アイコンがでるので「よくある質問を管理」を選択

ダッシュボードに切り替わるので変更したい項目の「編集」を選択。

ダッシュボードに切り替わるので変更したい項目の「編集」を選択

あとは質問と回答のテキストを編集すれば完成です!

質問と回答のテキストを編集すれば完成

挙動確認

実際に上記の流れで作成すると動画のような「よくある質問」パーツが作成できます。

完成イメージ

カテゴリーの設定

ここまで質問と回答などの編集をしましたが、カテゴリーごとに質問を表示したい場合もあるかと思います。Wixではカテゴリーも簡単に分けて表示できるのでご紹介します。

よくある質問」パーツをクリック → 編集アイコンがでるので「よくある質問を管理」を選択。
デフォルトでは「一般」というカテゴリーがありますが3点マークから「カテゴリー名を変更」を選択して任意のカテゴリー名に変更します。

カテゴリーの設定

カテゴリーの追加

同様にダッシュボードから編集できます。
画面右上の「新しく追加」から「カテゴリー」を選択して任意のカテゴリー名を入力し「Enterキー」で確定します。

カテゴリーの追加

カテゴリーの振り分け

カテゴリーを追加できたので質問内容をカテゴリーに振り分けます。
質問と回答を編集したときのように各質問の編集画面を開き、任意のカテゴリーにチェックを入れ、保存します。
※カテゴリーの表示順はダッシュボードからドラッグして変更できます。

カテゴリーの振り分け

デザインの調整

カテゴリーの設定はできたので編集画面に戻り、デザインの調整をします。
現在のカテゴリーを表示している時はそのカテゴリーの色を変更する仕様にしたいと思います。
デフォルトでは「選択したカテゴリー」と「カテゴリー」の色が同じなので「カテゴリー」の色を黒にし、フォントサイズも大きくします。
※よくある質問のデザインは見やすくするため「シンプル」に変更してます。

デザインの調整

上記の設定をすると動画のような仕様になります。これでカテゴリーの設定が完了です!

まとめ

今回はよくある質問の作り方を解説しました。
サイト編集内を色々と探してもそれらしきパーツは見当たりませんでしたが、アプリから追加すれば簡単にアコーディオンを含めた、よくある質問パーツが完成しましたね。
ここまで解説したよくある質問の作り方を駆使して、理想とするWebサイトに一歩近づく助けになることが出来たら幸いです!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる