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; //ページの前後に表示するページ数
●総合お問い合わせ窓口 / フリーダイヤル
土曜・日曜・祝祭日を除く平日9時~18時
※スマートフォンはタップで電話
栃木県宇都宮市大通り3-5-18宮リバー4F
アイティーケアーズ合同会社