【ココログ】『最近の記事』を日付別ツリー表示するスクリプト

サイドバーの『最近の記事』欄を、日付別にツリー形式で表示するようにしてみました。

ご注意

1. RSSフィード(ブログのフィード出力)がオンの状態でないと使えません。
2. 表示される記事数はRSSフィードの記事数（＝トップページの記事数）に制限されます。

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

<script type="text/javascript" src="https://furyu.tea-nifty.com/script/cocoEntryTree.js"></script>
<script type="text/javascript">
<!--
cocoEntryTree.newHour=72; //class="latest"が付く時間(0は無効)
cocoEntryTree.newCount=3; //class="latest"が付く記事数(0は無効・newHourの方が優先)
cocoEntryTree.dateDescent = true; //日付の表示順（true:新→旧 false:旧→新)
cocoEntryTree.entryAscent = true; //同一日付内の記事表示順（true:旧→新 false:新→旧)
cocoEntryTree.create();
//-->
</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(https://furyu.tea-nifty.com/script/29.gif);
  background-repeat: no-repeat;
}
ul ul.tree li.end {
  background-image: url(https://furyu.tea-nifty.com/script/30.gif);
}

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

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

日付のところは、

#recent-entries div.date { /* 最近の記事の日付 */
/* ここに日付に対する表示設定を追加 */
}

によりスタイルを設定できます。

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

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

#recent-entries li.latest { /* 最近の記事 */
  list-style: none inside url(表示したい画像のURL);
}

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

なお、リッチテンプレート等、カスタムCSSを使用できない環境の場合、

<style type="text/css">
/* この間にカスタムCSSの場合と同様の内容を記述 */
</style>

としたものを、サイドバーに(スクリプトと一緒に)貼付けます。

やっていることは、

1. RSSファイル(index.rdf)をAjaxで取得。
2. index.rdfを解析して、日付毎に記事をリスト化。
3. サイドバーの『最近の記事』欄(id="recent-entries")に、2.で取得した記事のリストを追加(ツリー化はCSSによる)。

といった感じです。

なので、制限事項としてRSSを配信する設定でないと動作しません。
また、表示される件数はRSSで配信されている件数（＝トップページの記事数）に左右されます。
どういうことかというと、通常サイドバーには10件(固定)表示されますが、このスクリプトを使うと、トップページの記事数が例えば5件に設定されている場合には、サイドバーに表示される件数も5件となってしまうということです。

なお、プロコースで上級テンプレート使用時には、RSSの配信件数をトップページの件数とは独立に設定可能です。

元ネタは、
【みんなで解決！広場】ココログをはじめる前の疑問解決！
435．「最新の記事」欄に日付を載せたい
です。

【更新履歴】

• 2007.2.24
  
  1. 日付表示順がおかしくなる不具合修正。
  2. 表示順指定用にdateDescent、entryAscentオプション追加。
  3. new(latest)付判定ミス修正。