【ココログ】アーカイブページに目次とページングを付加するJavaScript

トップページ／バックナンバー／カテゴリーの各ページを表示する際に、ページ内目次とｎ記事ずつのページング機能を付加するスクリプトを作成してみました。

サイドバーの月別／カテゴリー別バックナンバーをプルダウンメニュー化する機能もついてます

サイドバー上のメモタイプのマイリスト等、HTMLの記述が可能なところに以下のソースを貼り付けます。

あまりしっかりとテストをしていないので、人柱希望です(^^;

【2006.07.16】機能追加に伴い設置用ソースを修正しました

【2006.07.16】機能追加／修正に伴い設置用ソースを修正しました

【2006.07.29】機能追加に伴い設置用ソースを修正しました

【2006.08.14】機能追加に伴い設置用ソースを修正しました

<script type="text/javascript" charset="utf-8" src="http://furyu.tea-nifty.com/script/cocoPView.js"></script>

<style type="text/css">
<!--
    #archive-datebased select, #archive-category select {
        width: 100%;
    }
    .ccpv_nav_form {
        margin-left: 16px;
    }
    .ccpv_nav, .ccpv_nav_disable, .ccpv_nav_all, .ccpv_nav_page {
        font-size: 10px; line-height: 120% ;
        margin: 0px; padding: 2px 0px 2px 0px;
        color: brown;
        border: outset 1px silver;
        text-align:center;
    }
    .ccpv_nav, .ccpv_nav_all, .ccpv_nav_page {
        background-color: lightyellow;
    }
    .ccpv_nav_disable {
        background-color: whitesmoke;
    }
    .ccpv_nav_all, .ccpv_nav_page {
        margin-right: 12px;
    }
    .ccpv_counter {
        font-size: 12px;
        margin-left: 12px;
        color: darkgreen;
    }
    .ccpv_list {
        list-style-type: none;
        margin-left: 16px;
        padding-left: 0px;
        text-align: left;
    }
    .ccpv_list li {
        margin-left: 0px;
        padding-left: 0px;
    }
    .ccpv_number {
        display:block; width:2em; text-align:right; font-weight: bold;
    }
    .ccpv_table tbody {
        vertical-align: top;
        line-height: 110%;
        text-align: left;
        word-break: normal ;
    }
    .ccpv_alink {
        font-size:10px;
    }
    .ccpv_plink {
        word-break: break-all;
    }
-->
</style>

<script type="text/javascript">
<!--
//【サイドバー用設定】
cocoPView.modifySidebar = true;         //  サイドバーのバックナンバー／カテゴリーを置換する
cocoPView.usePullDownMenu = true ;      //  バックナンバー／カテゴリーをプルダウンメニューにする
cocoPView.getArchivesOnload = true ;    //  archives.htmlの取得→サイドバーのバックナンバー／カテゴリー置換を onload 時に行う
    //  ※false時は即時実施：スクリプトを読み込む前にバックナンバー／カテゴリーが表示されていること
cocoPView.loadByAjax = true ;           //  バックナンバー／カテゴリーの読込にAjax(XMLHttpRequest)を使用
cocoPView.onloadFunction = "" ;         //  Ajaxにてページ読込後に呼出す関数を『"関数名()"』で指定
cocoPView.monthlyPullDownSelect = '年月を選択' ;        // 月別プルダウン用初期表示
cocoPView.categoryPullDownSelect = 'カテゴリーを選択' ; // カテゴリープルダウン用初期表示

//【アーカイブページ用設定】
cocoPView.archivePaging = true ;        //  アーカイブをページング表示する
cocoPView.topPagePaging = true ;        //  トップページもページング表示する
cocoPView.useIndex = true ;             //  ページ内目次表示
cocoPView.hideEntryMore = true ;        //  本文(続き)部分を隠す(『続きを読む』リンク表示)
cocoPView.showMax = 5 ;                 //  ページ内記事表示数
cocoPView.showAllFirst = false ;        //  最初に全件表示する
cocoPView.pageIndexTitle = 'ページ内目次' ; // ページ内目次見出し
cocoPView.topPageSubTitle = '' ;        // トップページ用サブタイトル
cocoPView.addSubTitleToH2 = true ;      // サブタイトルをH2(通常は年月日が表示されるところ)に付ける
cocoPView.addSubTitleToH3 = false ;     // サブタイトルをH3(通常は記事タイトルが表示されるところ)に付ける
cocoPView.switchLinkType = true ;      // ページ内移動と個別ページへのリンクが付く箇所を入れ換える
    // false:日付→ページ内移動、記事タイトル→個別ページへのリンク
    // true:日付→個別ページへのリンク、記事タイトル→ページ内移動

//【個別記事ページ用設定】
//=== トラックバック一覧
cocoPView.tbPaging = true ;             //  トラックバックをページング表示する
cocoPView.showAllFirstTb = false ;      //  最初に全件表示する(トラックバック)
cocoPView.showMaxTb = 3 ;               //  ページ内トラックバック表示数
cocoPView.tbReverse = false ;           //  元のトラックバックの並び順(false:昇順 true:降順)
cocoPView.showNewTbFirst = true ;       //  最初に最近のトラックバックを表示する(false:一番古いものを表示)(※tbReverse=falseの場合のみ有効)
cocoPView.pagingTypeTb = 1 ;            //  0:最初のページの件数固定 1:最新ページの件数固定(※tbReverse=falseの場合のみ有効)
//=== コメント一覧
cocoPView.commentPaging = true ;        //  コメントをページング表示する
cocoPView.showAllFirstCmt = false ;     //  最初に全件表示する(コメント)
cocoPView.showMaxCmt = 5 ;              //  ページ内コメント表示数
cocoPView.commentReverse = false ;      //  元のコメントの並び順(false:昇順 true:降順)
cocoPView.showNewCmtFirst = true ;      //  最初に最近のコメントを表示する(false:一番古いものを表示)(※commentReverse=falseの場合のみ有効)
cocoPView.pagingTypeCmt = 1 ;           //  0:最初のページの件数固定 1:最新ページの件数固定(※commentReverse=falseの場合のみ有効)

cocoPView.init_onload() ;
//-->
</script>

【注意点】(2006.07.16, 8/12加筆修正)

左サイドバーに設置する場合、なるべく下の方のマイリストに貼付けるようにしてください。
右サイドバーが有る場合には、そちらに設置することをお薦めします。
こちらは逆に、なるべく上の方のマイリストに貼付けて、

cocoPView.init_onload() ;

を

cocoPView.getArchivesRequest() ;
cocoPView.makePages() ;

に変更して下さい。その方がページ内目次の表示が早まります(右サイドバーに色々貼り付けてある場合には特に有効です)。

暴想(なおゆき)さんの『ココログをAjax化するJavaScript(再掲)』(月別／カテゴリ別バックナンバーのプルダウンも含む)とは干渉しますので(後勝ち)併用は避けて下さい

なお、ページ(テンプレート)のタグ構造をある程度決め打ちしてしまっているため、対応可能なココログは以前のページ内目次よりも限定されてしまいます。
ブックマークレット：アーカイブページに目次とページングを付加
をご自分のページで試してみて、ページ内目次が出て来ない場合は未対応だと思って下さい。

ブックマークレットの使い方等は→『【Web】ブックマークレットのブラウザ毎の登録方法』

技術的には、なおゆきさんの『ココログをAjax化するJavaScript(再掲)』と、以前作成した『【ココログ】ページ内記事の目次を作るJavaScript(謎のおまけ付き)』を参考にしています。

※『続き』部分に更新履歴を記載しています。

---

【2007.08.13】

• ページ内移動と個別ページへのリンクの設定を入れ換えるオプション(cocoPView.switchLinkType)追加
• cocoPView.getArchivesRequest()を直接コールしたときに、カテゴリー／バックナンバーが置換されないことがある(cocoPView.getArchivesOnload及びcocoPView.onCompleteSidebarオプションが効かなくなる)不具合修正
• 目次のタイトル(h2)とアーカイブページのタイトル(h2 class="content-header")とが被ってしまうので、後者を隠すように修正

【2006.08.14】

• アーカイブをページングする/しないを選択するオプション(cocoPView.archivePaging)追加

【2006.07.29】

• 表示カスタマイズ用オプション追加(【サイドバー用設定】のmonthlyPullDownSelect, categoryPullDownSelect, 【アーカイブページ用設定】のpageIndexTitle, topPageSubTitle, addSubTitleToH2, addSubTitleToH3)。
• ページ内のアンカーを指定したリンクから来た場合には、全件表示にするように修正。

【2006.07.16】

• コメント／トラックバックのページングの方法修正。
  ナビ釦の左が新・右が旧だったのを、左が旧・右が新に変更(元の並び順が『古いものが上』の場合)。
• コメント／トラックバックのカウント表示追加。
• 元となる並び順を指定するオプションの変更
  旧：cocoPView.tbAscend → 新：cocoPView.tbReverse
  旧：cocoPView.commentAscend → 新：cocoPView.commentReverse
  
  新旧で意味が反対(true/falseが逆転)なので注意。

【2006.07.16】

• 個別記事ページにて、コメント／トラックバックのページングを行う機能追加。

【2006.07.15】

• Ajaxにアーカイブ読込時に、ページ更新後、任意の関数をコールする機能追加。

【2006.07.14】

• カテゴリーディレクトリの判別方法修正。