« 【ココログ】カテゴリ別最新記事一覧の参照方法 | トップページ | 【ココログ】サイドバー設置用ブログ検索フォーム(アット・サーチ、ココニール) »

2007/04/12

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

【ココログ】カテゴリ別最新記事一覧の参照方法
を応用して、サイドバーのカテゴリー欄に、カテゴリー毎の最新記事がツリー表示されるようなスクリプトを作成してみました。
【ココログ】カテゴリー欄に最近の記事をツリー表示するスクリプトと同じようなものですが、今回のものは、
  • トップページ以外の記事も対象となる。
  • 日付をベースにした"new"表示が可能。
という違いがあります。
設置方法ですが、
  1. 個別ページにカテゴリ内の最近の記事が表示されていない場合、FAQ:固定リンクに同一カテゴリーの記事が表示されないんだけど?をよく読んで、表示される設定に変更する。
  2. 管理画面の『記事の作成 > 新規投稿』画面にて、以下のブックマークレットを実行する。
    ブックマークレットの登録方法等はこちら→【Web】ブックマークレットのブラウザ毎の登録方法
  3. サイドバーのカテゴリーよりも後方のHTMLが設置できる箇所(メモタイプのマイリスト等)に、
    <script type="text/javascript" src="https://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(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の方は必要有りません。
"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で展開された後のものが取得されることになります。
例えば、このブログの場合、
https://furyu.tea-nifty.com/annex/include/catrecent.html
こんな感じとなります。
手順 3.のスクリプトでは、このファイルをAjaxで取得して、その情報を元にサイドバーのカテゴリー欄を加工しています。
ちなみに、上記のcatrecent.htmlは、これ自体をSSIで読み込むことも出来ますので、適当な記事に
<!--#include virtual="/[ブログ名]/include/catrecent.html"-->
を貼り付けてやったりも出来ます。
このようにした記事を常にトップに表示するように設定しても良いかもしれません。

« 【ココログ】カテゴリ別最新記事一覧の参照方法 | トップページ | 【ココログ】サイドバー設置用ブログ検索フォーム(アット・サーチ、ココニール) »

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

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

コメント

こんにちは 初めてご連絡いたします。

私は現在 シーサー を使用中です。

初歩的なことで真の申し訳ございませんがご教示をお願い致します。

カテゴリーのツリー化について随分検索したのですが判りませんでした。

この記事は ココログ 対象ですが

 シーサー にも使えるものでしょうか?。

ご多忙とは思いますがよろしくお願いいたします。
  

この記事に

初めまして、岡本さん。
大変遅くなってしまいました、申し訳ありません。

このカテゴリーのツリー化スクリプトですが、恐らくシーサーでは使えないものと思われます。
実際のシーサーのブログを調べてはおりませんが、ページのHTMLの構造等に依存してしまいますので、それがココログと一致していない限り、基本的にはココログ用のスクリプトは残念ながらシーサーでは動きません。

お役にたてず、申し訳ありません。

コメントを書く

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

トラックバック


この記事へのトラックバック一覧です: 【ココログ】カテゴリー毎の最新記事をサイドバーでツリー表示:

« 【ココログ】カテゴリ別最新記事一覧の参照方法 | トップページ | 【ココログ】サイドバー設置用ブログ検索フォーム(アット・サーチ、ココニール) »

戻るリンク追加

カレンダー

2021年11月
  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        

ココログカレンダーPlus(旧2)

検索


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

最近のトラックバック

コメントリストツリー化

無料ブログはココログ