CMS の見出しレベルに悩む

（追記: タイトルをより内容に合うように変更しました。本文も若干修正しましたが、内容に関わる変更はありません。）

最近、CSS よりも、関心が XHTML に傾きがちな管理人です。(^ ^;) 今日は、目下、裏でせっせと制作中の MovableType サイトのコーディングからのネタです。

このココログもそうですけど、ブログツールを含む何らかの CMS を使っていると、「幾つめの見出しレベルからスタートしたらいいんだ？」、「別のサービスから引っ越したら、見出しレベルが１つズレちゃった」、「文書構造をカスタマイズしたので、これまでの見出し要素のレベルを調整しないといけないよな..」。そんなことで困った経験とか、過去にありませんか？

見出しマークアップのガイドライン（制作中の MT サイト用）

CMS 固有の悩み

実は見出し要素（h1, h2, h3...）のマークアップって、CMS を使っていると、思いのほか厄介だったりします。どう厄介かというと、普段編集するエントリーで使う見出しレベルが、どのレベルから始まるのかを覚えておかなくちゃいけなかったり（通常は h3 か h4 あたり）、テンプレートの中身をカスタマイズして内部構造を変えちゃうと、これまで書いたエントリーの見出しレベルが、おかしくなってしまったりする辺りとか。

XHTML 2.0 では h 要素が新設

XHTML 2.0 の世界ではこういった悩みは消滅する見込みです。すでに広く知られていることですが、目下策定中の XHTML 2.0 では、h 要素と section 要素が新設されます。これで論理的には、h 要素が置かれている section の階層の深さで、見出しのレベルを表現できるようになります。だから、わざわざ h1, h2... とレベルを明示的に記述しなくても良くなるわけですね。階層の深さに関係なく、h 要素のままでマークアップすれば良いのですから。こうなれば、確かにありがたいです。

<section>

<h>大見出し</h>
<section>

<h>小見出し</h>
<p>ここで段落の登場です。</p>
<h>小見出し</h>
<p>また段落の登場です。</p>
<h>小見出し</h>
<p>またまた段落の登場です。</p>

</section>
<h>大見出し</h>
<p>ここも段落です。</p>

</section>

XHTML 1.n 段階での対策

とはいえ、目下、XHTML 1.n 世代にいる我々は、次世代に備えて代替手段を講じるほかありません。

唯一の完璧な解答...というわけではありませんが、もっとも XHTML 2.0 にスムーズに移行しやすく、論理的にも妥当なマークアップのひとつは、全てのセクション（ないしサブセクション）を、それぞれ <div class="section"> で括り、それらの子孫セクション（サブセクション）は入れ子にします。こうしておけば、XHTML 2.0 が利用できるようになった段階（もしくは普及した段階）で、XSLT か何かで <div class="section"> を <section> に、<h1> 〜 <h6> を <h> に一括変換できます。

<div class="section">

<h2>大見出し</h2>
<div class="section">

<h3>小見出し</h3>
<p>ここで段落の登場です。</p>
<h3>小見出し</h3>
<p>また段落の登場です。</p>
<h3>小見出し</h3>
<p>またまた段落の登場です。</p>

</div>
<h2>大見出し</h2>
<p>ここも段落です。</p>

</div>

MovableType で見出し要素を自動管理するプラグイン

似たようなことを考える人はやはりいるもので、MovableType 用の良いプラグインがありました。

• 見出しレベルを調整するプラグイン「ConvertHnLv」（改）
• SG::Acme : convert hn（こちらが本家オリジナル）

一度、テンプレート側で、

<$MTEntryBody convert_hn_lv="+2"$>

のように指定しておけば、あとはエントリー編集画面の方では、h1 から見出しを書き始めてOKです！後日、MovableType のテンプレートで階層を変更しても、同時に convert_hn_lv="+2" の部分をそれに合わせて調整すれば良いだけなので、いちいち個々のエントリーの見出しを調整する手間が省けます。これはとてもとても感動的なプラグインですね。

［おまけ］CSS 2 の自動連番（counter）機能をつけてみる

:before 擬似要素も使うので、基本的に IE では無効になってしまいますが、CSS 2 に完全対応しているブラウザなら、counter プロパティを利用すれば、見出しの先頭に、CSS で見出し番号を自動的に振ることができます。

ちょっと、このエントリー限定で、試しに CSS の見出し番号をつけてみましたので、ご参考までに。（h4 を "sec.1"、h5 を "1-2" のようにしてみました。）ただし、Firefox 1.5+（および同等の Gecko ブラウザ）, Opera 8?+ 限定です。Safari もどうやら未実装のようです。

/* カウンターの値の追加と初期化設定 */
.section h4 {

counter-reset: h5 h6; /* 名前は h3, h4...でなくとも、level1, level2 や section, subsection とかでも良い */
counter-increment: h4;

}
.section h5 {

counter-reset: h6;
counter-increment: h5;

}
.section h6 {

counter-increment: h6;

}

/* カウンターの表示（IE, Safari は未対応）*/
.section h4:before {

content: "sec." counter(h4);
margin-right: 0.5em;

}
.section .section h5:before {

content: counter(h4) "-" counter(h5);
margin-right: 0.5em;

}
.section .section .section h6:before {

content: counter(h4) "-" counter(h5) "-" counter(h6);
margin-right: 0.5em;

}