FC2ブログの個別ページでも使えるページナビ
ブログパーツ
まず、以下のスクリプトをテンプレートの<head>~</head>内のどこかに追加します。
1と2は不可避として、3については対応方法を考えましたので、次回の記事で説明します。
<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>
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-->)内の出力箇所に以下を追加します。
display: inline-block;
width: 35px;
font-size: x-large;
}
.page_navi b {
display: inline-block;
width: 35px;
}
<script type="text/javascript"><!--
pagenavi(15, "<%total_pages>", "<%nextpage_url>", "<%prevpage_url>", ".html"); //--></script>
個別ページエリア(<!--permanent_area-->~<!--permanent_area-->)に出力する場合は以下の制限があります。pagenavi(15, "<%total_pages>", "<%nextpage_url>", "<%prevpage_url>", ".html"); //--></script>
- エントリーページに欠番がある場合はそのページ送りをクリックするとNot foundエラーになる
- エントリーページ番号の順序とエントリーページの日時設定が一致していない(例えばエントリーページ1番の日時設定がエントリーページ2番よりも後になっている等)と動作が変になる。日時設定を手動で変えない限りおきません。
- 第2引数に総ページ数を指定しなければならないが、個別ページでは<%total_pages>を使用できない。
1と2は不可避として、3については対応方法を考えましたので、次回の記事で説明します。
スポンサーサイト
");
} else {
document.write("");
}
//-->
コメント