WolaWolaというサイトをご存知でしょうか？Movable Typeを扱ったサイトでも定番のサイトであり、MTのカスタマイズやプラグインの紹介でよく知られたサイトです。

そのサイトのCategroyArchivesというページが素敵すぎるので、見よう見真似でtadateto.netにも取り入れてみました。

WolaWolaのCategoryArchives

tadateto.netに取り入れたCategoryArchives

WolaWolaのCategoryArchivesは、カテゴリ別に最新10件の記事が定義リスト（dl,dt,ddといった要素を用いて）で表組みにされています。

そして各カテゴリのエントリーの表組みの下部にはサブカテゴリ（とそのカウントが）が横並びのリスト表示(ul,li要素で。li要素はinline化してある）で並べられています。

そして見た目は画像を用いずCSSのみでデザインされています。その機能的な構造・表示に惹かれて、今回再現することを思い立ちました。HTML/CSSのソースは覗き見していますが、id/classの命名はオレオレルールで行っています（踏襲したところも有）。なお、MTテンプレートの記述は色々な書き方があるので一致しているとは限りません。

テンプレートの記述

<MTTopLevelCategories>
<div class="box-per-category">
<MTEntries lastn="10">
<MTEntriesHeader><ul class="category-info"><li class="label"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li><li><$MTCategoryCount$> Entries</li><li><$MTCategoryCommentCount$> Comments</li></ul>
<dl class="data"></MTEntriesHeader>
<dt><$MTEntryDate format="%Y年 %m月%d日 %X"$></dt> <dd><MTHasSubCategories><span>[<$MTEntryCategory$>]</span></MTHasSubCategories><span><a href="<$MTEntryPermalink$>"><$MTEntryTitle trim_to="55"$></a></span></dd>
<MTEntriesFooter></dl></MTEntriesFooter>
</MTEntries>
<MTHasSubCategories><ul class="sub-categories"><MTSubCategories><li>[<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> (<$MTCategoryCount$>)]</li></MTSubCategories></ul></MTHasSubCategories>
</div>
</MTTopLevelCategories>

CSSの記述

.box-per-category  {
margin-bottom: 1em;
}

ul.category-info {
margin-bottom: 0.4em;
}

ul.category-info li {
display: inline;
margin-right: 0.3em;
}

ul.category-info li.label {
margin-right: 1em;
}

dl.data {
zoom: 100%;
border-top: 1px solid #eee;
border-right: 1px solid #eee;
border-left: 4px solid #eee;
margin-bottom: 0.4em;
}

dl.data dt {
padding: 0.2em 0.5em;
width: 12em;
clear: left;
float: left;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}

dl.data dd {
padding: 0.2em 0.5em;
margin-left: 12em;
border-bottom:1px solid #eee;
}

dl.data dd span {
padding-left: 0.5em;
}

ul.sub-categories {
padding-left: 1em;
border: 1px solid #aaa;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

ul.sub-categories li {
display: inline;
margin-right: 2em;
}

ここでテンプレートの記述とCSSについて注釈をば。表組みの表現には、dl,dt,ddの各要素にborderプロパティを指定することによって実現しています。しかし、dd要素が2行以上になるときは線組みが崩れます。それを、ある程度の文字サイズの変更には耐えうるためにMTEntryTitleタグにtrim_toアトリビュート（指定した文字数以上になった場合にその内容を削る）を用いています。なお、内容が削られた際に「...（三点リーダ）」を付与するためにこの記事を参考にしています。なお、tadateto.netにはサブカテゴリを持たないメインカテゴリもあったため、サブカテゴリのリストを出力する箇所にはMTHasSubCategoriesタグ（コンテナタグ、もしサブカテゴリが存在するときはその内容を出力する）で括っています。

09/05/22 追記

WolaWolaのCategoryArchivesを確認したら文字サイズを拡大するなどして、dd要素が2行以上になったときも表組みが崩れないようになっていました。近日中にWolaWolaのCSSソースを確認して当サイトのそれも書き直そうと思います

今回このエントリーを公開するにあたって、WolaWolaの管理者のOscarさんにコンタクトをとりました。tadateto.netにこのページのスタイルを取り入れることならびにエントリーの種にすることを快諾していただき感謝しています。なお、メールで伺った話では、このWolaWolaのCategoryArchivesの構造はあのVicunaテンプレートの初期ベータ段階に源流を持つということです。

Archives By Category - ただてとてとと歩きだす
http://tadateto.net/categories.html