見出しに番号を付けた(LivedoorブログでもOK)

Livedoorブログでシンプルエディタを使うと簡便にタグ打ちできることを知り、hタグをちゃんと使うようになりました。そうすると、今度は見出しに番号を付けたくなります。一記事あたりに付く見出しなんてそう多くはないのですが、性分ですね。CSSで使えるものはないかと調べたところ、counter-incrementおよびcounter-resetを使用することで簡単にできました。

  • 2016/07/08 追記・修正:CSS3対応として:beforeを::beforeに変更、counter-reset のタイミングを変更と経緯の追記
  • 2015/07/22 追記:個別記事下のカテゴリの最新記事には番号を振らない
  • 2014/09/15 記事作成
目次

見出しの深さが1の場合

LivedoorブログにおいてCSSをいじるときは、編集画面より「ブログ設定」→「カスタマイズ」→「CSS」タブを選択し、CSSを記述します。

Livedoorブログのプレビューでは、ブログ記事では記事内で使われることが多いhタグはh3とh4ですとありましたが、このブログではh2タグから使っています。したがって、h2タグに番号を付ける場合を想定します。以下のようになります。

body {
counter-reset: section2;
}
h2::before {
counter-increment: section2;
content: counter(section2) ". ";
}

section2という変数に番号が入ります。bodyのcounter-resetでsection2=0とし、h2が出るたびにsection2に1ずつ加えます。そんで、h2タグの要素の前にsection2を表示する、という具合です。たいへんシンプルですね。

(2016/07/08 追記) ::beforeについてですが、これはCSS2までは:beforeでしたが、CSS3においては、擬似要素と擬似クラスをハッキリ区別するために、::beforeになりました(参考:「::before (:before) - CSS | MDN」)。:beforeでも実際的には問題ないと思いますが、ここではCSS3準拠とします。

(2016/07/08 修正) Livedoorブログ対応で注意。Livedoorブログにおいては、ブログのキャッチフレーズというか、詳細(本ブログで言うと「見栄を張らない...(略)」の部分)も、h2タグが使われています。このままだと、この部分にも番号が割り振られてしまいます。回避する方法としては、h2::beforeをh2:not(#blog-description)::beforeとするとか、あるいは .article-body-inner h2 というように、div class="artcile-body-inner" 内のh2であることを明記する、などが考えられます。私は後者を採用しています。

また、body でcounter-resetをかけた場合、トップページで複数記事がある時、section2のcounter-resetが最初の一度しかされません。対応として、body ではなく article タグで counter-reset をかけるなどがあります。

見出しの深さが2の場合(2.1とか)

このブログではh2タグの他h3タグを使うことが多いので、その場合についても記述します。

body {
counter-reset: section2;
}
h2 {
counter-reset: section3;
}
h2::before {
counter-increment: section2;
content: counter(section2) ". ";
}
h3::before {
counter-increment: section3;
content: counter(section2) "." counter(section3) ". ";
}

先ほどとやっていることは一緒です。ただh3の番号にsection3を使うのですが、h2が出たらsection3をリセットするというところがポイントでしょうか。それくらいですね。同じ要領で階層を増やせます。

追記:カテゴリの最新記事には番号を振らない

Livedoorブログにおいて、このままだと、記事の個別ページで、下に表示されるカテゴリの最新記事に0.1の番号が振られてしまいます。

56

面倒なので放っていたのですが、やはり気になるので雑ですが消しました。以下を追記すると、カテゴリの最新記事には番号を振りません。

div.related-articles h3::before { content: ""; }

div要素のrelated-articlesクラス下にあるh3においては、何も書きませんよということです。もっとスマートな書き方があるように思いますが、ひとまずこれで目的は達せられます。

15

追記:counter-resetのタイミング

2016/07/08にしれっとコードを修正しています。深さ2以上の見出し時のコードで、元々は、bodyにてsection2とsection3のcounter-resetをしていました。また、counter-incrementはh2::beforeではなくh2内で記述していました。それを、bodyでcounter-resetするのはsection2のみ、section3のcounter-resetはh2内で行い、counter-icrementは各見出しタグの::beforeにて行うようにしました。

元々のコードでも問題なかったのですが、Googleアドセンスのタグを挿入すると、どういうわけかcounter-resetが正常にされなくなったためです。たとえば 2.1 - 2.4 と番号を割り振った場合、次に3.1と割り振られるべきところで、3.5となってしまう。試行錯誤の末、counter-resetのタイミングが重要であるということがわかりました。現在の形にすると、正常に番号が振られます。このコードは「CSS counter-reset property」を参考にさせていただきました。

Googleアドセンス用コードのあるなしや、h2::before と h2 内のどちらに記述するかや、body内でsection3をリセットするかで挙動が変わる理由が、イマイチわかっておりません。ただまぁ、必要のない変数の初期化がないなど、今のほうがコードとしても綺麗に見えますし、ひとまずまずこれで。

参考

以下の記事を参考にしました。ありがとうございます。

(K)CSSとHTMLだけで番号付きの見出しを作成する(CSS覚え書き) | web(K)campus

本サイトはUXを悪くするevilなGoogle広告を消しました。応援してくださる方は おすすめガジェット を見ていってください!
よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

目次