読者です 読者をやめる 読者になる 読者になる

はてなブログサイドバーにカテゴリ一覧を自動表示する

コピペ用

以下のコードをサイドバーとして追加

<script>
(function($) {
  var $module_body = $('.hatena-module-body:last');

  $module_body.parent()
    .removeClass('hatena-module-html')
    .addClass('hatena-module-categories')
    .prepend($('<div>').addClass('hatena-module-title').text('カテゴリー'));

  $.get('/categories').done(function(html) {
    $module_body.html(html.replace(
      /[\s\S]*<div class="entry-content">\s*|\s*<\/div>[\s\S]*/g, ''));
  });
})(jQuery);
</script>

https://github.com/m4i/hatenablog-snippets/blob/master/category.js


解説

他にもいくつかカテゴリ一覧を表示するコードが紹介されていますが、このコードは以下の点で優れています。

  1. 利用しているカテゴリが自動でリストアップされる
  2. HTML 構造が正規のモジュールに近い

1. 利用しているカテゴリが自動でリストアップされる

自分でメンテナンスしなくても使用しているカテゴリが自動でリストアップされます。
カテゴリ一覧は /categoies から取得しています。

2. HTML 構造が標準モジュールに近い

プロフィール、検索、リンクなどと同じように、以下のような HTML 構造になっています。

<div class="hatena-module hatena-module-categories">
  <div class="hatena-module-title">カテゴリー</div>
  <div class="hatena-module-body">
    <ul>
      <li>カテゴリー1</li>
      <li>カテゴリー2</li>
    </ul>
  </div>
</div>

なので、既存のテーマと相性が良かったり、将来カテゴリモジュールが実装された時に CSS の修正が少なくて済むと思います。



利用例はこのブログの最下部で見れます。お好みで適当に CSS を書いてください。
2012-06-30: 現在は標準のカテゴリモジュールを利用しています