FC2ブログにはいくつかのテンプレートタグが用意されていますが、ページ数を指定してページ移動できるページャー(1, 2, 3, …と表示されるリンク)がありません。そのページャーをjQueryを使って自作します。shoeistagramという照英の画像を集めたブログで実際に使っているコードです。
FC2ブログのテンプレートタグには「<%total_pages>」というものがあり、このタグは「何ページ存在するか」を数値で出力してくれます。ページ数がわかれば、出力しなければいけないリンク数が確定します。
そして、各ページのファイル名はpage-1.html、page-2.html、page-3.html…となっており、数値の部分を変数として出力すればよいことになります。1ページ目はトップページなので、番号はつきません。2ページ目はpage-1.html、3ページ目はpage-2.html…とページ数と番号が一致していないので注意してください。
[html]
$(function(){
var pc = <%total_pages>;
var html = ‘
- ‘;
- ‘ + x + ‘
- ‘ + x + ‘
for(var x = 1; x <= pc; x++){ if(x == 1){ html += '
‘
}else{
html += ‘
‘
}
}
html += ‘
‘;
$(‘.pager_list’).each(function(){
$(this).html(html);
});
});
[/html]
クラス名「pager_list」が付けられている要素の内側にHTMLを書き込んでいます。最終的に出力されるコードは下記のようになります。
[html]
[/html]