adiaryでタグクラウド

Filed in ブログ by on 2008-9-22 0 Comments  [長年日記]
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で表示されます。

関連記事

Pocket

Tags: , ,

About the Author ()

こんにちは。マツです。都内でITのお仕事やってます。iPhone/iPad/Mac/写真/家電/文具/ライフハック/クラシック/長崎(出身)など興味があります!

ご案内

記事をご覧いただきありがとうございます!
もし、当ブログを気に入っていただけましたら、Facebookページのご購読RSSのご購読をお願いしますm(_ _)m

follow us in feedly

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です