the world loves the wannabees.

前説

今までこのサイトでふうこが採用した JUGEM テンプレートは、いずれも JUGEM で配布されているテンプレートとマークアップが大きく異なります。最初の2つは配布テンプレートから改造していますが、意匠には殆ど手をつけておりません。何故テンプレートをそのまま使わないのか、という疑問に誠実にお答えするとなると長いものがさらに長くなってしまうので、身も蓋もなく言っちゃうと間違ってるからです。もうちょっと正確に言うと、HTML の本質にあっていないからです。

では HTML の本質とは何か、といえば、文書に構造を表す印付け（＝マークアップ）をするということです。文書の構造とは、例えばここは見出しであるとかメニューリストである引用文であるといった類のものです。HTML とはそもそもそういう用途で考え出されたもので、その狙いはブラウザや検索ロボットなど、つまりコンピュータのソフトウェアが意味をくみ取りやすいデータにすることです。ソフトウェアで意味をくみ取りやすいデータになったら何が得するかと言えば、例えば検索エンジンがらみの場合は、自分のページに関連する語句で検索しても上位に表示されないといった悩みが解決されます。逆に、ただページの片隅にその検索単語があるというだけで全然関係ないページが検索結果にリストアップされるという間違いも少なくなります。

本当はもうちょっと壮大な理想のある話なんですが、あまり紙幅を割くのもアレなので、とりあえずはこれがふうこのテンプレートデザインに関する主張であるということを念頭に置いて読み進んで頂ければと思います。なお、文中では HTML の用語、特に要素名などを何の断りもなく使います。ついてけねーよと思ったら HTML タグ辞典などを当たるか、こんなエントリがあったことはすぱっとお忘れになって下さい。

テンプレート解説：HTML編(1)

さて、前説がやっと終わって解説に入ります。まずは HTML テンプレートの説明ですが、マークアップというのは文書構造に対して行うものなので、テンプレートの話の前に blog の文書構造というものを捉える必要があります。その構成は大抵こんな感じになるのではないでしょうか。

ヘッダ

サイト名、サイトの説明などが載るところ。

ボディ

実際に読んでもらう情報が載るところ。内容はさらにこんな分類になります。

コンテンツ

エントリが載るところ。

リンクリスト群

最新エントリリストや BlogPeople のリンクリスト等、その blog の関連情報が載るところ。内容によって複数ブロックに分かれたりする。

フッタ

copyright 表記やページの作成者（以降、W3C の流儀に則って著者 auther と呼びます）の連絡先等が載るところ。

もしかすると、構成によってはメニューなどの項目が入ったり、フッタがなかったりするかもしれませんが、本エントリはこのサイトで使用しているテンプレートの解説が目的なので、この先は現在使用中のテンプレート、harvest をベースに説明していきます。

harvest は上に挙げた構成例と同じ文書構造を持っています。リンクリスト群はひとつです。よって、HTML のマークアップとしては以下のようになります。

ヘッダ

<div id="top"></div>

ボディ

<div id="body">

コンテンツ

<div id="content"></div>

リンクリスト群

<div id="sidebar"></div>

</div>

フッタ

<div id="foot"></div>

それぞれのブロックの中にはまだ色んなものが入るので、文書を div 要素を使って分けます。各ブロックは文書中に一つずつしか出てこないので、div 要素には全て id 属性を振ります。コンテンツとリンクリスト群のどちらが文書上で先行するかという問題は、著者が文書構造をどう捉えるかによりますが、私はまず先行する要素の方が重要と決めていて、コンテンツとリンクリスト群とでは前者の方が重要との観点から今の並びにしています。

次は、とりあえずヘッダに何か入れることにします。ヘッダには blog のタイトルとその説明が入ります。てことは、こうなります。

ヘッダ

サイト名

サイトの名前

説明

サイトの説明

ボディ

コンテンツ

エントリが載るところ。

リンクリスト群

その blog の関連情報が載るところ。

フッタ

copyright 表記や著者の連絡先等が載るところ。

マークアップに置き換えると、こうです。

ヘッダ

<div id="top">

サイト名

<h1>{blog_name}</h1>

説明

<p class="description">{blog_description}</p>

</div>

ボディ

<div id="body">

コンテンツ

<div id="content"></div>

リンクリスト群

<div id="sidebar"></div>

</div>

フッタ

<div id="foot"></div>

サイト名は文書の大見出しですから、h1 要素でマークアップします。サイトの説明はごちゃごちゃ書いてもひとつの段落として成り立つはずなので、p 要素でマークアップします。…属性は id を使うべきだったかもしれん。ちなみにマークアップされる要素については、一応 JUGEM のテンプレの説明なのでそれぞれ JUGEM の独自タグを入れました。

…次回に続く。