昨日の記事で少し書いた、記事タイトルの見出しレベルの件に関してです。
もともとこういう手法を使おうと思ったのは、記事本文で見出しを使った場合に個別記事ページまたはそれ以外のページで文書構造がおかしくなるのを防ぐためでした。ブログツールによっては、記事内の見出しレベルを自動調整するプラグインが作られていたりして（MTのこういうやつとか）、FC2ブログでも同じようなことができればなと思ったりもしていました。しかし記事を「記事本文（h2）」「コメント（h2）」「トラックバック（h2）」の3つに分割する（以下、三分割）という手法は、自動調整と比較してある利点を持っています。
以下で具体的に見てみましょう。例として「Mozilla Firefoxの歴史」という記事を書いたとします。記事タイトルの見出しは、個別記事ページではh1、それ以外ではh2。個別記事ページでのみ表示される「コメント」「トラックバック」の見出しレベルはh2とします。
記事内の見出しレベルが、個別記事ページではh2から始まり、それ以外ではh3から始まるように自動調整された場合、次のようになるはずです。
さてこの例では、自動調整のおかげで見出しの出現順序に一見何の問題もなくなっているように見えます。しかし、個別記事ページに注目すると、記事内の見出しと「コメント」「トラックバック」が同列に扱われています。なんだか妙な感じがしないでしょうか。「コメント」や「トラックバック」は、「Mozilla Firefoxの歴史」についての直接の見出しではありません。
一方、個別記事ページにおいて記事を「記事本文（h2）」「コメント（h2）」「トラックバック（h2）」の3つに分けた場合は以下のようになります。
このように「記事本文」という見出しの下に記事内の見出しがあるほうが、文書構造として妥当ではないでしょうか。
とまあそんなことを考えてみたんですが、そこまで文書構造を気にして何の意味があるのかと言われればそれまでです。そもそも個別記事ページで記事タイトルをh1にすべきかどうかというのも、人それぞれでしょう。サイト名が最も重要と考えるなら、常にサイト名をh1にしても別に悪くないと思います。
かくいう自分は、一応トップページ以外ではh1要素にサイト名を使わない派です（が、これを書いてる現在はどのページにもサイト名を併記しちゃってます。後で消すつもり）。しかしわざわざ見出しを使うほど筋道立った記事を書くわけでもないので、個人的にはそんなに記事内の見出しレベルで悩む必要もなかったりします。今回は、試験的に見出しを無理矢理つけてみました。
FC2ブログの新管理画面統合のアナウンス（今度こそ延期しないよね）も出たわけだし、いい加減そろそろテンプレを共有登録申請したいところです。もうひと息という感じではあるんですが、しかしFC2ブログにはすでに膨大な数の共有テンプレが存在しているため、今さら下手な作品を登録したところで、それはテンプレ探しの邪魔にしかならないんじゃないかと思うんです。それでだいぶ慎重になっています。
とりあえず申請予定のテンプレの特徴を簡単に整理しておきます。
meta name="keywords"の内容にカテゴリーとタグを指定。効果があるかどうかは知りませんが。<h1>、それ以外では<h2>。このとき、見出しレベルが不定になることによって記事本文で見出しを使えないという問題が起こりそうですが、個別記事ページでは記事タイトル（h1）のすぐ下に「記事本文（h2）」という見出しが挿入される、もっと正確にいうと記事が「記事本文（h2）」「コメント（h2）」「トラックバック（h2）」の3つに分割されるようにしてあるので、記事本文内では<h3>から見出しをつければ常に正しい文書構造を保てます。ちなみに「記事本文」という見出しはdisplay:noneで非表示にしてあります。文章を書くのが面倒でリストにしてしまいました。しかも全然整理できてない。まあいいか。
<ul><li>って、いわゆる箇条書きみたいな感じに項目を並べるときに使う要素だと理解しているんですが、箇条書きっていうと、普通は項目が複数あることを想定しますよね。それで、じゃあ１つしか項目がなかったらリストにしちゃいけないのか、とふと疑問に思いました。
直感では、別に１つでも問題ないような気がします。が、まだ(X)HTMLのなんたるかを良くわかっていないので、全然自信がないです。項目が１つのリストもマークアップとして間違っていないはず。たぶん……そう思いたい。たとえばブログの記事について考えると、投稿日時とかカテゴリーとかコメント数とか、そういう情報はリストに適しているはずです。でもこれが投稿日時だけだったら（FC2ブログは記事が必ずどれかのカテゴリーに属するので、そういうことはあまりないと思いますが、他のブログサービスならありえそうです。カテゴリーなし、コメントもトラックバックもなし、みたいな）……どの要素でマークアップするのがいいんでしょうか。やっぱりこの場合でも<ul><li>が適してるような気がします。なんとなく。だって、他にもっといいのが思い浮かばない。<p>でもまぁ良さげだけど、やっぱり段落よりはリストの方がいい気がします。ってこれはもしかしてものすごく当たり前のことなのかな。
そんなことを考えていたところ、巡回先の綺麗なデザインのサイトでこんな記述を見つけました。
次にdiv要素のclass名"date"の部分。日付を段落で表示するのもどうかと思うので、これはOKだと思う。
むぅ、divとな……divって、こういうときに使うものなのかな？ なんとなく、div直下にそのままテキストを置くのは避けていたのだけど。そして私ならここで<ul><li>を使いたくなります。divを使うなら、まだ段落のほうがいい気が……いや、でも自信はないです。必要以上にdivを嫌ってしまってるかも。
というか、人様のサイトに意見する前に自分のブログの絶望的に汚いCSSを早く何とかしないと……勉強することがたくさんあって、テンプレの共有登録申請はまだまだ先になりそうです。
余談ですが、この記事で初めて<blockquote>を使ってみたところ、何故かIEでの表示がずれてしまっていました。調べたら、paddingとborderの指定が原因で起こったバグであると判明（とりあえず、blockquoteのスタイルを変更しました）。こんなの全然知らなかったです。IE怖ぇ……