Cocoon FAQブロックを見出し（H3）にする方法｜目次に表示させるカスタマイズ

Cocoonの「FAQブロック」は、よくある質問を分かりやすく整理できる便利なブロックです。

ただしデフォルトのままだと、質問文は見出しタグではなく通常のdiv要素として出力されます。

そのため、

• 目次に表示されない
• 記事構造として評価されにくい
• 長文記事では読み飛ばされやすい

といった気になるデメリットも。

そこでこの記事では、CocoonのFAQブロックの「質問部分」を 見出し（H3）に変換するカスタマイズ方法を紹介します。

作業時間は5分ほどで完了し、コードはコピペで使えるので初心者の方でも安心です。

FAQをただ置くだけで終わらせず、「記事構造の一部」として活かしたい方は、ぜひ取り入れてみてください。

Cocoon｜FAQブロックの質問を見出し（H3）に変えるメリット

CocoonのFAQブロックは便利ですが、初期状態では質問文が「見出し」として扱われません。

構造化データとしては適切に出力されていても、本文側ではセクションとして認識されにくいため、SEO面でもFAQの価値を十分に活かしきれないケースがあります。

FAQの質問を H3見出し化すると、SEOだけでなく読者体験も改善されます。

• SEO評価の向上
  • 検索エンジンがページ構造を理解しやすくなる
  • FAQの質問文がロングテール検索にも拾われやすくなる

• 読者の可読性UP
  • 目次にFAQ質問が並び、探しやすくなる
  • 知りたい情報へすぐジャンプできる

• 回遊率・滞在時間UP
  • 見出しジャンプで目的FAQに直行できる
  • 関連FAQも続けて読まれやすくなる

単なる見た目の調整ではなく、「検索エンジン」と「読者」の両方にやさしい構造に変えられるのが、このカスタマイズの最大のポイントです。

サンプル｜見出しに変更したFAQブロックの表示例

このサンプルは、実際にH3見出し化した状態のFAQブロックです。

このサンプルでは、質問文が H3 として出力されるため記事上部の目次にもFAQが並び、長い記事でも「知りたい質問へ一発でジャンプできる構造」になります。

Cocoon｜FAQブロック見出し化カスタマイズのポイント

このカスタマイズは、FAQブロックの「質問テキスト」だけをH3見出しに変換し、装飾や構造化データはそのまま維持します。

そのため、

• SEO評価やリッチリザルトに影響せず安全
• 記事構造を改善して目次や回遊率も向上

といった効果が期待できます。初心者でも安心して導入できる方法です。

Cocoon｜FAQカスタマイズの実装前に知っておきたい注意点

実装は必要なコードのコピペだけですが、PHPを編集するためいくつか注意点があります。

• 必ずバックアップを取る

• PHPの編集を間違えると重大なエラーが発生することがあります。
• 作業前に以下バックアップをおこない、すぐに元に戻せるようにしておくと安心です。

• 子テーマの functions.php
• 子テーマの style.css（スタイルシート）

• 必ず「子テーマ」に追加する

• 子テーマの functions.php、style.css に追加してください。
• 親テーマに入れると、アップデート時に上書きされてしまいます。

CocoonでHTML・CSS・PHPを編集する場所については、こちらで詳しく解説しています。
→ Cocoonカスタマイズ（HTML・CSS・PHPの使い分け）

実装方法｜FAQブロックの質問をH3化する手順

作業はとてもシンプルでコードを1つ追加するだけ。

H3の見出しスタイル（装飾）がそのまま反映されるので、必要に応じてCSSで調整します。（後述します）

手順①：子テーマの functions.php を開く

管理画面から次の場所へ進みます。

外観 → テーマファイルエディター → 子テーマ → functions.php

---

この先は有料コンテンツで、具体的な実装方法を解説します。

など、そのまま実装できる形でまとめています。

• 「FAQを目次に出したい」
• 「SEO評価をもう一段階上げたい」
• 「読者が迷わない構造にしたい」

という方は、この先を読めばすぐに導入できます。

Cocoonにはさまざまな便利ブロックが用意されています。FAQ以外の装飾ブロックも知りたい方は、こちらの記事も参考にしてください。

以下は有料コンテンツのご案内および特定商取引法に基づく表記です。