SWELLの始め方ガイド|これからSWELLを使い始める方はこちら→SWELLの始め方ガイド→クリックタップ

SWELLのFAQブロック|よくある質問(FAQ)の構造化データ出力もできる!

SWELLのFAQブロック|よくある質問(FAQ)の構造化データ出力もできる!
  • URLをコピーしました!

SWELLのFAQブロックについて紹介します。

この記事の内容
  • FAQブロックでできること
  • FAQブロックの使い方
FAQブロックでできること
  • Q&Aを見やすく簡単に設置できる
  • FAQの構造化データを出力できる
SWELLのFAQブロック-1
FAQブロックのデザイン
SWELLのFAQブロック-2
「よくある質問」のリッチリザルト

※詳しくは「SWELLのFAQブロックでできること」で解説

SWELLのFAQブロックは、「よくある質問」のリッチリザルトを表示させるための構造化データを簡単に出力できるので本当にありがたいです。

さとしん

FAQブロックはとても簡単に使えて便利なブロックなのでぜひ覚えておきましょう…!


ブロックエディターガイド

SWELLの高機能なブロックエディターを快適に使うためのガイドを作りました。

目次

SWELLのFAQブロックでできること

SWELLのFAQブロックとは、「よくある質問(FAQ:Frequently Asked Questions)」のようなQ&Aを簡単かつ綺麗に表示できて、FAQ形式の構造化データを出力してGoogle検索結果にリッチリザルトを表示させることもできる便利なブロックです。

SWELLのFAQブロックでできることを簡単に2つ紹介します。

  1. よくある質問(FAQ)の構造化データを出力できる
  2. FAQブロックのスタイルは複数から選択できる

それぞれ紹介します。

よくある質問(FAQ)の構造化データを出力できる

SWELLのFAQブロックでは、Googleの検索結果に「よくある質問」をリッチリザルトとして表示するための構造化データを簡単に出力できます。

この機能は、SWELLのver2.5.0アップデートで実装されました。

>>

よくある質問のリッチリザルトは以下の様なイメージです。

SWELLのFAQブロック-2

構造化データを出力するための設定方法は「FAQ構造化データの出力方法」で紹介します。

FAQブロックのスタイルは複数から選択できる

SWELのFAQブロックでは、FAQのデザインを複数のパターンから選択できます。以下がデザインの一例です。

SWELLのFAQブロック-13
FAQブロックの例1
SWELLのFAQブロック-14
FAQブロックの例2
SWELLのFAQブロック-15
FAQブロックの例3
SWELLのFAQブロック-16
FAQブロックの例4

設定できるFAQのデザインは公式マニュアル「」に画像付きでまとめられているので見てみてください。

また、FAQブロックのカラーをお好みでカスタマイズすることもできるので、この後の「FAQブロックのカラーをカスタマイズする方法」で紹介します。

みにしん

サイトの雰囲気などによってスタイルをお好みで設定できるのが嬉しいね…!

ここからは実際にSWELLのFAQブロックの操作方法を紹介していきます。

SWELLのFAQブロックの使い方

SWELLのFAQブロックの基本的な使い方は以下のとおりです。

STEP
メインコンテンツエリアで+ボタンをクリック
SWELLのFAQブロック-3
STEP
「FAQ」を探してクリック
SWELLのFAQブロック-4
ちなみに…

ブロックエディターでは、段落ブロック内に「/ + ブロック名」を入力することでブロックを検索して呼び出すことができます。

FAQブロックの場合は、以下の名称でブロックを呼び出すことができます。

  • /faq
  • /qa
さとしん

「/」の操作は覚えておくと便利ですよ…!

詳しくは「ブロックエディターの記事執筆を快適にするショートカットまとめ!」で紹介しています。

STEP
Q&Aにお好みの内容を入力する
SWELLのFAQブロック-5

Qにはテキストのみ入力可能で、Aにはテキスト以外にも自由にブロックを配置できます。

STEP
必要に応じて「項目を追加」ボタンでQA項目を追加する
SWELLのFAQブロック-6
STEP
サイドバーから細かい設定をする
SWELLのFAQブロック-7

サイドバーの設定については後述します。

ここからFAQブロックの細かい設定を紹介していきますが、選択できるスタイルの種類や設定方法は以下の公式マニュアルで解説されているので参考にしてください。

>>

この記事では、以下の2点の設定方法を紹介します。

  1. FAQ構造化データの出力方法
  2. FAQブロックのカラーをカスタマイズする方法

FAQ構造化データの出力方法

FAQの構造化データを出力して、検索結果にリッチリザルトとして表示させたい場合は以下のように設定します。

FAQブロックを選択した状態で「サイドバー」→「FAQ設定」→『構造化データを出力する』をオンにする

SWELLのFAQブロック-8

『構造化データを出力する』をオンにすると、JSON-LD形式で構造化データが出力されるようになります。

設定をオンにすれば必ず検索結果に「よくある質問」のリッチリザルトが表示されるわけではありません。質問の内容など、適切なコンテンツを作成しましょう。

親ブロックの選択

「構造化データを出力する」ボタンは、親ブロックを選択している時のみ表示されます。

子ブロック(QA項目)を選択している状態のときに、ブロック右上に『親ブロックを選択』ボタンが表示されるので、クリックして親ブロックを選択した状態にしておきましょう。

SWELLのFAQブロック-9

FAQブロックのカラーをカスタマイズする方法

FAQブロックのカラーは以下の3種類から選択できます。

  • テキスト色
  • メインカラー
  • カスタムカラー

それぞれのカラーが、SWELLのどこの設定と連動しているか紹介します。

テキスト色

テキスト色は、サイト全体の文字の色と同じ設定です。以下から設定できます。

WordPress管理画面→「外観」→「カスタマイズ」→「サイト全体設定」→「基本カラー」→『テキストカラー』

SWELLのFAQブロック-10

メインカラー

メインカラーは以下から設定できます。

WordPress管理画面→「外観」→「カスタマイズ」→「サイト全体設定」→「基本カラー」→『メインカラー』

SWELLのFAQブロック-11

カスタムカラー

カスタムカラーは、FAQブロック専用のカラーを設定できます。

カスタムカラーの設定のみ、カスタマイザーではなく「SWELL設定」でカスタマイズできるので覚えておきましょう。

以下からカスタムカラーを設定できます。

WordPress管理画面→「SWELL設定」→「エディター設定」→「カラーセット」→『Q&A設定』

SWELLのFAQブロック-12
みにしん

自分のサイトに合う色を設定しておくのも良さそうだね…!

ここまでで、SWELLのFAQブロックでできることと使い方の紹介は終了です。

FAQブロックについてよくある質問

実際にSWELLのFAQブロックを使って、よくある質問風に回答してみました。

「構造化データを出力する」ボタンが表示されない

FAQの親ブロックが選択されているか確認してみましょう。子ブロック(QA項目)を選択した状態だと「構造化データを出力する」ボタンは表示されません。

詳細はFAQ構造化データの出力方法で紹介しています。

FAQブロックのカラーを変更したい

「SWELL設定」→「エディター設定」画面でFAQのカスタムカラーを設定できます。

詳細はFAQブロックのカラーをカスタマイズする方法で紹介しています。

SWELLのFAQブロックについてまとめ

SWELLオリジナルの「FAQ」ブロックについて紹介しました。

FAQブロックでできることを簡単にまとめると以下のイメージです。

FAQブロックでできること
  • Q&Aを見やすく簡単に設置できる
  • FAQの構造化データを出力できる
SWELLのFAQブロック-1
FAQブロックのデザイン
SWELLのFAQブロック-2
「よくある質問」のリッチリザルト

※詳しくは「SWELLのFAQブロックでできること」で解説

FAQ形式の構造化データを簡単に出力できるので、適切に活用することでGoogleの検索結果に「よくある質問」のリッチリザルトを表示することもできます。

とても便利なブロックなので、ぜひ活用してみてください。

最後まで読んでいただきありがとうございました。


はこちらからどうぞ…!

SWELLのブロックエディターを使いこなすためのガイドを作りました!

当サイトWebNote+では、SWELLのブロックエディターで快適に記事を書くために知っておきたい内容をまとめたガイドを作成しています。

WordPress標準の機能とSWELLオリジナルの機能をフルに活用して、記事執筆の効率を上げて楽しくブログ運営をしていきましょう。

SWELLのFAQブロック|よくある質問(FAQ)の構造化データ出力もできる!

この記事が気に入ったら
フォローしてね!

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