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;      //ページの前後に表示するページ数

Jimdoカスタムのお問い合わせはこちら