« 二週間あいちゃった…… | トップページ | ツリー化コメントリストで最新のn件にNEWマークを付ける »

2006/09/05

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

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

設置方法は、サイドバーのカテゴリーよりも後方の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を配信する設定になっていなかったりすると動作しません。

« 二週間あいちゃった…… | トップページ | ツリー化コメントリストで最新のn件にNEWマークを付ける »

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

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

コメント

こんにちは。
トラバありがとうございました。
発案者のマーシャさんのアイディアに感謝ですね♪

もうひとつのn件指定でNEWマーク、いいですね。
うちは全部についてしまっているのですが、24時間以内のみとか、
n件とか、本当に新しいものだけにつくのが理想です。

KOROPPYさん、どうもです。

| 発案者のマーシャさんのアイディアに感謝ですね♪
技術的にはちょっとした工夫であっても、見た目の印象は随分違うものですよね。
こういう発想が出来る方はとても羨ましいです。

| 24時間以内のみとか
時間制限は、コメントツリーの方は難しいですね、ページ内に情報がないので……プロコースでテンプレートを使えばなんとかなると思いますが。

カテゴリーツリーの方なら可能かな?index.rdf内に記事投稿時刻が入っているので。気が向いたら試してみます(^^;。

はじめまして。
アーカイブ目次と、カテゴリーツリーのスクリプトを使わせて頂きました。
日付も入った目次が欲しくて探していたので、見つけた時とっても嬉しかったです♪
 
ですが、目次をつける前には動いていた「カテゴリーツリー」が目次設置後に動かなくなってしまいました(>_<)
 
初心者なので理由が分からず、対処が出来ません。
風柳さんのトコロでは両方動いているようなので、どうすればいいか教えてください(ToT)

はじめまして。
ブログの方にコメントさせていただきました。

目次と併用したときに動作しなくなるのに気がついて対策を入れてはいたのですが、記事中に追記するのを忘れておりました(^^;。

ご指摘どうもでした。

素早い対応ありがとうございました!!
ちゃんと動いてくれ、すっきりすることができました(^∀^)

はじめまして、ブログ(ココログ・ベーシック)を始めて半年のnoryと申します。
目次とカテゴリー&最新のコメントのツリー化&newマークのスクリプトを使わせていただいてます。
お礼が遅くなってすいません。

目次もツリー&newマークも憧れだったので、とっても気に入ってます!
「最新の記事」のところにもnewマークがつくようにしました。
本当は「最新のコメント」みたく、つける数を設定できればいいのですが、スクリプトのことはさっぱり解らないので、CSSで設定するのがやっとでした。
それでも前より全然かっこよくなったと思うので最高です!

こんなにすばらしいスクリプトを作ってくださって感謝してます。
本当にありがとうございます!

noryさん、はじめまして。
コメントが遅くなりましたが、拙作のスクリプトがお役に立っているようで何よりです。
#実は先日、noryさんのサイトを訪れた際に目次のスクリプトのページ内移動リンクがうまく働いていないのに気がついて、こっそり修正したりしてました(笑)。

ちなみに、「最近の記事」のところに指定件数だけnewを付けるには、サイドバーに
<script type="text/javascript">
function    addClasstoRecentEntries( count, className ) {
    for (;;) {
        var recent = document.getElementById('recent-entries') ;
        if ( !recent ) {
            var callback = function() { addClasstoRecentEntries( count, className ) ; } ;
            setTimeout( callback, 100 ) ;
            break ;
        }
        var entries = recent.getElementsByTagName('li') ;
        for ( var ci=0; ci < entries.length && ci < count; ci++ ) {
            entries[ci].className = className ;
        }
        break ;
    }
}
addClasstoRecentEntries( 3, 'latest' ) ;
</script>

を貼り付け、カスタムCSSに、

#recent-entries li.latest {
list-style: none inside url(new画像のURL);
}

のような設定を追加してやれば、出来る、かも?
宜しければ試してみてください。
#addClasstoRecentEntries( 3, 'latest' ) の 3 を変更すれば、付ける数が変えられます。

風柳さん、できましたよ!
最新の記事も、設定した数だけnewマークが付くようになりました。
描いてたイメージどうりになって最高です!
設定の仕方の説明も、解りやすかったです。
僕の為に!?わざわざありがとうございました。

nory さん、どうもです。
うまく動作したようで良かったです(^^)。

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: 【ココログ】カテゴリー欄に最近の記事をツリー表示するスクリプト:

« 二週間あいちゃった…… | トップページ | ツリー化コメントリストで最新のn件にNEWマークを付ける »

戻るリンク追加

カレンダー

2017年10月
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を入力して下さい
    • はじめる前
      初級者向け
      上級者向け
      ブログ紹介
      結果を表示

最近のトラックバック

コメントリストツリー化

無料ブログはココログ