トップページイラスト(ナナセミキ様作成)

イラストの情報はこちらから≫

2012年

4月

04日

Jimdo・みんビズカスタマイズ ブログ機能を拡張してみる(ブログページャーの導入)

Jimdoのブログにページャー(ページ送り)機能を追加してみました

更新情報

2012年6月3日
jQueryの外部リンク設置用のコードを用意しました。

2017年1月16日
JQueryの外部リンク設置用コードを修正しました。

Jimdoのブログ記事は「全て」表示させようとすると。記事の量によってはとんでも無い長さになりますね。

でも表示数を限定すると、古い記事が表示されないし、タグ付とページ分けでアーカイブ化できるけれど、作業が大変。

何か良い方法は無いかなと色々探していたら。Jimdo用のブログページャーを見つけたので導入してみました。

表示がスッキリとしてとても便利です。

トップページにも導入!とても便利です
トップページにも導入!とても便利です

設置方法

ブログページャー作者様(INTERCIDONA 様)のサイトに設置方法が掲載されていますので、そのまま実施すれば完了!のはずなのですが、複数サイトで検証した所Jimdoのシステムと干渉したケースがあったため、その回避方法とあわせて掲載します
(掲載について了承頂いたINTERCIDONA 様 ありがとうございます)。

基本的に「独自レイアウト」での設置を想定していますが、標準レイアウトの場合でも「ヘッダ部分を編集」等で設置可能です。

1:jQueryファイルをアップ

jQuery.jsを「レイアウト」⇒「独自レイアウト」⇒「ファイル」にアップします。
(外部リンクを「ヘッダー部分を編集」や独自レイアウトのHTMLに設置でもOKです)

※2012年6月3日追記
外部リンク設置用のコードを用意しました。下記コードをコピーしてお使いください

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1')</script>

2:「設置⇒ヘッダー部分を編集」にコードを追加

このサイトで使用にあたり、一部修正(1ページに表示するブログ数等)したコードです。
コピー&ペーストする際は、コピー後、一度「メモ帳」に貼り付けてから作業すると「余計なコード」が表示されずにうまく貼り付けることができます。

<script type="text/javascript">
//<![CDATA[

//▽ブログページャー変数郡
var $p_first = 1;        //最初に表示するページ
var $page_set = 8;       //1ページに表示するブログ数
var $open_page = 2;      //ページの前後に表示するページ数
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;
      //ブログが10個以下ならページャー要らない
      if($b_count>10){
        //ページャーナビをブログブロックの上と下に追加
        $pager ="<div class=\"pager_navi\"><\/div>";
        $(this).append($pager);
        //ブログブロックの上はすぐブログ記事が始まっちゃうので<hr>で横棒入れておく
        $(this).prepend($pager +"<hr>");
        //何ページになるか調べて格納
        $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];
        }
        //▽ページャーの内容
        //ロジック説明
        //・今表示したいページが1ページ目だった場合は「<<」のリンクを消す
        //・今表示したいページの番号だった場合、文字を太文字にしてリンクを消す
        //・今表示したいページが最大ページ目だった場合は「>>」のリンクを消す
        //・上記以外は関数「pmove」をjavascriptで起動出来るリンクを設定する
        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>

※2012年5月4日追記
あらかじめテキスト形式で保存したデータをダウンロード出来る様にしました。
下記よりダウンロードしてお使いください。

ブログページャー用コード
ブログページャー用コードをテキストファイル形式で保存してあります。ダウンロード後ファイルを開き、記載されているコードをコピーしてお使いください。
blog_p.txt
テキスト文書 3.6 KB

※2014年2月27日追記
js形式で保存したデータをダウンロード出来る様にしました。独自レイアウトで制作する際にご活用ください。

ブログページャー用コード(js形式版)
ブログページャー用コードをjs形式で保存してあります。独自レイアウトの「ファイル」でアップロードしてご利用頂けます。
jquery-blogpager.js
js ファイル 4.0 KB
ブログページャー用コード(js形式版、タグ一部変更版)
ブログページャー用コードをjs形式で保存してあります。ページャー表示部分の太字部分について、<b>タグから<strong>タグに変更してあります。
jquery-blogpager-strongtag.js
js ファイル 4.0 KB

3:干渉回避コードを追加(追加しなくて良い場合もあり)

上記コードを追加した後「プレビュー」を押すと、ブログ表示で「数量」を「100」としているブログにページャー表示が追加されています(表示されない場合はブラウザの「更新」ボタンを押してみてください)。

※2013年6月20日追記
Jimdoの仕様変更に伴い「ブログ表示数量」の内容を変更しました。
旧:ブログ表示で「数量」を「全て」
新:ブログ表示で「数量」を「100」

これで終了!のはずなのですが、様々なJimdoサイトで検証したところ、一部のサイトで「Jimdoのシステムと干渉する(一度プレビュー表示させないとログアウトできない、ログイン方法が限られる、ブログ記事が投稿出来ない 等)」事象が発生しました。

これを回避するために、下記「干渉回避コード」を、先に記載したブログページャー表示コードの下または独自レイアウトのHTML部分(私はこちらの方が確実でした)に設置します。

<!--Jimdo干渉防止コード-->

<script type="text/javascript">
/* <![CDATA[ */
jQuery.noConflict();
/* ]]> */
</script>

<!--Jimdo干渉防止コードここまで-->

私のケースでは、これでどのサイトでも問題無く動作しました。
サイトによっては1ページに表示させる量を変えたりする必要があるため、その際は各ページ毎に「ウィジェット/HTML」追加で設置しました。

ブログ記事の表示にお悩みの方は、ぜひ一度お試しください。

設置対応行います(有償での対応になります)

上記の説明でも分からない!という方向けに、標準レイアウトに限り設置対応を行います。

一律○円!としたい所ですが、他ソース等の設置状況によりうまく動作しない場合は調査・修正の必要がありますので、サイト拝見した上で金額を提示させて頂きます。

※お支払(お振込)を確認した上で対応致します。
※独自レイアウトへの設置も可能ですが、他ソース等の設置状況によりうまく動作しない場合がございますので、調査・修正費用を含めた金額は高額になります。ご了承頂ける場合は、下記フォームのメッセージ欄に「独自レイアウトへの設置」を明記頂きご連絡ください。サイトを確認の上、別途金額をご連絡致します。

コードを入力してください。:

メモ: * は入力必須項目です

コメントをお書きください

コメント: 20
  • #1

    yama (木曜日, 03 5月 2012 22:36)

    初めまして。yamaと申します。
    私のサイトにもページャを使用させて頂きたいと思い、やってみたのですが・・・
    設置できないのです。初心者のため何がどう間違えてるのか改善点が分からないんです。
    お忙しいとは思いますが、ご教授いただければと思いコメントいたしました。

    以下、私が実際に行った手順です。
    JQuery.jsからjquery-1.7.2.minをダウンロードして、レイアウトからファイルにアップロード

    上記コードをコピーしヘッダー部分を編集、に張り付け

    jimdo干渉防止コードをコピーしてページャ表示コードの下に貼り付け

    以上です。

    すみませんが、教えていただけますでしょうか・・

  • #2

    donnamonjyaroi (金曜日, 04 5月 2012 11:15)

    yama 様
    初めまして。管理人のヒデです。
    サイトをご覧頂き、またソースをご利用頂き有難うございます。

    対応として、まずは設置してあるブログの設定をご確認ください。
    表示数量が「すべて」または「空欄」以外の表示(5や10など)になっていると、
    ブログページャーが動作しない場合があります。

    また、ページャーのコードと干渉防止コードをコピーした後、一度「メモ帳(テキストエディタ」に貼り付けてから作業すると「余計なコード」が表示されません。

    一度ご確認・お試し頂き、解消しない様でしたらまたご連絡くださいね。

  • #3

    山代 紗栄 (金曜日, 04 5月 2012 20:36)

    ご返答いただきましてありがとうございます。

    質問なんですが、メモ帳に張り付けてから作業するとは、コード内に書いてある日本語のコード説明の部分を消す作業ということでしょうか?

    毎回、初歩的な質問で申し訳ありません・・・

  • #4

    donnamonjyaroi (金曜日, 04 5月 2012)

    山代 様

    コード内に描いてある日本語のコード説明部分は消さなくて大丈夫です。

    サイトから直接コピーすると、余計なプログラムコード(英語表記になります9
    が一緒にコピーされる場合があります。

    それを回避するため
    1:コピーしたソースを一旦メモ帳に貼り付け
    2:そのまま再度コードを全て選択してコピー
    3:設置したい箇所(今回は「ヘッダー部分を編集」)に貼り付ける。
    という作業を行います。

    ご連絡頂いた内容をふまえ、作業が簡単になる様予めテキスト形式で保存したデータをダウンロード出来る様にしましたのでご活用ください(Jimdo干渉防止コードは残念ながら設置できなかったので、申し訳ありませんが上記手順を行ってください)。

    ご不明な点がありましたらまたお気軽にご連絡くださいね。

    他にもサイトの「魅せ方」や制作にあたってご不明な点等ありましたら、お気軽に「お問い合わせ」からご連絡ください^^

  • #5

    yama (金曜日, 04 5月 2012 22:26)

    ページャ設置することができました!
    教えていただき、本当にありがとうございました。

  • #6

    donnamonjyaroi (金曜日, 04 5月 2012 22:40)

    山代 様

    無事設置出来た様で何よりです。
    ステキなサイトでクグロフをどんどんPRしてくださいね^^

  • #7

    けん (木曜日, 24 5月 2012 00:56)

    1,2+3の順に従い、標準レイアウトでトライしましたが最初は機能しませんでした。
    このプログラム言語は知らないので、何度か同じことを再トライしても改善されず、何かが抜けているのではと、ブログページャー作者様にあった下記の記述を 設置→ヘッダー部分を編集 で、ここのインストールでの記述の前に次の記述を先に貼り付けで入れて解決しました。

    <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[
    jQuery.noConflict();
    (function($) {
    $(function() {
    $("#jimdobox").appendTo($("#navigation").children("div.gutter"));
    });
    })(jQuery);
    //]]>
    </script>

    もし、こちらの記事の内容だけの処理で可能と思われてトライして?と、苦労されてる方もいるかもしれないと思い、参考にコメントさせていただきました。
    しかし、ファイルをすぐダウンロードして使えるようにされてたりと、ありがとうございます。
    おかげで、ブログもすっきりしたものになりました。
    今のところ、順調に使えております。どうもありがとうございます。

  • #8

    donnamonjyaroi (木曜日, 24 5月 2012 01:28)

    けん 様
    初めまして。管理人のヒデです。
    サイトをご覧頂き、またソースをご利用頂き有難うございます。

    ご指摘いた件ですが、解説内の
    1:jQueryファイルをアップ
    JQuery.jsを「レイアウト」⇒「独自レイアウト」⇒「ファイル」にアップします。
    (外部リンクを「ヘッダー部分を編集」や独自レイアウトのHTMLに設置でもOKです)
    に当てはまる内容ですね。

    けん 様のサイトは標準レイアウトですので、この場合は「外部リンクを「ヘッダー部分を編集」や独自レイアウトのHTMLに設置」が必要になりますが、確かに説明不足ですね。
    ご連絡頂いたINTERCIDONA 様のjQueryリンクをそのまま設置すると、場合によっては「干渉防止コード」を2重に書く事になりますので、情報整理の上、近日中に解説を修正します。

    貴重なご意見頂き本当に有難うございます。
    これからも、Jimdoを活用してくださいね^^

  • #9

    けん (金曜日, 25 5月 2012)

    早々のご回答ありがとうございます。
    他所での説明など、コードをある程度理解できたりすることが前提のような内容が多くて、解説の修正は非常に助かります。
    仕事もあるなか、無理されないようにお願い致します。

  • #10

    けん (木曜日, 07 6月 2012 21:07)

    早々の記事更新をありがとうございます。
    変更を行いました。これでホッとしています。
    今のところ干渉かどうか?ですが、記事アップとか続けると、変更とか新規記事作成で日本語入力ができず、再度ログインして行っています。
    (ただし、まだヘルプを精査していないので何らかの方法で解決済みのことかもしれませんが)
    このため、単なる情報として受け取っていただけたありがたいです。
    どうも、ありがとうございました。これで安心しました。

  • #11

    Serhiy (水曜日, 13 6月 2012 22:52)

    Thank you for sharing.

  • #12

    chrono-clavis (木曜日, 15 11月 2012 23:28)

    はじめまして!
    jimdoにページャー機能がデフォルトで備わっていないことに
    困っていたところ、こんな素晴らしいスクリプトを無料で公開されていることに
    感激しております。
    お陰様で順調に使用させて頂いているのですが、2ページ以降で投稿していた
    youtubeの動画が表示されないと言う症状が出ております。

    もしよろしければ対処方法などございましたら、お手透きの際に
    ご教授頂けると大変助かります。

  • #13

    ヒデ・ユーキ(どんなもんじゃろい管理人) (火曜日, 20 11月 2012 14:22)

    chrono-clavis 様

    初めまして。管理人のヒデです。
    サイトをご覧頂き、またソースをご利用頂き有難うございます。

    ご連絡頂きました件につきまして、

    ・サイトにブログページャーを設置
    ・Jimdoのyoutube挿入機能を用いブログ記事にyoutubeを表示
    ・2ページ目以降で表示される様に設定

    上記内容で確認を行いましたが、残念ながらご連絡頂いた事象が確認できませんでした。申し訳ありません。
    別の要因も考えられますので、より詳細な確認が必要な場合は、当サイトの「問い合わせフォーム」からご連絡頂ければ幸いです。

  • #14

    chrono-clavis (火曜日, 20 11月 2012 14:42)

    ありがとうございます^^
    では改めて問い合わせフォームの方からご連絡させて頂きますので
    お時間のよろしい時に是非よろしいお願い致します!

  • #15

    goodriversoft (火曜日, 16 7月 2013 22:36)

    はじめまして。
    ブログページャー使用させて頂きました。
    書いてある通りにやってすぐに設置できました。
    標準レイアウトですが問題なく動作しているようです。
    どうもありがとうございました。

  • #16

    ヒデ・ユーキ(どんなもんじゃろい管理人) (水曜日, 17 7月 2013 00:04)

    goodriversoft 様

    初めまして。管理人のヒデです。
    サイトをご覧頂き、またソースをご利用頂き有難うございます。
    無事に動作している様で何よりです。

    これからも、どんどんJimdoを活用してくださいね^^

  • #17

    snkids (水曜日, 27 11月 2013 11:50)

    初めまして!ブログ記事が多くなって困っていましたところこのページャーを検索で知り設置してみました。すぐに表示されました!
    情報を分かりやすく解説してくださり感謝します。ありがとうございました。

  • #18

    ヒデ・ユーキ(どんなもんじゃろい管理人) (日曜日, 01 12月 2013 19:38)

    snkids 様

    初めまして。管理人のヒデです。
    サイトをご覧頂き、またソースをご利用頂き有難うございます。
    ブログ記事の快適な運用にご活用ください^^

  • #19

    aki (月曜日, 18 7月 2016 16:20)

    はじめまして! jimdoのブログページャー、こちらのページを参考に無事設置できました。ありがとうございました!

    ひとつ質問があるのですが、ページャーがブログ本文の上下に配置されていますが、下部のみにしたい場合はどうすれば良いのでしょうか? もしよろしければご回答いただけますと幸いです。よろしくお願いします!

  • #20

    aki (月曜日, 18 7月 2016 16:24)

    すみません、自己解決しました!
    -----
    //ブログブロックの上はすぐブログ記事が始まっちゃうので<hr>で横棒入れておく
    $(this).prepend($pager +"<hr>");
    -----
    上記を削除すると、横線ごと上のページャーが消えました。お騒がせしました…。

▲このページのトップへ