サブカテゴリも含めたカテゴリ別表示にと戯れる

Movable Typeを3.2にアップグレードしたら、サブカテゴリの機能が使えるようになりました。読み物カテゴリはエントリ数が50を超えるようになって、サブカテゴリなしの分類には限界を感じていました。ましてや、日常カテゴリは、サブカテゴリのない状態から既に日常2005と日常2004以前に分けていました。
私が使わずに誰がサブカテゴリを使う！
私は使命感を持ちました。ただ、サブカテゴリを使うなら、「カテゴリ別」にサブカテゴリ一覧を表示できなくては意味がありません。
さっそく、サブカテゴリの表示の仕方を検索しました。亜細亜ノ蛾 – Weblogの「MT でサブカテゴリ以下も全て表示させるには?」と、Lucky bag::Blogの「MTのサブカテゴリ導入」を参考に、<ul>と<li>でサブカテゴリを表示するように設定しました。表示してみました。
何でサブカテゴリを表示させたら、その下がめちゃくちゃ空くねん！
ただ、親カテゴリ同士が並んでるときは問題ないので納得がいきません。よく確認してみたら、私のスタイルシートのサイドバーはキレイにみせるためか、要素を<ul>で管理していて、<ul>のmargin-bottomが30pxほどとってあります。サブカテゴリがあるときは、<ul></ul>の中にさらに、<ul>と</ul>を書くことになるために、margin-bottomの30pxがひっかかってきているのでした。
どうしたらいいのかしら。悩んでいろいろ探していると、Ayapan Diaryの「サブカテゴリを作成」に<dt>や<dd>、<dl>を使って例が載っていました。よく分からないけど、違うタグを使ったらうまくいきそうだ！と思った私はこちらにトライしてみることにしました。
サブカテゴリの横へのずれかたが半端ないんですけど…
そもそも<dt>なんてタグを初めてみた私には敷居が高すぎたようです。このあたりで夫が帰宅したので、夫に泣きをいれることにしました。
「ここにね、何でスペースができちゃうの？これをなくしたいの」
それはブラウザの実装だから難しいねー、といいつつ相談にのってくれる優しい夫。もともとトリビアは豊富な夫ですが、何でも知ってるから神様に見えてきました。。すごいなあ。今度夫の作ったサイトのスタイルシートもみてみよう。
夫のおかげで、<dl>系はデータを格納する万能のデータベースのようなタグなので、使うのは間違っていないこと、<ul>と<li>に対応するのが、それぞれ<dl><dt>であること、<dd>は<dt>に入ったものの説明であることを理解しました。
また、スペースが空いちゃったりするのはブラウザの実装上どうしてもしょうがないので、スタイルシートで調整すべきということも分かりました。
まずはスタイルに以下を書いてborderを表示して、上が空いているようならmargin-topを0に、下が空いているようならmargin-bottomを０に、どうしても横にずれちゃうようならmargin-leftを-2emなどに設定します。なるほどねー。

border-style: dotted;
border-width: medium;
border-color: #FC9;

結局、私の場合は<dd>を使ったために必要以上に横にずれて表示されてしまっていたことが判明しました。説明要素は横にずれて表示するように実装しているブラウザが多いようです。
そこで、<dl><dt>だけで構築し直して、それぞれにスタイルを設定します。dlのスタイルは他のサイドバーのスタイルと合わせました。グレイになっている箇所が他とあわせた箇所になります。ブラウザの実装でスペースが空いてしまうことがあったので、そこはmarginを0にすることでなんとか乗り切りました。
また、昔々、私はCategoryのLabelを日本語化すると文字化けするという噂を目にしたので、&ltMTCategoryLabel&gtではなく&lt$MTCategoryDiscription$&gtを使っています。この噂は昔の時代のことでしょうか。
結局、今は以下のような設定で表示しています。
メイン・インデックス、各アーカイブへ挿入したもの

<MTSubCategories show_empty=’0′>
<MTSubCatIsFirst>
<dl>
</MTSubCatIsFirst>
<dt>
<a href=’<$MTCategoryArchiveLink$>’>
<$MTCategoryDescription$>
</a>
(<$MTCategoryCount$>)</dt>
<MTSubCatsRecurse>
<MTSubCatIsLast>
</dl>
</MTSubCatIsLast>
</MTSubCategories>

スタイルシートに挿入したもの

.sidebar dl {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: left;
line-height: 150%;
margin-top: 5px;
margin-bottom: 0;
}
.sidebar dl dt{
margin-top: 5px;
}
.sidebar dl dl dt{
font-size: 100%;
padding-left: 12px;
background: url(list.gif) left center no-repeat;
}

ふー。疲れた。
これで後はエントリのカテゴリを一つ一つ変更して終了です。
って、それが単純作業で一番面倒なんじゃ…

ところで、かなりウキウキで作業をしていたら、朝も夜もPCを占領することになり、夫に「ハマりすぎてるやろ。言っとくけど、僕のこの言葉は警告やからな」と怒られてしまいました。朝にPCが使えないと天気や交通情報が検索できなくて困ってしまうようなんです。
「で、でも、朝、夫が用意している間、私、ヒマだし」と言ってみたら、「なにか。キミは自分がヒマやから朝の忙しい時間、僕に不便を我慢しろというのか」と怒られました。
確かに、その通りです。すみません…。ちょっとノリノリでウキウキ過ぎました反省します。
(追記)
その後、Teckknow Weblogのサブカテゴリを表示するためのタグを読んでいたら、カテゴリへのエントリー数が0のときにリンクを表示せずに文字だけを表示する方法がやっと理解できたので導入しました。

<MTSubCategories>
<MTSubCatIsFirst>
<dl>
</MTSubCatIsFirst>
<MTIfNonZero tag=’MTCategoryCount’>
<dt><a href=’<$MTCategoryArchiveLink$>’>
<$MTCategoryDescription$>
</a>(<$MTCategoryCount$>)</dt>
<MTElse>
<dt><$MTCategoryDescription$>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
<MTSubCatIsLast>
</dl>
</MTSubCatIsLast>
</MTSubCategories>

MTタグの意味が分かってないとカスタマイズはつらいですね。
特に、JavaScriptでテンプレート化してるとどれが表示要素か繰り返しのための要素なのかが不明なので、かなりつらかったです。上記の例は一般向けにJavaScriptでテンプレート化してないときにそのままインデックステンプレートや各アーカイブテンプレートに書くときの例なので、ついでに私以外にいるのかどうか分かりませんが、JavaScriptでテンプレート化しているときのための例をメモがてらアップしておきます。

<MTSubCategories>
<MTSubCatIsFirst>
html += ” <dl>”;
</MTSubCatIsFirst>
<MTIfNonZero tag=’MTCategoryCount’>
html += “<dt><a href=’<$MTCategoryArchiveLink$>’>
<$MTCategoryDescription$></a
>(<$MTCategoryCount$>)</dt>”;
<MTElse>
html += ” <dt><$MTCategoryDescription$>”;
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
<MTSubCatIsLast>
html += “</dl>”;
</MTSubCatIsLast>
</MTSubCategories>
html += “</ul>”;