宇都宮ホームページ制作会社｜IT-cares  >>  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>&lt;&lt;<\/a>　";

        }else{

          $pager_arr[$row++] = "<a href=\"javascript:pmove("+$back+","+$i+");\">&lt;&lt;<\/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>&gt;&gt;<\/a><\/div>";

        }else{

          $pager_arr[$row++] = "<a href=\"javascript:pmove("+$next+","+$i+");\">&gt;&gt;<\/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;      //ページの前後に表示するページ数