読者です 読者をやめる 読者になる 読者になる

はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

はてなブログ記事内見出し(h2やh3)に自動で序数(番号)を追加するCSS

記事内の見出しはCSSで自動的にナンバリングできる。記事内の各セクションの順番を途中で入れ替えても、見出しの序数をいちいち書きなおさなくていい。便利。

挿入される序数の場所と装飾

次のページの見出しを用いて具体例を図解する。

下図でグレイの数字が序数。

ブログ記事における大見出しと中見出しの序数

序数の文字色をグレイにしている理由は次の通り。

  1. 序数は見出しほど主張しなくてもいいので控えめの色にしている。
  2. 序数と見出しの文字色が異なることで、勘違いが生じにくい。

上記2.の具体例。「加藤一二三九段」という様に同じ文字色で記述すると、ぱっと見では名前と段位の境目がわかりづらい。

加藤一二三九段」なら境目が一目瞭然。よって、序数と見出しは異なる文字色にしている。

どうやってCSSを編集するのか

管理画面でCSS編集にアクセスする方法を次の記事で図解している。

追加するCSSコード

「見出し入力補助機能」を使っているかどうかで、追加するCSSコードを二者択一する。

大見出しがデフォルトのh3タグの場合

記事の編集モードが「見たままモード」などで、下図で示す「見出し入力補助機能」で大見出しを設定している人用。挿入される大見出しはh3タグ。

はてなブログの見出し選択リスト

次のコードをコピペで追加すれば、h3h4h5のそれぞれに序数が自動的に付加される。

/*
はてなブログ記事内の見出し(h2やh3タグ)に自動で序数を追加するCSS - はぴらき合理化幻想
(大見出しがh3用)
http://hapilaki.hateblo.jp/entry/automatic-ordinal-numbers-for-h2-h3-h4
*/
.entry-title{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 h3:before{content:counter(h3) "\a0";color:#bbb;}
.entry-content h4:before{content:counter(h3) "\2e" counter(h4) "\a0";color:#bbb;}
.entry-content h5:before{content:counter(h3) "\2e" counter(h4) "\2e" counter(h5) "\a0";color:#bbb;}

大見出しにh2タグを使っている場合

記事の編集モードが「Markdownモード」などで、大見出しにh2タグを自分で意識して使っている人用。

次のコードをコピペで追加すれば、当ブログと同じようにh2h3h4のそれぞれに序数が自動的に付加される。

/*
はてなブログ記事内の見出し(h2やh3タグ)に自動で序数を追加するCSS - はぴらき合理化幻想
(大見出しがh2用)
http://hapilaki.hateblo.jp/entry/automatic-ordinal-numbers-for-h2-h3-h4
*/
.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 h2:before{content:counter(h2) "\a0";color:#bbb;}
.entry-content h3:before{content:counter(h2) "\2e" counter(h3) "\a0";color:#bbb;}
.entry-content h4:before{content:counter(h2) "\2e" counter(h3) "\2e" counter(h4) "\a0";color:#bbb;}

序数の文字色をカスタムするには

各コードに3ヶ所あるcolor:#bbb;のカラーコード(#bbb)を調整する。以下、サンプル。

  • #333
  • #777
  • #ddd
  • skyblue
  • green
  • red

売れ筋ランキング: ホームページ入門書 の中で最も人気のある商品です

過去記事に手動で入れた序数が見出しに存在する場合

記事内に自分で記述した序数とCSSによる自動序数の2つが表示される。上記コードは全記事の見出しに対して一様に装飾を行うので。

二重表示を回避する最も手っ取り早い方法は、手動で記述した序数を手動で削除していくこと。

JavaScriptで過去記事を判定して、序数をCSSで付加するかどうかを記事ごとに切り分けることはできるが、全くお勧めしない。そんなJavaScriptコードを書いている内にHTMLを修正できるだろうし、ページが表示される度にそんな処理をするとなると表示速度に影響が出るかもしれない。

過去記事の序数を削除する場合、大見出しにh3を使っているのならh2に変更する作業も同時にしたほうが効率がよい。

まとめ

見出しごとに番号が自動で振られると楽ちんだ。序数の付加という付随作業を自動化すれば、その分の時間を文章作成に充てられる。合理的だ。

てすとてすと