小平市で腰痛・首の痛み・肩の痛み・膝の痛みなどでお悩みの方のための整骨院・整体-小平・井上整骨院のトップイメージパソコン用の画像 小平市で腰痛・首の痛み・肩の痛み・膝の痛みなどでお悩みの方のための整骨院・整体-小平・井上整骨院のトップイメージスマートフォン用の画像

Jimdoブログにストレスフリーのページャーを付けよう!

IT-cares様の『Jimdoブログをページャーで整理する方法』でブログにページャーを付けてみたのですが、この方法では、ページャーをクリックすると毎回ページトップ(トップページではありませんよ。ページの先頭ですよ。念のため…)に戻ってしまいます。

 

ブログをページトップに表示している場合は、何も問題がないのですが、ブログの表示位置がページトップから離れば離れるほどストレスが募ります。

 

そこで少し変更を加えてみました。皆さんのお役に立てれば幸いです。

 

参考になった・役に立ったと思っていただけた場合、当院トップページの一番下にある『G+1』ボタンか『いいね』ボタンを押してもらえたら嬉しいです。

 

※HTML,CSS,Javascriptなどを使ったカスタマイズをご自身で行う場合は、自己責任でということを忘れずに。

ページャーコードは以下の通りです。コピペして利用してください。

<script type="text/javascript">
//<![CDATA[
var $p_first = 1;        //最初に表示するページ
var $page_set = 1;       //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>1){
        $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();
          }
        });
          // 要素の位置を取得する
var element = document.getElementById( $pager ) ;
var rect = element.getBoundingClientRect() ;
var positionX = rect.left + window.pageXOffset ;        // 要素のX座標
var positionY = rect.top + window.pageYOffset ; // 要素のY座標

// 要素の位置にスクロールさせる
window.scrollTo( positionX, positionY ) ;
      }
    });
  };
})(jQuery);
//]]>
</script>

さらにカスタマイズするには、下記の赤字の数字部分を変更しましょう。

 

var $p_first = 1;        //最初に表示するページ

var $page_set = ;       //1ページに表示するブログ数

var $open_page = 3;      //ページの前後に表示するページ数

 

※『var $page_set = ;       //1ページに表示するブログ数 』を変更する場合には、

if($b_count>1){』の赤字の数字部分も一緒に変更してください。

IT-cares様の『Jimdoブログをページャーで整理する方法』とSyncer様の『JavaScriptで指定位置までスクロールさせる方法』を参考にさせていただきました。

 

設定方法に関しては、『Jimdoブログをページャーで整理する方法』をご参照ください。