CocoonのFAQブロックは便利ですが、実際に記事を書いていると、
- FAQが目次に出ない
- 長文記事だと埋もれてしまう
- せっかくFAQを書いても読まれにくい
と感じることがあります。
FAQも目次に出せたら便利なのにな〜
と思ったことがある方向けに、今回はFAQの質問部分だけをH3見出し化するカスタマイズを紹介します。
実際に当サイトでも導入していますが、FAQ周りの導線が整理され長文記事でも使いやすくなりました。
実装するのはコードのコピペでOKなので、CocoonでFAQブロックをよく使う方はぜひ試してみてください。
サンプル｜見出しに変更したFAQブロックの表示例
以下は、実際にH3見出し化したFAQブロックの表示例です。
質問文がH3として出力されるため記事上部の目次にもFAQが並び、見たい場所へ移動しやすくなります。
- Q
（H3）CocoonのFAQブロックとは何？
- A
Cocoonに標準搭載されているブロックで、「よくある質問と回答」を見やすく整理して表示できます。コードを書かなくてもFAQページが作れる便利な機能です。
- Q
（H3）FAQブロックはSEOに効果がある？
- A
CocoonのFAQブロックは構造化データを自動出力するため、検索結果でFAQが表示されやすくなり、クリック率向上が期待できます。
- Q
（H3）FAQの質問は目次に表示される？
- A
デフォルト状態ではFAQの質問文は見出しタグではないため、目次には表示されません。
- Q
（H3）FAQをたくさん入れても問題ない？
- A
内容がユーザーの役に立つものであれば問題ありません。ただし、重複した質問や薄い内容ばかりになるとSEO評価が下がる可能性があります。
Cocoon｜FAQブロック見出し化カスタマイズのポイント
このカスタマイズは、FAQブロックの「質問テキスト」だけをH3見出しに変換し、装飾や構造化データはそのまま維持します。
そのため、既存のFAQデザインやSEO構造を崩さず現在の運用をそのまま活かしながら導入できます。
Cocoon｜FAQカスタマイズの実装前に知っておきたい注意点
実装は必要なコードのコピペだけですが、PHPを編集するためいくつか注意点があります。
- PHPの編集を間違えると重大なエラーが発生することがあります。
- 作業前に以下バックアップをおこない、すぐに元に戻せるようにしておくと安心です。
- 子テーマの
functions.php、style.cssに追加してください。 - 親テーマに入れると、アップデート時に上書きされてしまいます。
- 管理画面で「外観」→「テーマファイルエディター」を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から「テーマのための関数 (functions.php)」を開く
- 既存のコードは消さず、//以下に子テーマ用の関数を書く の下の行に追記
エラー防止：不要なスペース等が入らないよう、慎重に編集をおこなってください
- 管理画面で「外観」→「テーマファイルエディター」を開く
- 子テーマ（Cocoon Child）が選択されているか確認
- ファイル一覧から「スタイルシート (style.css)」を開く
- 既存のコードは消さず、/* 子テーマ用のスタイルを書く */ の下の行に追加
CocoonでHTML・CSS・PHPを編集する場所については、こちらで詳しく解説しています。
→ Cocoonカスタマイズ（HTML・CSS・PHPの使い分け）
実装方法｜FAQブロックの質問をH3化する手順
ここから先では、実際にそのまま使えるコードを使ってFAQを安全に見出し化する方法を解説します。
単純に h3 へ置換するだけでも見出し化はできますが、
- FAQデザインが崩れる
- Cocoonスキンと干渉する
- 見出し装飾が二重になる
- 余白バランスが崩れる
など、細かい調整が意外と必須です。
この記事では、実際に当サイトで運用している形をベースに、「あとから困りにくい構成」でまとめています。
一度入れてしまえば、FAQを追加するたびに自然と記事構造も整っていくので、長文記事との相性もかなり良くなります。
特にFAQを多く使うブログほど、「もっと早く入れておけばよかった」と感じやすいカスタマイズです。
■ 販売価格
980円（税込）
Comment 記事の感想を書き込んでいただけると幸いです