WordPressの「Table of Contents Plus」で目次と本文の見出しに数字を自動で入れる方法【Lightning対応】

---

WordPressの目次プラグイン「Table of Contents Plus（TOC+）」を使うとき、本文の見出しにも手動で「1.」「1.1」と数字を入れていませんか？

これをやってしまうと、あとから見出しの順番を入れ替えたときに、すべての数字を書き直さなければならず非常に面倒です。

今回は、記事本文の見出し（h2・h3）にも自動で連番を振るためのCSSカスタマイズをご紹介します。人気テーマ「Lightning」にも完全対応した確実なコードです。

プラグイン側の設定

まずは目次側に自動で番号を振る設定にします。

• WordPress管理画面の [設定] ＞ [TOC+] を開く。
• 「番号振り」にチェックを入れて保存する。

追加CSSにコードを貼り付ける

次に、本文の見出しの前に自動で数字を出力する記述を追加します。

• [外観] ＞ [カスタマイズ] ＞ [追加 CSS] を開く。
• 以下のコードをそのまま貼り付けて「公開」を押す。

/* Lightning本文エリア全体のカウンター初期化 */
.entry-body, .vk-post-body {
  counter-reset: lightning-h2;
}

/* h2見出しの処理 */
.entry-body h2, .vk-post-body h2 {
  counter-increment: lightning-h2;
  counter-reset: lightning-h3;
}
.entry-body h2::before, .vk-post-body h2::before {
  content: counter(lightning-h2) ". ";
}

/* h3見出しの処理 */
.entry-body h3, .vk-post-body h3 {
  counter-increment: lightning-h3;
}
.entry-body h3::before, .vk-post-body h3::before {
  content: counter(lightning-h2) "." counter(lightning-h3) " ";
}

コードは注意してご使用ください。

まとめ

この設定を一度行えば、記事を書くときは文字を入力するだけで、画面上には自動で「1. 見出し」「1.1 子見出し」と表示されるようになります。

見出しを並び替えても数字が自動でズレてくれるため、執筆の効率が大幅にアップします。