SWELL FAQブロックの使い方！Q&Aを設置する方法「シンプルで使いやすい」
こんにちは "osaboo"
です。"@osaboo_Bot"
SWELLの「FAQブロックの使い方」を初心者さん向けに解説します。
- SWELLブロック：FAQ
SWELL専用のブロックエディター機能です。
FAQブロックを使えば「Q&A」が簡単にできちゃいます。
- SWELLブロック：FAQとは…
- SWELLブロック：FAQの使い方
- FAQの挿入手順
- FAQの設定
- FAQのカスタマイズイメージ
- エディター設定：「Q・A」の背景カラー設定
- まとめ！
それではご覧ください。
SWELLブロック：FAQとは…
SWELLブロック：FAQとは…
「Q＆A」が簡単に作れる SWELL専用のブロックエディター機能です。
問題点の「疑問・質問」をQブロックにタイトル形式で入力し、その回答をAブロックに入力することで質疑応答を作成します。
『FAQブロック』のイメージはこんな感じです。
※ Q / Aのアイコンの形を円形にしています。
FAQブロックの使い方
この章では、FAQブロックの使い方をご紹介します。
FAQブロックの挿入手順とカスタマイズ（装飾）の2つのセクションに分けてご紹介します。
- FAQブロックの挿入手順
- FAQの設定
- FAQのカスタマイズイメージ
それでは順番に見ていきましょう。
FAQブロックの挿入手順
※ 作業は 投稿（記事編集）画面での作業になります。
基本的なFAQブロックの挿入手順をご紹介します。
Menu『WordPress管理＞ダッシュボード＞投稿＞新規投稿を追加』をクリックします。
投稿画面が表示されます。
（編集する場合は、投稿一覧から対象記事を選択してください。）
『+』をクリックします。
ブロック挿入ツールが『ｘ』切り替わり 以下の画面が表示されます。
SWELLブロックから『FAQ』を選択して投稿画面に設置します。
『FAQ』をクリックします。
投稿（記事編集）画面に『FAQブロック』が表示されます。
デフォルトでは、以下のように表示されます。
FAQブロックの設定
FAQの設定をご紹介します。
FAQのブロックを選択します。
FAQブロック領域をクリックして右上に表示される『親ブロックを選択』をクリックします。
以下の画面のようにブロック全体が 青枠で囲まれれば OK です。
設定メニューの場所は、投稿（記事編集）画面の右側に表示される『設定＞ブロック』タブメニューです。
表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。
ブロックタブメニュー詳細
- スタイル
-
- シンプル（デフォルト）
- 線あり
- ボックス
- ストライプ
4種類から選択
- FAQ設定
-
構造化データを出力する『ON/OFF』
- タイトルのHTMLタグ
-
『dt・h2・h3・h4・h5・h6』を選択
- Q / Aのアイコンの形
-
- 四角（デフォルト）
- 角丸
- 丸
3種類のアイコンから選択
- Qアイコンの色
-
- テキスト色（デフォルト）
- メインカラー
- カスタムカラー
- テキストの色（塗り潰し）
- メインカラー（塗り潰し）
- カスタムカラー（塗り潰し）エディタ設定変更可
6種類から選択
- Aアイコンの色
-
- テキスト色（デフォルト）
- メインカラー
- カスタムカラー
- テキストの色（塗り潰し）
- メインカラー（塗り潰し）
- カスタムカラー（塗り潰し）エディタ設定変更可
6種類から選択
-
※ 以下の項目は割愛します。
- デバイス設定
- ブロック下の余白量
- 高度な設定
Qブロックは、自動的に太字表示され、入力はテキストのみ有効です。
Aブロックは、段落（P）ブロックと同等で「テキスト・画像」等 自由に入力できます。
FAQのカスタマイズイメージ
FAQの表示スタイルは4種類用意されています。また、SWELL設定で色の設定変更ができるカラーが「Q・A」個別に用意されています。
※ デフォルトでのカラーはテキストの色になります。
スタイルは、以下のように表示されます。
アイコンは、以下のように表示されます。
- Q / Aのアイコン：四角の質問
-
Q / Aのアイコン：四角の回答
アイコンの色は、以下のように表示されます。
※ （塗り潰し）で表示しています。塗り潰し無しにサンプルは割愛します。
「スタイル・アイコン・アイコンの色」を組み合わせると多彩な表現が可能です。
あなたの好きな組み合わせで個性的なFAQブロックを作ってくださいね。
エディター設定：「Q・A」の背景カラー設定
※ WordPress管理画面からの作業になります。
Menu『WordPress管理＞ダッシュボード＞エディター設定』をクリックします。
以下の「エディター設定」画面が表示されます。
「カラーセット」タブを選択して 下側にスクロールします。
以下の画面が表示されるところまでスクロールします。
Q&A設定では、QブロックとAブロックが個別に色変更できます。
※ SWELL公式マニュアルはこちらからご覧いただけます。「使い方の様子を動的に確認できます」
まとめ！SWELL FAQブロックの使い方！Q＆Aを設置する方法「シンプルで使いやすい」
FAQブロックの使い方！Q＆Aを設置する方法をご紹介しました。使い方が簡単で記事に頻繁に使えるブロックエディター機能です。記事のスタイルにもよりますが…是非、活用してください。この記事が役立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
