WordPressでh2,h3,h4タグに自動で番号を追加する方法！Cocoon編

ブログ

­こんにちは、しらすです！Wordpressでブログを更新している中で、徐々にCSSもわかるようになってきたので、備忘録も兼ねて学んだCSSの変更方法をブログにしていきたいと思います。

今回はブログ内のタイトル行に自動で番号を振る方法を紹介したいと思います。

CSSを変更して番号を自動で追加 ~Counter~

Cocoon childのスタイルシート(style.css)を表示し、以下のコードを張り付けることで、h2,h3,h4要素に対して通し番号を付加することができます。

場所はどこでも構いませんが、保守性の面から、”子テーマ用のスタイルを書く”の下に張りつけてください

※h1ページのタイトル要素であり、私の場合は1ページに一度しか表示しないため、通し番号はh2から付加するようになっています。

※スタイルシートは、ワードプレス設定画面から「外観」→「テーマの編集」で表示可能です。右上にある”編集するテーマを選択”の部分が「Cocoon child」となっていれば大丈夫です。

/* タイトルに自動で章番号を表記 */
 body {
     counter-reset: chapter;
 }
 h2 {
   counter-reset: sub-chapter;
 }
 h3 {
   counter-reset: section;
 }
 .article h2::before {
   counter-increment: chapter;
   content: counter(chapter) ". ";
 }
 .article h3::before {
   counter-increment: sub-chapter;
   content: counter(chapter) "-" counter(sub-chapter) ". ";
 }
 .article h4::before {
   counter-increment: section;
   content: "(" counter(section) ") ";
 }

各主要な項目の説明

 body {
     counter-reset: chapter;
 }

h2用に用意したchapterという名前のカウンターをリセット (=0) します。body要素が呼ばれたときに作動するので、ページを読んだ際に実行されます。

 .article h2 {
   counter-reset: sub-chapter;
 }

h3用に用意したsub-chapterという名前のカウンターをリセット(=0)します。h2要素が呼ばれたときに作動します。

 h2::before {
   counter-increment: chapter;
   content: counter(chapter) ". ";
 }

::beforeを使って、contentの項目をh2の前に挿入します。2行目のcounter-incrementで、+1ずつカウントアップしていきます。ここで使用している”chapter”というカウンタは上記のbody要素が呼ばれるまでカウントアップされることになります。

※h3,h4は同じため割愛いたします。

参考リンク

Counterの仕様はこちらのリンクからご確認いただけます。

Using CSS counters - CSS: Cascading Style Sheets | MDN
CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headi...
developer.mozilla.org
スポンサーリンク