Follow @papepo100
    

FC2ブログの個別ページでも使えるページナビ

ブログパーツ
0 0 2016/10/30
pagenavi2.png FC2ブログ用のページナビに以下の修正を加えたものを作成しました。

1. ページ送りの出力数を第一引数に指定する形式に変更
2. 個別ページにも使用できる様に変更
3. 外部ファイル化可能に変更
まず、以下のスクリプトをテンプレートの<head>~</head>内のどこかに追加します。
<script>
function pagenavi(w, n, next, prev, ext, self) {
    url = next;
    add = -1;
    if (url == '') {
        url = prev;
        add = 1;
    }

    u = -1;
    if ((i = url.indexOf('/page-')) != -1) {
        c = url.substring(i + 6, url.length - 5);
        base = url.substring(0, i + 6);
    } else if (url.indexOf('/category') != -1 || url.indexOf('/blog-date-') != -1) {
        i = url.lastIndexOf('-');
        c = url.substring(i + 1, url.length - 5);
        base = url.substring(0, i + 1);
    } else if ((i = url.indexOf('page=')) != -1) {
        c = url.substring(i + 5);
        base = url.substring(0, i + 5);
        ext = '';
    } else if (self.indexOf('/blog-entry-') != -1) {
        i = self.lastIndexOf('-');
        c = Number(self.substring(i + 1, self.length - ext.length));
        base = self.substring(0, i + 1);
        add = -1;
        ne = '10000'; pr = '-10000';
        if (next != '') {
            i = next.lastIndexOf('-');
            ne = next.substring(i + 1, next.length - ext.length);
        } else {
            i = prev.lastIndexOf('-');
            pr = prev.substring(i + 1, prev.length - ext.length);
        }
        if (Number(c) > Number(ne) || Number(c) < Number(pr)) {
            u = n;
        }
    } else {
        c = 0;
        base = '';
        ext = '';
    }
    n = Number(n);

    if (n < 1) n = 1;
    c = Number(c) + add + 1;
    if (c < 1) c = 1;
    if (c > n) c = n;
    if (w < 0) w = 0;

    cnt = 1;
    if (w/2 - (n - c) == 0) {
        add = 0;
    } else {
        add = 1;
    }
    h = Math.floor(w/2);
    for (i = 1; i <= n; i++, u--) {
        if (url.indexOf('/blog-entry-') != -1) {
            if (u <= -1) {
                dot = '<a href=\"' + base + i + ext + '\" title=\"' + i + '\">.</a>';
            } else {
                dot = '<a href=\"' + base + u + ext + '\" title=\"' + i + '\">.</a>';
            }
        } else {
                dot = '<a href=\"' + base + (i - 1) + ext + '\" title=\"' + i + '\">.</a>';
        }
        if (((((n - c <= h && n - w + add < i && c + h - 1 > i) ||
               (n - c > h && c + w > i && i > c - h) && u <= -1) ||
              ((n - (n-c+1) <= h && n - w + add < i && (n-c+1) + h - 1 > i) ||
               (n - (n-c+1) > h && (n-c+1) + w > i && i > (n-c+1) - h) && u > -1)
             ) && cnt < w) || i == 1 || i == n) {
            if ((i == c && u <= -1) || (u == c && u > -1)) {
                document.write('<b>' + i + '</b>');
            } else {
                if (url.indexOf('/blog-entry-') != -1) {
                     if (u <= -1) {
                         document.write('<li><a href=\"' + base + (i) + ext + '\">' + i + '</a></li>');
                     } else {
                         document.write('<li><a href=\"' + base + (u) + ext + '\">' + i + '</a></li>');
                    }
                } else {
                    document.write('<li><a href=\"' + base + (i - 1) + ext + '\">' + i + '</a></li>');
                }
            }
            cnt = cnt + 1;
        } else {
            if (i == 2 || i == n -1){
                document.write(dot);
            }
        }
    }
}
</script>
次にページ送りのレイアウトに<li>を使っているのでスタイルシートに以下を追加します。(ないとページ送りが縦に羅列されます)
.page_navi li {
    display: inline-block;
    width: 35px;
    font-size: x-large;
}

.page_navi b {
    display: inline-block;
    width: 35px;
}
ページ一覧エリア(<!--not_permanent_area-->~<!--not_permanent_area-->)内の出力箇所に以下を追加します。
<script type="text/javascript"><!--
pagenavi(15, "<%total_pages>", "<%nextpage_url>", "<%prevpage_url>", ".html"); //--></script>
個別ページエリア(<!--permanent_area-->~<!--permanent_area-->)に出力する場合は以下の制限があります。

  1. エントリーページに欠番がある場合はそのページ送りをクリックするとNot foundエラーになる
  2. エントリーページ番号の順序とエントリーページの日時設定が一致していない(例えばエントリーページ1番の日時設定がエントリーページ2番よりも後になっている等)と動作が変になる。日時設定を手動で変えない限りおきません。
  3. 第2引数に総ページ数を指定しなければならないが、個別ページでは<%total_pages>を使用できない。

1と2は不可避として、3については対応方法を考えましたので、次回の記事で説明します。
スポンサーサイト
このエントリーをはてなブックマークに追加

コメント

非公開コメント