記事の下にある、「前の投稿」とか「次の投稿」とか誘導する部分をページナビゲーションというそうです。「ページナビ」で検索するとたくさんカスタマイズ方法がでてきます。これをページ番号付ページナビに変えてみました。
(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'>をみつけます。
この上行に以下のインクルードをペーストします。
ペーストするときは「プレーンテキストとして貼り付ける」ように注意しましょう。
以下をコピペ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<b:includable id='page-navi'> <div class='pagenavi'> <script type='text/javascript'> var pageNaviConf = { perPage: 7,numPages: 5,firstText: "First", lastText: "Last", nextText: "»", prevText: "«" } </script> <script type="text/javascript" src="http://yourjavascript.com/815315225/www.mybloggerblog.com.js"></script> <div class='clear'/> </div></b:includable> |
その<b:include name='nextprev'/>を以下に置き換えます。
1 2 3 4 5 6 7 8 9 10 11 |
<b:if cond='data:blog.pageType == "index"'> <b:include name='page-navi'/><b:else/> <b:if cond='data:blog.pageType == "archive"'> <b:include name='page-navi'/> </b:if><b:else/> <b:if cond='data:blog.pageType == "item"'> <b:include name='nextprev'/> </b:if></b:if> |
（2013年8月18日追記 下に書いたようにアーカイブページは投稿数を制限できないので以下のようにしました。
1 2 3 4 5 |
<b:if cond='data:blog.pageType == "index"'> <b:include name='page-navi'/><b:else/> <b:include name='nextprev'/></b:if> |
次に]]></b:skin> を以下に置き換えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
#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> |
インデックスページではこんな感じになりました。
上でペーストした<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の設定が反映されません。
1 2 3 4 5 6 7 8 |
<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 != "true"'>,</b:if> </b:loop> </b:if></span> </div> |
1 |
<a expr:href='data:label.url' rel='tag'><data:label.name/></a> |
1 |
<a expr:href='data:label.url + "?max-results=7"' rel='tag'><data:label.name/></a> |
さらにラベルの一覧表示のガジェットを使っているときはそこのラベル一覧呼び出し部分も変更しないといけかせん。
ChromeでHMTL編集画面を開いてCtrl+Fで'data:label.url'を検索して、片っ端から'data:label.url + "?max-results=7"'と変更してもよいかもしれません。
ラベル一覧ガジェットのHTMLはウィジェットへ移動→Label1で見れます。
ページ番号付ページナビのperPageの設定を変えるたびにこれらの数字も変更しないといけません。
月別アーカイブページは表示される投稿数を制限する方法がない
このテストブログでは15個投稿がありますが、月別アーカイブページにすると15投稿全てが表示されてしまい、ページ番号付ページナビが表示されません。
この投稿数が変更できればページ番号付ページナビが表示されるはずですが月別アーカイブページはラベルアーカイブページと違って2013_07_01_archive.htmlみたいな静的ページが表示されるので無理なようです。
このブログですと2013年4月は85個も投稿がありますが、アーカイブリンクの「4月」をクリックすると1画面に85個もの記事がだらだらと表示されてしまいます。
ページサイズが1MB以内ならすべて表示されるようです。
ページのサイズ: ブログのメイン ページやアーカイブ ページの 1 ページのサイズは、1 MB までに制限されています。この容量はテキストのみで数百ページ分に相当しますが、ブログのトップ ページで数百件の投稿を公開している場合は制限を超えることがあります。制限に達した場合は、「006 Blogger サポートにご連絡ください」というエラー メッセージが表示されます。このエラーを回避するには、メイン ページの投稿の数を減らします。これにより、ページの読み込み時間が短縮されるというメリットもあります。Blogger アカウントの制限事項について - Blogger ヘルプエラーを表示させるぐらいなら初めから表示数を制御できるようにしてほしいですね。
公開日時が同じ投稿が区切りにくると後に続く同じ日時の投稿は表示されない
⇒⇒⇒デフォルトテンプレートでも同じ結果=公開日時が重複する投稿は避けましょう
このテストブログでは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の一度に表示する記事の件数を変更する方法 : たき備忘録
ラベルアーカイブページの投稿数制限方法が載っています。
探していた情報です。ありがとうございました。
返信削除やってみたら極小のフォントサイズで表示されてしまいます。
とても残念です。
#blog-pager{font-size:140%;}
削除CSSのこのプロパティが抜けているのではないでしょうか。