adiaryでタグクラウド

adiaryのカテゴリ一覧のタグクラウド化をJavaScriptで実装してみました。

正確にはカテゴリクラウドというかもしれないんですが、とりあえず、公開してみようかと思います。

ちなみに、Firefox3、IE6、Google Chrome、Opera9.26で動作確認しています。

表示例

画像は少し拡大していますが、だいたいこんな感じです。

通常のカテゴリ一覧 タグクラウド化したカテゴリ一覧
20080922_category.jpg 20080922_category_cloud.jpg

特徴

  • カテゴリ一覧をよく見るタグクラウド形式で表示します。
  • サブカテゴリもタグとして扱います。
  • カテゴリ一覧のリスト表示しているノードの下位のノードを操作対象とします。

    <ul class="hatena-section main-category">~</ul>以外は操作しないので、その他のノードには影響がありません。

  • カテゴリ名はシャッフルして表示します。
  • ソースが汚いです(笑)

導入

使ってあげてもいいという方はダウンロードしてご自由にお使いください。

ただし、使用に際しては、自己責任でお願いします。

大前提として、日記帳の設定でカテゴリ一覧を表示するにチェックを入れておく必要があります。

  1. ダウンロードしたスクリプトをどこかに置きます。

    ここでは、adiary.jsと同じ/path/to/themeに置きます。

  2. 埋め込みテキストのカテゴリ一覧より後ろの箇所に以下の2行を挿入します。
    <script type="text/javascript" src="http://url.to.adiary/theme_cc.js"></script>
    <script type="text/javascript">adiaryCategoryCloud();</script>

    url.to.adiaryはご利用環境に合わせて修正してください。

フォントサイズ指定オプション

Ver1.00からフォントサイズの指定ができるようになりました。

adiaryCategoryCloud(min, max)

タグクラウドで表示する際の、最小フォントのサイズと最大フォントのサイズを指定できます。

単位はpxで、指定できる範囲はmin,maxともに8から64です。

オプションの指定がない場合、もしくは指定の方法に(数値が大きすぎるなど)問題がある場合はデフォルト値を採用します。

省略した場合のデフォルト値は最小フォントのサイズが10px、最大フォントのサイズが24pxです。

<script type="text/javascript">adiaryCategoryCloud(10,32);</script>

と指定すれば、最大フォントサイズに32pxが指定され、デフォルト値の24pxよりも大きいため、タグクラウドのフォントサイズに、よりバラツキが生じます。

<script type="text/javascript">adiaryCategoryCloud(16,16);</script>

と指定すると、最小・最大フォントとも16pxが指定されたことになり、すべてのタグ名(カテゴリ名)が16pxで表示されます。