「よくある質問」の作成に便利なQ&Aブロックです。
目次
Q&Aブロックの追加方法
Q&Aブロックは「[ys]yStandard Toolbox」カテゴリーにある「Q&A」を選択します。
Q&AブロックはQA項目をグループ化するブロックの中に質問(Q)ブロックと回答(A)ブロックが追加された状態で追加されます。
設定は「QA項目をグループ化するブロック」と「質問(Q)ブロック」「回答(A)ブロック」でそれぞれ異なります。
Q&Aの設定
質問(Q)ブロック・回答(A)ブロック 設定
「質問(Q)ブロック」「回答(A)ブロック」の設定項目はほぼ同じですですが、それぞれ別々の設定ができるようになっています。
質問・回答内容の追加
質問・回答の内容は薄く「Q&A項目…」と書かれた欄に追加します。
初期状態では段落ブロックが1つ用意されていますが、段落ブロックを複数使ったり、画像ブロックやその他のブロックを使って質問・回答の内容を作ることもできます。
デザインサンプル
「デザインサンプル」ではFAQラベルのデザインをボタンひとつで設定できます。
好みのデザインを選んだ後、文字の色や枠線の色などを設定しましょう。
FAQラベルのデザイン設定
「FAQラベル」の各設定では「Q」「A」と書かれたラベル部分のデザイン設定を変更できます。
文字の太さや色、枠線の有無など、好みに設定しましょう。
「ラベルy表示位置」では「Q」「A」と書かれたラベルの表示位置を変更できます。
初期値では中央になっていますが、複数行の文章を記載する場合は「上」揃えにしておくと見栄えが良くなると思います。
FAQコンテンツ(文章)のデザイン設定
「FAQコンテンツ」設定では、文章の文字色やFAQ項目の背景色・下線などを設定できます。
文字色の設定については、コンテンツ内のブロック(例:段落ブロック)の色設定が優先されます。
FAQ全体設定
全体デザイン設定
「Q」と「A」の項目を囲うブロックの設定では、FAQ全体の背景色や枠線の有無などを設定できます。
開閉設定(アコーディオン設定)
「開閉設定」ではページ読み込み時にFAQのQのみ表示して、QをクリックするとAが表示されるアコーディオン方式にできます。
「開閉式にする」をONにすると、Q項目の右側に開閉ボタン(下矢印)が表示され、開閉ボタンの色も設定で変更できます。
デザイン見本
シンプル
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
開閉式
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
ラベル背景あり
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
ラベル枠線あり
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
下区切り線あり
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
背景色あり
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
背景色・下区切り線あり
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
全体背景色あり
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
全体枠線あり
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
下のみ枠線あり
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
質問サンプル質問サンプル質問サンプル
回答サンプル回答サンプル回答サンプル
構造化データ出力設定
※現在のバージョンでは構造化データ出力には対応しておりません。
※今後のバージョンアップで対応予定です。