※IEエンジンでは上手く表示されていなかった問題を修正しました。詳しくは下の方にある追記部分をご覧ください。
このブログのトップに置いてあるカテゴリ一覧（"Categories"ってやつ）ですが、設置してしばらく訪問してくれる方々の動向を見た結果、サイドメニューにカテゴリ一覧を置いておくより、明らかに使用してくれる率が高まりました。
このリスト、自分でリストタグやリンクタグを並べて、間に"|"を書き込んでも作れるのですが、新しいカテゴリを追加するたびに手動でこまめに更新しないといけなくなるので、結構面倒だと思います。一方、その点ではサイドメニューに追加する要素である"sectioncategory"モジュールを使うと、日記を書けば自動的にカテゴリが追加されるので楽なわけです。
というわけで、ここではsectioncategoryモジュールのスタイルシート(CSS)をいじって、無理矢理横並びのカテゴリ一覧を実現する方法を紹介してみます。
まずは、sectioncategoryモジュールを設置する
どこに設置するかですが、僕は
<div class="main">
のすぐ下に置いてあります。具体的には、詳細デザイン設定のページの「ページのヘッダ」欄に、サイドメニューにモジュールを追加するのと同じ要領で、次のsectioncategoryモジュールを書き込みます。
<hatena name="sectioncategory" template="hatena-module">
※ここで、template="hatena-module"を必ず指定するようにしてください。なぜかというと、そうしないとカテゴリをスタイルシートでいじる予定のリストタグで並べてくれないからです*1。その他の指定については、はてなダイアリのヘルプの項目を参照してください。
スタイルシートをいじる
そこで、スタイルシートを次のように指定します。詳細デザイン設定のページの「スタイルシート」の欄に、次の項目を追加してください。
すでに同じ項目が指定されてないかどうかチェックしてください。もしある場合は、下のように内容を変更すれば良いだけですが、その場合サイドメニューに追加しても同じデザインで表示されてしまいますので注意してください。
.hatena-sectioncategory li{
float: left;
display: inline;
margin: 0px;
border-right: 1px solid #333333;
padding-left: 5px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
}ポイントだけ述べておきます。
display: inline;
これによって、リストを縦に並べる指定を解除しています。
border-right: 1px solid #333333;
リスト間の区切りになる縦線を要素の枠線の右側だけ指定することによって実現しています。順に太さ、線の形状、色の指定になっているので、好きなようにいじってください。
padding-left: 5px; padding-right: 5px;
文字と区切り線の間隔です。これも好きなサイズに変更してください。
※追記(2007/12/22)
Firefoxからでは上までの指定できちんと表示できていたのですが、IEエンジンではさらに次の指定をしなければならないことがわかりました（これを指定しないとリストが縦並びのまま）。
.hatena-modulebody ul.hatena-sectioncategory li a{
width: auto;
} 試してもリストがうまく縦に並んでいなかった方、試してみてください。
ついでに、このブログに設置してあるモジュールでは、次のような指定もしてあります。
.hatena-sectioncategory a{
color: #395475;
text-decoration: none;
} リンク要素についての記述ですが、上から順に、色指定、下線を表示しない、の設定になっています。
※スタイルシートの記述の仕方や色見本については、とほほのＷＷＷ入門などを参照してください。
これで楽にカテゴリ一覧の管理ができます
これを一度設定してしまえば、日記に新しいカテゴリが追加されると自動的にタイトルの下に設置したカテゴリ一覧に項目が追加されますし、管理ページでカテゴリの位置を並び替えたり、カテゴリを消去/追加したりしても、その結果が自動的に反映されるようになります。
自分でカテゴリ一覧を全部書いてるような方も、カテゴリ一覧をサイドメニューにおいてある方も試してみてはいかがでしょうか*2。
