« やっぱり温泉はいいなぁ | トップページ | 2月は去る(承前):終わり悪しくば…… »

2007/02/23

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

サイドバーの『最近の記事』欄を、日付別にツリー形式で表示するようにしてみました。
ご注意
  1. RSSフィード(ブログのフィード出力)がオンの状態でないと使えません。
  2. 表示される記事数はRSSフィードの記事数(=トップページの記事数)に制限されます。
設置方法は、サイドバーのHTMLが設置できる箇所(メモタイプのマイリスト等)に、
<script type="text/javascript" src="http://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(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の方は必要有りません。
日付のところは、
#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)付判定ミス修正。

« やっぱり温泉はいいなぁ | トップページ | 2月は去る(承前):終わり悪しくば…… »

おもいつき」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

風柳さん、こんにちは~。

「~広場」での回答を拝見して早速試してみました!
いつも素敵なスクリプトありがとうございます(^^)

ただ、ちょっと問題が…。
ツリー化は問題なく出来たのですが、日付の表示が古いものが上になってしまうのです。
風柳さんの「最近の記事」を見るとちゃんと新しいものが上になっていますよねえ…。
これは、私の設定がどこか違っているのでしょうか?
(管理画面の「ブログの表示設定」くらいしか思い浮かばなかったのですが、ここは「新しいものが上」になってました)

お忙しいところ申し訳ありませんが、心当たりがありましたらアドバイス頂けると助かります。
宜しくお願いいたします。

風柳さん、何度もごめんなさい^^;

さっきの件、スクリプトを置く位置を変えたら改善されました。
最初は左サイドバーの一番下(つまり「最近の記事」より後ろ)に入れていたのですが、ふと思いついて右サイドバー(「最近の記事」より前)に変えてみたのです。
これがビンゴでした♪

お騒がせして失礼しました。
この2つのコメント、お邪魔でしたら削除しちゃって下さい^^;

ではまた~。

tako さん、どうもです。

日付の表示に関しては、スクリプトのバグでした。
他に、new付判定を誤っていたり、いくつか不具合があったりしたので、修正しておきました。
ご報告感謝です!

ついでに明示的に表示順を指定するオプション(dateDescent、entryAscent)を追加してみました。

デフォルト(dateDescent=true、entryAscent=true)だと、

日付(新)
 ├記事(旧)
 │ :
 └記事(新)
 :
日付(旧)
 └記事

のようになりますが、dateDescent=falseにすると、

日付(旧)
 :
日付(新)

に、また、entryAscent=falseにすると、

日付
 ├記事(新)
 │ :
 └記事(旧)

になります。

なお、entryAscent に関しては、RSSで日付が降順(新しいものが上)になっていることを前提としています(昇順になっている場合は動作が逆になると思います)。

風柳さん、こんにちは。

早速修正版を試してみたところ、サイドバーの位置に関係なく思った通りに表示できました(^^)
迅速な対応ありがとうございました。

私は日付、記事順とも「新→旧」を選んでみました。
(こういう細かいことにも「好み」ってあるものなんですね(笑))

***

今日は久しぶりに寒いですね。こんな日は私も温泉でゆっくり温まりたいです。
…といいつつ実は「のぼせ性」なので長湯出来なかったりするのですが^^;

風柳さん、こんにちは♪
takoさんの所より参りました。
早速、こちらのスクリプトを使わせていただいたのですが、最近の記事が3件までしか表示されません。

どこか設定を間違っているのでしょうか??
よろしくお願いいたします。。

tako さん、どうもです。
うまくいったようでよかったです。

| こういう細かいことにも「好み」って
ありますよね。
私の場合、ツリー化したときの枝は昇順にしたくなるのです。コメントツリーもそうなってますが(笑)。

---

| 「のぼせ性」なので長湯出来なかったり
私も内風呂だとどうしてものぼせちゃうので、そんなに長くは入っていられないのですが、冬場の露天の場合、足だけ入れたり首まで浸かったりを繰り返して調整しながら延々入っていられるので、ついつい長湯してしまいます(笑)。

sacchi さん、はじめまして。

本文中にも書いてありますが、このスクリプトはRSSフィードから最近の記事の情報を取得しているので、そちらの記事件数に依存してしまうのですよ。
RSSフィードの記事件数はトップページに表示している件数と同じになるみたいですので、sacchi さんのところでは3件しか表示されないわけです。悪しからずご了承ください。

もちろん、トップページの表示件数を増やせば、その数にあわせてツリー化される件数も増えます。

早速返事をいただきましてありがとうございます!!
>RSSフィードから・・
そうだったのですね。。^^;
よく読め??(笑)
記事の表示件数を増やしたら思い通りになりました♪

何度もすみません。。
メインブログの記事にリンクを貼らせていただきました^^
事後報告ですみません。。よろしくお願いしますm(*- -*)m

作ってくれると思ってました~(笑)
# 風柳さんが来なければ私もRSSで作ってみようかと思ってました。

それはさておき、これってプロで出来ますかね?(JavaScript無しで)
# 広場に適当なレスをしてしまったもので、ちょっと気になりまして…

sacchi さん、どうもです。

うまくいったようで良かったです(^^)。
また、メインブログでのご紹介ありがとうございます。

ちなみに、このブログに関してはリンクするのに特に断りは不要という立場です(サイトポリシーとして明示しておいた方がよいかな?)。

facet さん、どうもです。

プロコースの上級者向けテンプレートだと、
標準では

<ul>
<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle remove_html="1" generate="1"$></a></li>
</MTEntries>
</ul>

のようになっている箇所を、

<ul>
<MTEntries lastn="10">
<MTDateHeader>
<li><ul class="tree"><div class="date"><$MTEntryDate format="%Y/%m/%d"$></div>
</MTDateHeader>
<li<MTDateFooter> class="end"</MTDateFooter>><a href="<$MTEntryPermalink$>"><$MTEntryTitle remove_html="1" generate="1"$></a></li>
<MTDateFooter>
</ul></li>
</MTDateFooter>
</MTEntries>
</ul>

のように変えてやれば出来ますね。
参考:
■小粋空間: 「最近のエントリー」の日別表示
http://www.koikikukan.com/archives/2005/02/11-135011.php

一定期間中newを付けたりとかは難しいかもです。

こんにちは。
拙記事へのリンクもありがとうございます。

日別にツリー表示、いいですねー!!
カレンダーを利用していないので、これはわかりやすくて便利です。

ただ私はRSSを5件に設定しているため(重さ対策)、
>表示される記事数はRSSフィードの記事数(=トップページの記事数)に制限されます。
がネックで悩み中です。
5件だけだと日付別に分けるメリットをあまり享受できないと思うのでf(^^;)

件数増やそうかしら。
でも一度増やして、やっぱり重くて戻してるんですよね・・・・・・。

こんばんは。

>5件だけだと日付別に分けるメリットをあまり享受できないと思うのでf(^^;)
試しに設置してみたら、充分便利でした!
改めて使わせていただきます。

KOROPPY さん、どうもです。
コメント&トラックバックありがとうございます。

そうなんですよね~RSS配信数に制限を受けてしまうのがネックなのはわかっていたのですが、最近の記事と日付の関連付けを簡単に取得する方法が他に思いつかなかったため、こうなってしまっています。
#プロコースなら、まだやりようもあるのですけれどね。なるべくなら汎用化したいので……。

こんばんは、スクリプト使わせていただきます。
以前、「最近の記事」のnewマーク数設定の件ではお世話になりました。
今回は、さらに日付が付くということで、こちらの方に変更させていただきました。
ツリー表示やnewマーク表示のためのカスタムCSSは、書き換えなくてもよかったので、とっても楽でした。
度々お世話になり、ありがとうございます。

| 度々お世話になり、ありがとうございます。

こちらこそ、お役に立てたのなら何よりです。
それに、いろんな方に使っていただいたり、ご意見を伺えると、自分だけでは気がつかなかった面がたくさん見えてきますので、良い刺激となります。

初めまして。
記事数が多くなると記事数が多くなると便利だと思って早速使わせていただきました。
無事に設定することが出来ました。
便利なカスタマイズが出来て嬉しいです。

はじめまして。
サイトの方はパスワード設定されているようですのでこちらからは確認できませんが、無事に設定出来たのでしたらなによりです。

風柳さん こんにちわ^^
ブログ始めたばかりのど素人の身でありながら
どうしてもサイドバーを折りたたみの日付入りツリー形式にしたくて
ココログヘルプからtakoさんのお勧めで
お勉強にきました。
が・・・どうやってもできません(__)>

折りたたみはできたのですが
最新記事の日付けとツリー形式ができません。
最近のコメントにはツリーが付いたのですが
borderが入ったりでみなさんのようにきれいにできません。

メモタイプのマイリストに貼り付けるところですが
下記のまま貼り付けていいのでしょうか?
ご指導いただけますでしょうか?

<script type="text/javascript" src="http://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>
で閉じるのを忘れないでくださいね。

borderが表示されるのは、お使いのテンプレートの設定(CSS設定)が影響しているのだと思いますが、ちょっと今時間がとれないので、後程おじゃましてみてみます(余裕が有ればですが(^^;)。

風柳さん こんばんわ。

みゅーです^^
先ほどのツリー欄に線が入ってしまう・・・という件ですが
テンプレートを
思い切って変えてみましたら
とても見やすくなりました^^/

最近の記事らんへの日付けは
まだつまづいたままですがゆっくりやってみます・・・^^!
風柳さんありがとうございます^.^)>

風柳さん

こんにちわ^^みゅーです。

出来ました~♪
そのまま貼り付けで良いのですね^0^!
アホなことにsrcを書き換えてしまっていました・・・。
すみません・・・

すごく便利でそして訪問してくださる方にも
とても見やすいスクリプト作ってくださり
ありがとうございました^^/

使わせていただきます*^^*

無事に表示されたようでなによりです。
お役にたてたようで幸い(^^)。

……あ、そうそう。
サイトを拝見していて気がつきましたが、コメントツリー化のスクリプト(comtree.js)の方が、同じものが二回貼り付けられていますね。
#ひとつは折り畳みスクリプト(foldSidebar02c.js)と同じリスト内に。

それと、折り畳みスクリプトとコメントツリー化を併用する場合、折り畳みの方を先に、コメントツリーの方を後に持ってくる方がよいみたいです。
そうしないと、コメントのカウントがおかしくなるようで。

http://facet.cocolog-nifty.com/divers/2004/10/post_1.htmlより。
| ★「最近のコメント」のツリー化スクリプト(「ふろむにぅじぃ 」のtakkyunさん作)を設置されている場合、「最近のコメント」が上手くカウントできていない場合があります。正しく「(10)」とカウントさせるには、ツリー化スクリプトの設置場所を本スクリプトより下になるよう調整してみてください。

同様に、cocoEntryTree.jsの方も、かな。
共に、折り畳みの後に持ってきてみてください。

以上、ご参考まで。

風柳さん、こんにちわ^^/

お忙しい中でのサポートありがとうございました^^
同じスクリプトが2個も張り付いていたのは
気がつきませんでした^^!

一つを削除にして
折り畳みスクリプトを前に持ってきました。

風柳さん、ありがとうございました^^/

初めまして、tsudukuと申します。
記事のツリー表示にチャレンジしているのですが、cocoEntryTree.jsのスクリプトが見当たらなく、アップロード出来ずにいます。
試しに直リンクでやってみたのですが、「cocoEntryTree.js:RSS」が見当たらないとのエラー表示が出てしまいます。
どのようにしたら、.jsをアップロードする事が出来るか教えて頂けますか?

サイトにお邪魔しましたが、問題無く表示できているようですね……解決したのでしょうか?

一応念のため。

・スクリプト自体はこちらのサイトのものを参照するので、特にダウンロード&アップロードする必要はありません。
・「cocoEntryTree.js: RSSが見付かりません」というエラーダイアログが出る場合、設置されたブログの方でRSSフィード(ブログのフィード出力)がされていない可能性がありますので、管理画面で設定を確認してください。

風柳様、こんばんは。
せっかくサイトの確認をして下さったのに申し訳ありません。
今、確認したところ、RSSの設定はONになっていました。
でも、先ほどBlogの更新をしておりましたら、またRSSのエラー表示が・・・。
何故でしょうか?
風柳様へコメントを出した時は、ツリー表示されていなかったのですが、数時間席を外している間に確認をしにいったらツリー表示されていました。
これはココログのランクは左右されるものなのでしょうか?

うーん……申し訳ないですが、原因がよくわからないです。

| これはココログのランクは左右されるものなのでしょうか?
これは関係ないと思います。

警告のダイアログはどちらかというとチェック用の機能なので、暫定的に出さないように修正しておきました。
#ツリー化されないときの根本的な対策にはなりませんが……。

こんにちは。
ご無沙汰しております。
こちらのスクリプトには、ずっとお世話になっております。

実は9月2日のココログメンテナンス以降、
上手くツリー化できなくなってしまい、
facetさんに変更部分を教えていただき、
自分のブログでは、修正を行いました。

こちらのスクリプトを使っていらっしゃる方は、他にも多いと思うので、
風柳さんからも、正式な対応版がアップされたら嬉しいです。

KOROPPY さん、ご報告ありがとうございます。
スクリプトを修正しておきました。ご確認下さい。
対応が大変遅くなってしまい、申し訳ありません。

はじめまして!
最近ココログをはじめました。

はじめてなのでコメントとトラバをさせて頂いたご報告をさせて頂きます。
ありがとうございました。
今後はトラバだけになると思いますがご了承願います。

風柳様 こんにちは。

ココログカレンダーPlusでは本当にお世話になりました!!

今回もご指導頂きたく、コメントしました。

最近記事のスクリプトを使用させて頂いたのですが
ツリー部分が〝○〟表示になってしまいました。
以前はちゃんと風柳さんのようなツリーで表示されていたのですが・・・・

どうすれば元にもとりますか?

回答、宜しくお願い致します。

先程、コメントの書き込みをしました狗煉杷です。

こうか?こうか??とやっている内に
表示される様になりました!!!

もう少し自分で頑張ってやっていればと・・・・・

何だか申し訳ないです

有難く使用させて頂きますっ!!

スクリプト使っていただいてどうもです。
自分で試行錯誤していくうちに、得られるものも有るかも知れませんし(笑)、良いネット生活をお送り下さい。

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/161784/14014413

この記事へのトラックバック一覧です: 【ココログ】『最近の記事』を日付別ツリー表示するスクリプト:

» 「最近の記事」を日付別にツリー化してみた [*second message*]
『風柳亭-別館:書庫のある庵』さんで、サイドバーの「最近の記事」を日付別にツリー化するスクリプトが公開されていたので、早速試してみました。 ■【ココロ [続きを読む]

» サイドバーの「最近の記事」を、日付別にツリー表示 [KOROPPYの本棚 ]
現在サイドバーにある「最近のコメント」と「最近のトラックバック」には、NEWアイコンを。 そして、コメントのみ、ツリー表示させています。 今回さらに「最近の記事」をツリー化するスクリプトが登場しました。 風柳亭 - 別館:書庫のある庵 -さまの「【ココログ】『最近の記事』を日付別ツリー表示するスクリプト」です。 このスクリプトを使うと、日付別にツリー表示されるので、日付ごとに更新した記事をチェックしてもらえます。 更に「時間」もしくは「記事の件数」を指定して、新着アイコンを表示させることもできます。... [続きを読む]

» 最新の記事を日付別にツリー化+newマーク [なまけもの・のーと]
カレンダーの表示をやめて、「最新の記事」を日付別にツリー化しました。48時間以内 [続きを読む]

» 雪見鍋とカスタマイズ [A careful living]
[主婦] ブログ村キーワード 2時っチャオでブリの雪見鍋を紹介していたので作りま [続きを読む]

« やっぱり温泉はいいなぁ | トップページ | 2月は去る(承前):終わり悪しくば…… »

戻るリンク追加

カレンダー

2016年12月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

ココログカレンダーPlus

検索


    • Web全体 サイト内
    • 蔵書のISBNを入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

最近のトラックバック

コメントリストツリー化

無料ブログはココログ