Jimdoブログをページャーで整理する方法
Jimdoブログは更新を重ねて量が増えていくと縦に長くなってしまい、古い記事は自動的に表示されない仕様になっています。そんな時には他ブログでよく見る「ブログページャー」を付けて見やすくしましょう。
設定方法
① 設定メニューから基本設定を選択し「ヘッダー編集」をクリックします。
② ヘッダー編集画面へ下記コードを挿入します。
ここでは「jQuery」を使います。注意：事前にブログ表示を100に設定してください。
■jQuery
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1')</script>
■ページャーコード（少々長いですが）
<script type="text/javascript">
//<![CDATA[
var $p_first = 1; //最初に表示するページ
var $page_set = 5; //1ページに表示するブログ数
var $open_page = 3; //ページの前後に表示するページ数
var $p_status = Array();
var $b_page = Array();
var pmove;
jQuery.noConflict();
(function($) {
$(function() {
$("div.blogselection").each(function($i){
var $b_count = $(this).children("div.j-blogarticle").length;
if($b_count>5){
$pager ="<div class=\"pager_navi\"><\/div>";
$(this).append($pager);
$(this).prepend($pager);
$b_page[$i] = 1 + Math.floor(($b_count - 1) / $page_set);
pmove($p_first,$i);
}
});
});
pmove = function($p,$target) {
$p_status[$target] = $p;
$("div.blogselection").each(function($i){
if($i == $target){
var $pager_arr = Array();
var $back = $p_status[$i] - 1;
var $next = $p_status[$i] + 1;
var $f = $p_status[$i] - $open_page;
if($f <= 0){
$f = 1;
}
var $l = $p_status[$i] + $open_page;
if($l > $b_page[$i]){
$l = $b_page[$i];
}
var $row = 0;
$pager_arr[$row++] = "<div class=\"pager_navi\">";
if($p_status[$i] == 1){
$pager_arr[$row++] = "<a><<<\/a> ";
}else{
$pager_arr[$row++] = "<a href=\"javascript:pmove("+$back+","+$i+");\"><<<\/a> ";
}
var $j;
for($j=$f;$j <= $l;$j++){
if($j!=$p_status[$i]){
$pager_arr[$row++] = "<a href=\"javascript:pmove("+$j+","+$i+");\">"+$j+"<\/a> ";
}else{
$pager_arr[$row++] = "<a><b>"+$j+"<\/b><\/a> ";
}
}
if($p_status[$i] == $b_page[$i]){
$pager_arr[$row++] = "<a>>><\/a><\/div>";
}else{
$pager_arr[$row++] = "<a href=\"javascript:pmove("+$next+","+$i+");\">>><\/a><\/div>";
}
$pager_arr[$row++] = "<\/div>";
$pager ="";
$.each($pager_arr,function(key,val){
$pager = $pager + val;
});
$(this).children("div.pager_navi").html($pager);
$(this).children("div.j-blogarticle").hide();
$(this).children("div.j-blogarticle").each(function($j){
if($j >= ($p_status[$i] * $page_set)-$page_set && $j < ($p_status[$i] * $page_set)){
$(this).show();
}
});
$("body").scrollTop(0);
}
});
};
})(jQuery);
//]]>
</script>
さらにカスタマイズするポイント
ブログの量によって、下記・赤色の数字部分を変更することで表示量も変更することができます。
var $p_first = 1; //最初に表示するページ
var $page_set = 5; //1ページに表示するブログ数
var $open_page = 3; //ページの前後に表示するページ数
