【ココログ】カテゴリー欄に最近の記事をツリー表示するスクリプト

サイドバーのカテゴリー欄に、現在トップページに表示されている最近の記事へのリンクを、ツリー形式で表示するようにしてみました。

設置方法は、サイドバーのカテゴリーよりも後方のHTMLが設置できる箇所(メモタイプのマイリスト等)に、

<script type="text/javascript" src="http://furyu.tea-nifty.com/script/prototype.js"></script>
<script type="text/javascript" src="http://furyu.tea-nifty.com/script/cocoCatTree.js"></script>
<script type="text/javascript">
<!--
cocoCatTree.reverse = false ; // 並び順を逆にしたいときは true
cocoCatTree.init() ;
//-->
</script>

を貼り付けます。

---

【2006.09.11 追記】
拙作【ココログ】アーカイブページに目次とページングを付加するJavaScriptと併用する場合で、そちらの設定が

cocoPView.modifySidebar = true; // サイドバーのバックナンバー／カテゴリーを置換する
cocoPView.usePullDownMenu = false ; // バックナンバー／カテゴリーをプルダウンメニューにする

となっているときは、上記の

cocoCatTree.init() ;

を削除(または頭に//をつけてコメントアウト)し、代わりに、目次の方の設置用HTMLで、

cocoPView.init_onload() ;

もしくは

cocoPView.getArchivesRequest() ;
cocoPView.makePages() ;

となっている箇所の前に

cocoPView.onCompleteSidebar = function(){cocoCatTree.init();} ;

という一行を追加(挿入)して下さい。

---

ツリー表示をするには、カスタムCSSに、

ul ul.tree {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
ul ul.tree li {
  margin: 0px;
  padding: 0px 0px 0px 16px;
  font-size: 100%;
  background-image: url(http://furyu.tea-nifty.com/script/29.gif);
  background-repeat: no-repeat;
}
ul ul.tree li.end {
  background-image: url(http://furyu.tea-nifty.com/script/30.gif);
}

のような記述を行います。

takkyunさんのサイト『ふろむにぅじぃ』にアップされている『コメントリストツリー化 for ココログ & ブログ人』と共通で使えます。
既に設置されている方はCSSの方は必要有りません。

"NEW"マーク(画像)を付けたい場合には、次のようにします。

KOROPPYの本棚さんの、最近のコメント&トラックバックにアイコンを追加を参考にさせていただきました。

#archive-category .tree .latest { /* カテゴリー中最新記事 */
  list-style: none inside url(表示したい画像のURL);
}

#archive-category .tree li { /* その他の記事 */
  list-style: none inside url(表示したい画像のURL);
}

このサイトでは、
アイコン｜0円のWEB素材屋さん/ホームページ作成 素材/無料イラスト/アイコン
で配布されていたものを使用させていただいております。

やっていることは、

1. RSSファイル(index.rdf)をAjaxで取得。
2. index.rdfを解析して、最近の記事のリンク及びタイトルと、所属するカテゴリーを取得。
3. サイドバーのカテゴリー(id='archive-category')に、2.で取得した記事のリストを追加(ツリー化はCSSによる)。

といった感じです。

なので、RSSを配信する設定になっていなかったりすると動作しません。