【ココログ】カテゴリー毎の最新記事をサイドバーでツリー表示

【ココログ】カテゴリ別最新記事一覧の参照方法
を応用して、サイドバーのカテゴリー欄に、カテゴリー毎の最新記事がツリー表示されるようなスクリプトを作成してみました。

【ココログ】カテゴリー欄に最近の記事をツリー表示するスクリプトと同じようなものですが、今回のものは、

• トップページ以外の記事も対象となる。
• 日付をベースにした"new"表示が可能。

という違いがあります。

設置方法ですが、

1. 個別ページにカテゴリ内の最近の記事が表示されていない場合、FAQ：固定リンクに同一カテゴリーの記事が表示されないんだけど？をよく読んで、表示される設定に変更する。
2. 管理画面の『記事の作成 > 新規投稿』画面にて、以下のブックマークレットを実行する。
   
   カテゴリリスト作成
   ブックマークレットの登録方法等はこちら→【Web】ブックマークレットのブラウザ毎の登録方法
3. サイドバーのカテゴリーよりも後方のHTMLが設置できる箇所(メモタイプのマイリスト等)に、
   <script type="text/javascript" src="http://furyu.tea-nifty.com/script/cocoCatTreeR.js"></script>
   <script type="text/javascript">
   <!--
   cocoCatTree.reverse = false ; // 並び順を逆にしたいときは true
   cocoCatTree.showNum = 2 ; // 同一カテゴリー内の表示数(最大5)
   cocoCatTree.newDay = 3 ; // class="new"が付く日数(0は無効)
   cocoCatTree.showDate = false ; // 日付表示を行う場合は true
   cocoCatTree.init() ;
   //-->
   </script>
   
   を貼り付ける。

ツリー表示をするには、カスタム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 .new { /* カテゴリー中最新記事 */
  list-style: none inside url(表示したい画像のURL);
}

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

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

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

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

cocoCatTree.init() ;

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

cocoPView.init_onload() ;

もしくは

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

となっている箇所の前に

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

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

---

手順 2.のブックマークレットは、実行すると、

http://[サイトトップ]/[ブログ名]/include/catrecent.html

というファイルを作成します。
これは、

<!--#include virtual="/[ブログ名]/include/cat[カテゴリID].inc"-->

を、カテゴリの数だけ並べただけのものなのですが(いちいちカテゴリIDを調べるのが面倒だったので自動化しただけ)、拡張子をhtmlにすることで、SSIで展開された後のものが取得されることになります。

例えば、このブログの場合、
http://furyu.tea-nifty.com/annex/include/catrecent.html
こんな感じとなります。
手順 3.のスクリプトでは、このファイルをAjaxで取得して、その情報を元にサイドバーのカテゴリー欄を加工しています。

ちなみに、上記のcatrecent.htmlは、これ自体をSSIで読み込むことも出来ますので、適当な記事に

<!--#include virtual="/[ブログ名]/include/catrecent.html"-->

を貼り付けてやったりも出来ます。

このようにした記事を常にトップに表示するように設定しても良いかもしれません。