現在サイドバーにある「最近のコメント」と「最近のトラックバック」には、NEWアイコンを。
そして、コメントのみ、ツリー表示させています。
今回さらに「最近の記事」をツリー化するスクリプトが登場しました。
風柳亭 - 別館：書庫のある庵 -さまの「【ココログ】『最近の記事』を日付別ツリー表示するスクリプト」です。
このスクリプトを使うと、日付別にツリー表示されるので、日付ごとに更新した記事をチェックしてもらえます。
更に「時間」もしくは「記事の件数」を指定して、新着アイコンを表示させることもできます。
早速設定してみました。
1.マイリストのメモリストに、以下の記述を追加します。
srcは適宜修正してください。
「newHour=24」に設定し、最近24時間の記事に新着アイコンをつけました。
「newCount」を利用すれば、記事の件数を指定して新着アイコンをつけられるようです。
日付は「dateDescent = true」で、新しい記事から古い記事へ。
同一日付内の記事の表示順は「entryAscent = false」で、新しい記事から古い記事へ。
両方で、新しい記事から古い記事へと並ぶようにしました。
<script type="text/javascript" src="http://****/cocoEntryTree.js"></script>
<script type="text/javascript">
<!--
cocoEntryTree.newHour=24; //class="latest"が付く時間(0は無効)
cocoEntryTree.newCount=0; //class="latest"が付く記事数(0は無効・newHourの方が優先)
cocoEntryTree.dateDescent = true; //日付の表示順（true:新→旧 false:旧→新)
cocoEntryTree.entryAscent = false; //同一日付内の記事表示順（true:旧→新 false:新→旧)
cocoEntryTree.create();
//-->
</script>
2.ツリー表示のためのCSSを記述します。
ただし「「最近のコメント」をツリー表示」と共用できるため、今回追加の記述は不要でした。
画像のurlは、適宜修正してください。
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://*****/blog/tree.gif);
background-repeat: no-repeat;
}
ul ul.tree li.end {
background-image: url(http://****/blog/treeend.gif);
}
3.新着アイコンを表示させるためのCSSを記述します。
「最近のコメント&トラックバックにアイコンを追加」で設定したCSSを、「latest」のついた記事(手順1にて指定)のみ表示させるように修正します。
/* 最近の記事 */
#recent-entries li.latest {
list-style: none inside url(http://*****/arrowr.gif);
}
日付部分もCSSで設定できるようですが、特に設定しませんでした。
一つだけ注意しなければならないことは、RSSフィードを元にツリー形式を生成するということです。
RSSフィードの出力をしていなければ、利用できません。
当サイトのように、トップページの表示件数を5件にしていると、RSSフィードも5件しか生成されず、ツリーも5件分しか表示されなくなってしまいます。
最近のコメント