ホーム / 旧ブログ /

Blogger:ページ番号付ページナビ(1)何ページ目を見ているのか一目でわかる方法

2013-07-07

旧ブログ

t f B! P L

記事の下にある、「前の投稿」とか「次の投稿」とか誘導する部分をページナビゲーションというそうです。「ページナビ」で検索するとたくさんカスタマイズ方法がでてきます。これをページ番号付ページナビに変えてみました。
(2016.7.18追記。フィードの取得制限のためにこのページナビでは全投稿をナビできないのでBlogger:ページ番号付ページナビ(4)投稿数が150個を超えても使えるように修正するで入れ替えました。)

ページ番号が出るのはインデックスページのみ


BloggerのテンプレートHTMLで区別できるページタイプは以下のように4種類あります。

index         　インデックスページ　ラベルインデックスページもこれになります。

item          　アイテムページ　    各投稿記事のページ

archive      　アーカイブページ  　月別などのアーカイブページ

static_page 　スタティックページ　 日付順にならない静的なページ

このうちページ番号を表示させるページナビのカスタマイズはどれもインデックスページに対するもののみでした。

アイテムページで表示させるものは見つけられませんでした。

非公開ブログでは動作しないことに気がつかず四苦八苦


テンプレートを結構いじることになるので最初に非公開のテストブログで導入しましたがうまくいかず四苦八苦しました。

 あきらめて失敗の記録を書いている途中でソースが外部ｊｓファイルを読み込んでいるのに気づきました。

（2013年8月25日追記。フィードを利用しているのでブログフィードの許可をしていなかったり、ブログの閲覧者を制限していると動きません。）

ひょっとしたら、と思って公開ブログにしてみたらあっさりうまくいきました。

えらく時間を無駄にしてしまいました。

ページ番号付ページナビの導入方法


How to add Number Page Navigation widget in BlogSpot/blogger blog? | My Blogger Blog

これを導入しました。

（H25.1.22追記。JSONPで&max-results=99999としてブログの投稿の情報を引き出しているのですがBlogger:JSONPを使ってJSON形式でブログの情報を引き出すで調べたようにBloggerでは一度に500個の投稿しか引き出せませんので投稿数が500個を超える場合は正しく動きません。）
(2016.4.26追記。500個からさらに150個に削減されました。Blogger:ページ番号付ページナビ(3)フィードの取得件数制限に左右されないページナビ参照。)

「画像ウィンドウ」のデフォルトテンプレートのページナビはこんな感じです。


これがこんな感じになるはずです。


管理画面→テンプレート→HTMLの編集、ウィジェットへ移動→Blog1

この「ブログの投稿」ウィジェットの中の<b:includable id='post' var='post'>をみつけます。

この上行に以下のインクルードをペーストします。

ペーストするときは「プレーンテキストとして貼り付ける」ように注意しましょう。


以下をコピペ。
<b:includable id='page-navi'>
  <div class='pagenavi'>
   <script type='text/javascript'>
    var pageNaviConf = {
    perPage: 7,numPages: 5,firstText: &quot;First&quot;,
    lastText: &quot;Last&quot;,
    nextText: &quot;&#187;&quot;,
    prevText: &quot;&#171;&quot;
    }
  </script>
  <script type="text/javascript" src="http://yourjavascript.com/815315225/www.mybloggerblog.com.js"></script>
  <div class='clear'/>
 </div>
</b:includable>
次に<b:includable id='main' var='top'>のなかにある<b:include name='nextprev'/>を探します。

その<b:include name='nextprev'/>を以下に置き換えます。
<b:if cond='data:blog.pageType == &quot;index&quot;'>
 <b:include name='page-navi'/>
<b:else/>
 <b:if cond='data:blog.pageType == &quot;archive&quot;'>
  <b:include name='page-navi'/>
  </b:if>
<b:else/>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include name='nextprev'/>
 </b:if>
</b:if>
pagetypeがitemのときは元の<b:include name='nextprev'/>を呼び出していますね。

（2013年8月18日追記　下に書いたようにアーカイブページは投稿数を制限できないので以下のようにしました。
<b:if cond='data:blog.pageType == &quot;index&quot;'>
 <b:include name='page-navi'/>
<b:else/>
  <b:include name='nextprev'/>
</b:if>
こうすると月別アーカイブページの下に次の月のインデックスページへ移動するボタンが表れます。）

次に]]></b:skin> を以下に置き換えます。
#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
     margin: 0 5px 0 0;
     padding: 2px 10px 3px;
     text-decoration: none;
     color: #fff;
     background: #2973FC;
     -moz-border-radius: 2px;
     -khtml-border-radius: 2px;
     -webkit-border-radius: 2px;
     border-radius: 2px;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
}
#blog-pager a:visited, .pagenavi a:visited {
     color: #fff;
}
#blog-pager a:hover, .pagenavi a:hover {
     color: #fff;
     text-decoration: none;
     background: #000;
}
#blog-pager-older-link, #blog-pager-newer-link {
     float: none;
}
.pagenavi .current {
     color: #fff;
     text-decoration: none;
     background: #000;
}
.pagenavi .pages, .pagenavi .current {
     font-weight: bold;
}
.pagenavi .pages {
     color: #fff;
     background: #2973FC;
}]]></b:skin>
これでテンプレートを保存します。

(なお、blockquoteのCSSがこの前にあるとblockquoteのCSSが反映されませんでした。詳しくはBlogger:引用符をカスタマイズへ）（原因はこのページ番号付ページナビとは関係はなくどうやら相手のいない}があったことが原因だったようです。）


インデックスページではこんな感じになりました。

上でペーストした<b:includable id='page-navi'>の5行目のperPage: 7,numPages: 5をいじることでページの表示をカスタマイズできます。

numPages: 5はページナビで表示されるページ番号の数の上限です。

いまは投稿数が全部で15個で1ページあたり7投稿に設定しているので全部で3ページしかないので3までしか表示されていませんね。

perPage: 7は1ページあたりに表示される投稿数です。

インデックスページの表示投稿数は管理画面→レイアウト→ブログの投稿→編集→メインページの投稿数で設定されているはずです。

デフォルトでは7になっています。この設定とページ番号付ページナビの設定が異なるとどうなるでしょう？

レイアウトの設定5としてみます。perPageは7のままです。


レイアウト画面での設定が優先されて5投稿ずつ表示されていますね。

と、思ったら違いました。1ページ目だけでした。

2ページ目以降はperPageの設定に従います。

ということで、レイアウト設定の投稿数とperPageの両方を同じ数字に設定しておく必要があります。


ちなみに、アイテムページではこんな風に表示されます。

ラベルインデックスページの1ページあたりの投稿数を設定する



ラベルインデックスページは投稿のフッターにある「ラベル：」のあとのラベル名をクリックすると表示されます。

ところがこれは<b:include name='page-navi'/>ではなく<b:includable id='post' var='post'>の中のhref='data:label.url'で呼び出されていますのでperPage: 7の設定が反映されません。

      <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>
この
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
を
<a expr:href='data:label.url + &quot;?max-results=7&quot;' rel='tag'><data:label.name/></a>
に変更すればラベル名をクリックしたときも表示される投稿数はページ番号付ページナビの設定と同じ7になります。

さらにラベルの一覧表示のガジェットを使っているときはそこのラベル一覧呼び出し部分も変更しないといけかせん。

ChromeでHMTL編集画面を開いてCtrl+Fで'data:label.url'を検索して、片っ端から'data:label.url + &quot;?max-results=7&quot;'と変更してもよいかもしれません。

ラベル一覧ガジェットのHTMLはウィジェットへ移動→Label1で見れます。

ページ番号付ページナビのperPageの設定を変えるたびにこれらの数字も変更しないといけません。

月別アーカイブページは表示される投稿数を制限する方法がない


このテストブログでは15個投稿がありますが、月別アーカイブページにすると15投稿全てが表示されてしまい、ページ番号付ページナビが表示されません。

この投稿数が変更できればページ番号付ページナビが表示されるはずですが月別アーカイブページはラベルアーカイブページと違って2013_07_01_archive.htmlみたいな静的ページが表示されるので無理なようです。

このブログですと2013年4月は85個も投稿がありますが、アーカイブリンクの「4月」をクリックすると1画面に85個もの記事がだらだらと表示されてしまいます。

ページサイズが1MB以内ならすべて表示されるようです。
ページのサイズ: ブログのメイン ページやアーカイブ ページの 1 ページのサイズは、1 MB までに制限されています。この容量はテキストのみで数百ページ分に相当しますが、ブログのトップ ページで数百件の投稿を公開している場合は制限を超えることがあります。制限に達した場合は、「006 Blogger サポートにご連絡ください」というエラー メッセージが表示されます。このエラーを回避するには、メイン ページの投稿の数を減らします。これにより、ページの読み込み時間が短縮されるというメリットもあります。Blogger アカウントの制限事項について - Blogger ヘルプ 
エラーを表示させるぐらいなら初めから表示数を制御できるようにしてほしいですね。

公開日時が同じ投稿が区切りにくると後に続く同じ日時の投稿は表示されない
$$$\Rightarrow$$$$$$\Rightarrow$$$$$$\Rightarrow$$$デフォルトテンプレートでも同じ結果=公開日時が重複する投稿は避けましょう


このテストブログでは15個投稿があるのでページ番号付ページナビで1ページ目は投稿１５から投稿９まで、2ページ目は投稿８から投稿２まで、3ページ目は投稿１が表示されるはずです。

ところが2ページ目を表示されると投稿５から投稿１までが表示され、3ページ目はなにも表示されません。

投稿６、投稿７、投稿８が表示されません。

なぜでしょう？

各ページのURLをみて理由が推測できました。

2ページ目のURLは
search?updated-max=2013-07-06T20%3A47%3A00%2B09%3A00&max-results=7
3ページ目のURLは
search?updated-max=2013-07-06T20%3A46%3A00%2B09%3A00&max-results=7
です。

各ページの先頭になる投稿は公開日時で判断しているようです。

テストブログの公開日時は以下のようになっています。
投稿１５から投稿１１　　2013-07-06　20時48分
投稿１０から投稿６　　　2013-07-06　20時47分
投稿５から投稿１　　　　2013-07-06　20時46分

ページ番号付ページナビの1ページ目は投稿９、20時47分で終わっています。

そこで2ページ目は20時46分からの投稿５が呼び出されているため、投稿９と同じ公開日時である投稿８から６が表示されなくなってしまっていると思われます。

これをうまく処理しているページ番号付ページナビを探してみましたが見つけられませんでした。

しかも、なんとデフォルトテンプレートのままでも重複する公開日時の投稿が区切りにくると以降の同じ公開日時の投稿は表示されませんでした。

現実には同じ公開日時の記事が連続する確率は低いと思うので実用上支障はないと思われますが、書き溜めてから公開するときは投稿日時が同じにならないように気をつけたほうがよさそうですね。

参考にしたサイト


xawa雑記帳: [Blogger] テンプレート中で現在表示されているページのタイプを判別する。
ページタイプの調査をされています。

How to add Number Page Navigation widget in BlogSpot/blogger blog? | My Blogger Blog
この記事で使わせて頂いたページ番号付ページナビです。

Bloggerの一度に表示する記事の件数を変更する方法 : たき備忘録
ラベルアーカイブページの投稿数制限方法が載っています。

次の関連記事:Blogger:ページ番号付ページナビ(2)簡単な導入方法、ただしラベルインデックスページは無理

ブログ検索 by Blogger

Translate

最近のコメント

読込中...

全記事

Created by Calendar Gadget

QooQ