カテゴリー欄改造

サイドバーのカテゴリー欄をいじってみますた。

ムダに縦に長いし、右側も開いててもったいないので、横に並ぶようにしますた(・∀・)
だいぶすっきりしたぉ。

ドロップダウンリストにしようかとも思いますたが、すぐ上のカレンダーにもドロップダウンリストがあるからなんかバランス悪い…って事で却下。

改造方法

使用中のテーマによって改造方法が異なりまする。

カテゴリー名にカーソルを重ねた時 or クリックした時に

選択されるのが文字の部分だけの場合

→　Ａタイプ

　　sectioncategoryモジュール
　　　　　　　＋
　　スタイルシートの変更

サイドバーの幅いっぱいに広がる場合

→　Ｂタイプ

　　自分でリンクを作成。

見やすいように、普段とは違う色を付けてみますた(｀・ω・´)

Ａタイプ改造方法

スタイルシートに

/* sectioncategoryモジュール */
ul.hatena-sectioncategory {
 margin: 4px 5px 0px 10px;
 padding: 0px;
}

ul.hatena-sectioncategory li {
 display: inline;
 border: none;
 margin: 4px 7px 0px 0px;
 padding: 0px;
 line-height: 1.5;
}

を記入。
　「ul.hatena-sectioncategory」は sectioncategoryモジュール全体の指定。
　「ul.hatena-sectioncategory li」はsectioncategoryモジュールのリンク部分の指定。

margin、padding、border、line-height　の数値はお好みで。

新しいカテゴリーを作った時は自動で追加されまする(・∀・)
カテゴリーの順番を変えるには　《管理》　→　《設定》　→　《編集設定》で【カテゴリー】の順序を変更。

Ｂタイプ改造方法

テーマに指定されたCSSの影響で横に並べられないため、ページのフッタに自分でリンクを作成。

まず、ページのフッタからsectioncategoryモジュールを削除し、代わりに

<div class="hatena-module">
<div class="hatena-moduletitle">カテゴリー</div>
<div class="hatena-modulebody">
<div class="category">
<a href="１つ目のカテゴリーのURL">１つ目のカテゴリー名</a>
<a href="２つ目のカテゴリーのURL">２つ目のカテゴリー名</a>
<a href="３つ目のカテゴリーのURL">３つ目のカテゴリー名</a>
</div>
</div>
</div>

を記入。
<div class="category"></div>はスタイルを調整するためのもの。
カテゴリーのURLは別ウィンドウで最新の日記を開いて、サイドバーのカテゴリー名の上で右クリック　→　ショートカットのコピー　でコピーして↑に１つずつ貼り付け、カテゴリー名を記入。
例は３つまでしか書いてませぬが４つ目以降も同じように。

そして、スタイルシートに

/* カテゴリー */
div.category {
 margin: 4px 5px 0px 10px;
 padding: 0px;
}

div.category a {
 border: none;
 margin: 4px 7px 0px 0px;
 padding: 0px;
 line-height: 1.5;
}