はてなブログの縦長なカテゴリをすっきりスクロール表示する

ちょっとCSSいじってやっちゃいましょう〜

はてなブログに限った話ではありませんが、
大抵のブログで見られる傾向、それは・・・・

縦になが〜〜〜〜〜〜いカテゴリ

です。当ブログの場合はフル表示でこんな感じになります。

ほとんど更新の無いカテゴリも多く、全て見えている必要も無いので、スペース縮小を目指して対応してみようと思います。

カテゴリ周りのhtmlとcssを確認

ソースを表示してhtmlを確認します。（一部抜粋）

<div class="hatena-module hatena-module-category">
  <div class="hatena-module-title">
    カテゴリー
  </div>
  <div class="hatena-module-body">
    <ul>
        <li>
          <a href="http://treeapps.hatenablog.com/archive/category/%E9%9B%91%E8%AB%87">
            雑談 (7)
          </a>
        </li>
    </ul>
  </div>
</div>

こうなっています。
はてなブログの場合、直接html内部をカスタマイズする事はできないので、
cssを使ってカスタマイズする事になります。

管理画面でcssを追加

css編集ウインドウは以下にあります。

cssを追加

html構造を確認し、

hatena-module hatena-module-category
　└　hatena-module-body

という構造になっている事が解っています。
追加するcssは以下の通りです。

/* カテゴリ */
.hatena-module.hatena-module-category > .hatena-module-body {
    height: 355px;
    overflow: auto;
}

heightで高さを固定し、はみ出した部分をスクロール表示
とする事で対応します。heightは適宜調整しましょう。

修正後の画面を確認

修正後の画面は以下の通りです。

macなのでスクロールバーが見えなくなってますが、windowsだとスクロールバーが見えているかと思います。

表示されるカテゴリを調整

はてなブログの場合、カテゴリの表示順序を調整する事ができます。

並び替え順を「記事が追加された順」にすることで、更新された記事が属するカテゴリを常に上位表示させる事ができます。
隠れてしまう（スクロールしないと見えない）カテゴリは更新が少ない事になるので、ファーストビューで表示されていなくても大きな問題にはならないでしょう。

「月刊アーカイブ」でも同様に縦に長くなりがちなので、同様の手法でスッキリ表示させる事ができます。