CSSカウンタで見出しに章番号を振る方法

ブログ運営
スポンサーリンク
読了時間 挨拶

記事は約 2 分で読めます。

くろやぎ
くろやぎ

みなさん、こんにちは!
くろやぎ(kuroyagikuncom)です。
よろしければ、Twitterの方にも遊びに来てください。

ブログ運営
Info
最新のブログ運営(PV&収益)についてはTwitterで報告しています。
#クロヤギの運営報告

この記事では、CSSカウンタで見出しに章番号を振る方法を紹介します。

対象読者
  • 記事内のタイトルに番号を振りたい方

教科書や論文を読んでいるとよく「第○○章 第××節」というような表示を見かけますよね?
ウェブサイトの記事に対してもこのような表示を付け加えることができます。

内容
  • CSSカウンタとは何か
  • CSSカウンタの使い方
  • CSSカウンタで見出しに章番号を振る方法

それではこれから、CSSカウンタで見出しに章番号を振る方法について解説していきます。

スポンサーリンク

CSSカウンタとは何か

CSSカウンタとは、任意のHTML要素を数えて、ナンバリングする機能です。
contentプロパティのcounter()関数を使うことで、擬似クラス(:afterや:before)にナンバーを出力できます。

CSSカウンタの使い方

CSSカウンタを使うためには、「counter-reset」「counter-increment」という2つのプロパティを理解する必要があります。

  • counter-reset:カウンタをリセット(カウンタ変数宣言)
  • counter-increment:カウンタに1を足す

counter-resetに設定する値は任意です。
C言語で言うところの「int i;」という文で、変数「i」を宣言するイメージです。

counter-incrementを設定した要素が呼び出されると、先ほどリセットしておいたカウンタに1が足されます。
C言語で言うところの「i++;」のイメージです。

CSSカウントを用いて見出しに章番号を振る

それでは、実際にはてなブログの記事内のタイトルに章番号を振るためのコードを紹介します。
まず、完成予想図です。

次のコードをデザインCSSに追記してください。

.entry-title {
  counter-reset: h2;
}
.entry-content h2 {
  counter-increment: h2;
  counter-reset: h3;
}
.entry-content h3 {
  counter-increment: h3;
  counter-reset: h4;
}
.entry-content h4 {
  counter-increment: h4;
  counter-reset: h5;
}
.entry-content h5 {
  counter-increment: h5;
  counter-reset: h6;
}
.entry-content h6 {
  counter-increment: h6;
}
.entry-content h2:before {
  content: counter(h2) ". ";
}
.entry-content h3:before {
  content: counter(h2) "." counter(h3) ". ";
}
.entry-content h4:before {
  content: counter(h2) "." counter(h3) "." counter(h4) ". ";
}
.entry-content h4:before {
  content: counter(h2) "." counter(h3) "." counter(h4) ". "  counter(h5) ". ";
}
.entry-content h4:before {
  content: counter(h2) "." counter(h3) "." counter(h4) ". "  counter(h5) ". "   counter(h6) ". " ;
}

見出しはh2~h6に対応しています。
contentプロパティの値を弄ることで、章番号のデザインを変更することができます。

まとめ

いかがでしたか?
今回の記事で学んだことをまとめておきますね。

  • CSSカウンタとは何か
  • CSSカウンタの使い方
  • CSSカウンタで見出しに章番号を振る方法

記事内のタイトルに「第○○章 第××節」というような、ちょっとかっこいい(?)装飾をしたい方は、ぜひこの記事を参照しながら実装してみてください。

初心者ブロガーが登録すべきASP ベスト3

初心者ブロガーが登録すべきASP ベスト3

A8.net

A8.netは広告主数が豊富で、初心者ブロガーでも簡単に登録できるためアフィリエイトを手軽に始めることができます。
また、A8.netは「セルフバック」が充実していて、レビュー記事にはもってこいです。

もしもアフィリエイト

もしもアフィリエイトは、Amazonアソシエイトと楽天アフィリエイトを一緒に管理できるため余計な手間がかかりません。
さらに、W報酬制度やプレミアム報酬などの、他のASPにはない魅力的な報酬制度があります。

バリューコマース

バリューコマースは、スマートフォン向けのオーバーレイ広告が掲載できる点が特徴です。
また、バリューコマースにしかない広告案件があり、漏れをなくすためのサブののASPとして登録しておいて損はないです。

ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

4人の購読者に加わりましょう

スポンサーリンク
ブログ運営
クロヤギ

コメント

タイトルとURLをコピーしました