AFFINGER7のFAQブロックの使い方｜設定方法と表示カスタマイズを解説

こんにちは "osaboo"です。"@osaboo_Bot"

この記事で解決できる悩み

この記事では、これらのお悩みを解決します。

「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。

関連記事 AFFINGER7の基本設定については、以下の記事で詳しく解説しています。

AFFINGER7のFAQブロックとは？

AFFINGER7のFAQブロックは、記事内に「質問」と「回答」をセットで表示できる専用ブロックです。

FAQのデザインを変更できるほか、FAQ構造化データの出力にも対応しています。

読者からよくある質問をまとめたいときや、記事の内容に関する疑問を整理したいときに便利です。

また、FAQブロックでは以下のような設定ができます。

• FAQのスタイル変更
• テキスト・背景色の変更
• 質問・回答のデザイン変更
• 質問のHTMLタグ変更
• FAQ構造化データの出力
• FAQの折りたたみ
• 枠線の表示

AFFINGER7のFAQブロックを使えば、こうした設定を記事編集画面からまとめて変更できます。

AFFINGER7のFAQブロックの使い方

ここからは、AFFINGER7でFAQブロックを追加する方法と、基本的な設定項目を解説します。

❶ FAQブロックの挿入手順

• 投稿（エディター）画面での作業になります。

基本的な「AFFINGER：FAQ」ブロックの挿入手順をご紹介します。

投稿（エディター）画面を準備

Menu『WordPress管理画面 → 投稿 → 投稿を追加』をクリックします。

投稿（エディター）画面が表示されます。（編集する場合は、投稿一覧から対象記事を選択してください。）

FAQブロックを追加したい位置をクリックします。

ブロック挿入ツール（ブロックインサーター）を切り替え

『＋（ブロックインサーター）』をクリックします。

ブロックタブメニューから『AFFINGER：FAQ』を選択

ブロック挿入ツール切り替えアイコンが『 x 』に変わり ブロックタブのメニューが表示されます。

AFFINGERから『AFFINGER：FAQ』を選択して投稿（エディター）画面に挿入します。

『AFFINGER：FAQ』をクリックします。

FAQブロック挿入完了

投稿（エディター）画面に「AFFINGER：FAQ」ブロックが表示されます。

挿入直後では、以下のように表示されます。

❷ 質問と回答を入力する

FAQブロックでは、質問と回答をそれぞれ入力します。

質問には読者が知りたいことを入力し、その下に回答を記載します。

たとえば、AFFINGER7についてのFAQなら次のように設定できます。

複数の質問と回答を追加することもできます。

右下の「＋」をクリックすると、FAQを1件追加できます。

FAQを複数作成する場合は、質問ごとに回答をわかりやすくまとめていきましょう。

❸ FAQブロックの設定方法

設定メニューは、投稿（エディター）画面の右側にある「設定 → ブロック」タブから確認できます。

表示されていない場合は、以下の画面を参考に右上の設定アイコンをクリックしてください。

FAQの設定方法「ブロック」→「設定」

「設定」タブでは、「テキスト」「質問」「回答」「フォントサイズ」「質問のHTMLタグ」など、FAQの色や表示に関する項目を設定できます。

「ブロック」→「設定」の詳細設定項目

FAQの設定方法「ブロック」→「スタイル」

「スタイル」タブでは、9種類のFAQスタイルから選択できます。

各スタイルのプレビューを確認しながら、サイトのデザインに合った表示を選べます。

「ブロック」→「スタイル」の詳細設定項目

関連記事
FAQブロックのデザインだけでなく、サイト全体のデザインを整える方法は、以下の記事で詳しく解説しています。

❹ ツールバーからFAQブロックのロックを解除する方法

FAQブロックを選択した状態でツールバーのメニューを開くと、ブロックのロックを解除できます。

ロック解除後は、質問・回答ブロックを個別に移動したり削除したりできるようになります。

ロックを解除したい質問（Q）を選択し、「ロックを解除」アイコンをクリックしてチェックを外します。

ロックを解除したい回答（A）を選択し、「ロックを解除」アイコンをクリックしてチェックを外します。

FAQブロックのロック解除後に配置を変更した表示例

スライドブロックのような折りたたみ形式で、質問（Q）のみを表示できます。

FAQブロックのスタイル変更後の表示例

AFFINGER7のFAQブロックは、質問と回答を追加するだけでなく、デザインやスタイルも変更できます。

サイト全体のデザインに合わせてカスタマイズすれば、FAQも統一感のある表示にできます。

ここでは、FAQブロックのデザイン・スタイル変更後の表示例を紹介します。

主に以下の9種類のスタイルを利用できます。

AFFINGER7のFAQブロックを使うポイント

AFFINGER7のFAQブロックは、読者が記事の内容を確認しやすくするために活用できます。

FAQを作成するときは、次のポイントを意識しましょう。

質問は具体的にする

質問は、読者が実際に疑問に感じる内容を具体的に書きます。

「FAQブロックについて」などの曖昧な質問よりも、

AFFINGER7のFAQブロックはどこから追加できますか？

のように、知りたい内容がわかる質問にすると回答も書きやすくなります。

回答は簡潔にまとめる

回答は、質問に対する答えを簡潔にまとめます。

詳しい説明が必要な場合は、関連記事への内部リンクを設定する方法もあります。

FAQの内容を記事と一致させる

FAQには、記事の内容と関係する質問を設定しましょう。

特にFAQ構造化データを利用する場合は、ページ上に実際に表示している質問と回答を正しく設定することが大切です。

FAQ構造化データを設定するときの注意点

AFFINGER7のFAQブロックでは、FAQ構造化データを出力できます。

ただし、構造化データを設定しただけで、検索結果にFAQが必ず表示されるわけではありません。

FAQ構造化データを利用する場合は、実際のページに表示されている質問と回答と内容を一致させておきましょう。

また、FAQは検索エンジン向けだけに作るのではなく、読者が疑問を解決できる内容にすることが重要です。

AFFINGER7のFAQブロックに関するよくある質問

AFFINGER7のFAQブロックはどこから追加できますか？

WordPressの投稿編集画面でブロックを追加し、「AFFINGER:FAQ」を選択すると追加できます。

FAQブロックのデザインは変更できますか？

はい。9種類のFAQスタイルから選択でき、サイトのデザインに合わせて表示を変更できます。

FAQの質問を見出しにできますか？

はい。FAQブロックの設定から質問に使用するHTMLタグを変更できます。

ただし、見出しタグを設定すると、目次にFAQの質問が表示される場合があるため注意してください。

FAQの回答を折りたたんで表示できますか？

はい。折りたたみ設定を利用すると、質問をクリックして回答を表示する形式にできます。

FAQ構造化データに対応していますか？

はい。AFFINGER7のFAQブロックはFAQ構造化データの出力に対応しています。

関連記事 AFFINGER7の基本設定については、以下の記事で詳しく解説しています。

まとめ！AFFINGER7のFAQブロックの使い方｜設定方法と表示カスタマイズを解説

AFFINGER7のFAQブロックを使えば、記事内に質問と回答をわかりやすく表示できます。

9種類のスタイルからデザインを選択できるほか、色やフォントサイズ、質問のHTMLタグ、折りたたみ、構造化データなども設定できます。

FAQを設置するときは、読者が疑問に感じる内容を具体的な質問にして、回答を簡潔にまとめることがポイントです。

AFFINGER7のFAQブロックを活用して、読者が必要な情報を見つけやすい記事に整えましょう。