the world loves the wannabees.

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

今回はコンテンツとリンクリスト群のマークアップについてです。コンテンツの方から説明します。

まずは例によってコンテンツの文書構造です。コンテンツの内容は、ページの種類によって異なります。

トップページ、カテゴリ別（もしくは月別、日別）表示ページの場合

• 最新エントリ
• 最新のひとつ前のエントリ
• (中略)
• 最新より X 個前のエントリ

個別エントリページの場合

• エントリ
• コメント
• トラックバックリスト

プロフィールページの場合

• 該当ユーザのプロフィール

JUGEM ユーザの方ならおわかりかと思いますが、X 個前の X は管理ページでの設定で変わります。本当はトラックバックリストはリンクリスト群に入れたいところですが、JUGEM はテンプレートが1枚しかないため、結果的に個別ページの時だけコンテンツとリンクリスト群の内容量のバランスが悪くなることが考えられるのでコンテンツブロックに入れます。コメントとトラックバックリストのどっちが上かはこれまた著者の文書構造の解釈によりますが、harvest では上の通りの順番です。

JUGEM のマークアップ的には、1枚のテンプレートに全部書いてしまえばページ毎によしなに表示されるので、こんな感じになります。

コンテンツ

<div id="content">

• エントリ
• コメント
• トラックバックリスト
• 該当ユーザのプロフィール

</div>

さて、ここでコンテンツの内容が箇条書きになっていることに注目して下さい。これは、各ブロックが文書内の同じ階層にいることを示しています。マークアップをさらに展開するとこうです。

コンテンツ

<div id="content">

<!-- BEGIN entry -->
<div class="entry">
<h2>エントリタイトル</h2>
内容
</div>
<!-- END entry -->

<!-- BEGIN comment_area -->
<div id="comments">
<h2>コメント</h2>
内容
</div>
<!-- END comment_area -->
<!-- BEGIN trackback_area -->
<div id="trackback">
<h2>トラックバック</h2>
内容
</div>
<!-- END trackback_area -->

<!-- BEGIN profile_area -->
<div id="profile">
<h2>プロフィール</h2>
内容
</div>
<!-- END profile_area -->

</div>

まだ中に色々入るので div 要素で分けています。出現時にはページに１つしか表示されないことが分かっているブロックには id 要素、場合によっては複数出るブロックには class 要素を振っています。

そして、それぞれのブロックは見出し要素（h2）を持っています。全てのブロックは文書構造上の同じ階層にいるので、同じ見出し要素です。h2 要素を選んだのは、各ブロックが文書構造的に最上位階層にいるブロックの子要素（第2階層ブロック）となっているからです。もしかすると、コンテンツブロック自体が第2階層ブロックになり、内容物はそれぞれ第3階層ブロックになる（h3 要素を持つ）という考え方もあるかもしれません。ちなみに私が何故そうしなかったかというと、このエントリのように、既に投稿したエントリにエントリブロックが第2階層ブロックであることを意識したマークアップを含むものがあるためでした。エントリで変なマークアップをしてしまうと、後で大変になったりします(^^;

さて、ブロックの階層の話が出たところで、リンクリスト群ブロックのマークアップ展開もここでやってしまいます。リンクリスト群は、コンテンツブロックと同じ階層にいるブロックなので（前回参照）、その子ブロックはやはりそれぞれが h2 要素を持ちます。その文書構造と JUGEM 用マークアップは以下の通りです。

リンクリスト群

RECENT XXXX

最新の〜のリンクリスト

カテゴリ

カテゴリ別エントリ集へのリンクリスト

アーカイブ

月別エントリ集へのリンクリスト

カレンダー

日別エントリ集へのリンクリスト

リンク集

ユーザセレクトリンク集（通常のリンク集のほか、BlogPeople、MyblogList、MyClip のリンクリストを含む）

その他

RSS へのリンク、Powerd by JUGEM 表記等

リンクリスト群

<!-- BEGIN selected_entry -->
<div id="entrylist">
<h2>RECENT ENTRIES</h2>
{selected_entry_list}
</div>
<!-- END selected_entry -->

<!-- BEGIN recent_comment -->
<div id="commentlist">
<h2>RECENT COMMENT</h2>
{recent_comment_list}
</div>
<!-- END recent_comment -->

<!-- BEGIN recent_trackback -->
<div id="tblist">
<h2>RECENT TRACKBACK</h2>
{recent_trackback_list}
</div>
<!-- END recent_trackback -->

<!-- BEGIN category -->
<div class="links">
<h2>CATEGORIES</h2>
{category_list}
</div>
<!-- END category -->

<!-- BEGIN archives -->
<div class="links">
<h2>ARCHIVES</h2>
{archives_list}
</div>
<!-- END archives -->

<!-- BEGIN link -->
<div class="links">
<h2>LINKS</h2>
{link_list}
</div>
<!-- END link -->

<!-- BEGIN profile -->
<div class="links">
<h2>PROFILE</h2>
{user_list}
</div>
<!-- END profile -->

<div id="powered">
<ul>
<li><a href="./?mode=rss">RSS1.0</a></li>
<li>Powered by <a href="http://jugem.cc/">JUGEM</a></li>
</ul>
</div>

takkyun さまのところで紹介されているリンクリストのツリー化スクリプトを反映させるために一部 id 属性を振っているものもありますが、基本的に同じ links クラス属性をもったブロックが線形に並んでいます。JUGEM 独自タグは、全て ul リスト要素を展開します。powered id 属性のついたブロックだけは特殊で、h2 要素を持っていません。厳密には <h2>OTHERS</h2> などとつけるといいと思います。繰り返しになりますが、リンクリスト群ブロックそのものを第2階層のブロックとし、各リンクリストブロックを第3階層と解釈することも出来ます。

なお、harvest ではカレンダーをページの上部につけているので、ここには出てきません。が、カレンダーは一応日別アーカイブの性格を持っているので、table 要素に展開されるタイプの独自タグ({calendar2})をこちらに持ってきて <h2>DAILY ARCHIVES</h2> などとするのが本筋かもしれません。…ま、マークアップ本位などと言っても実際にやってるこたぁこんなもんです(笑)

…だんだん字数が多くてややこしくなってきましたが、次回はコンテンツブロックの内容物のマークアップについてです。一応ここが文書構造上最下層のブロックになります。…なんだかんだ言って、楽しいだろ＞自分。　うん、たのしい。