新しいブログ（このブログ）をBloggerブログで始めています。
過去に、いろいろカスタマイズを教えていただいたり試したことを思い出して、いぢいぢしていたのですが、公開までテストを繰り返していました。
私が、どうしてもつけたかったのがページナビ。
これ、ないととっても不便なんですよねー
あると便利なページナビ！
以前は、日本語でしっかり解説されたBlogが存在していたのですが、現在は閉鎖されてしまい、あの素敵なカスタマイズのコードは遠いお山へー
テスト中、いろいろと海外サイトで調べて、ページナビを実装してみました。
あなたのBlogを読みやすく、クールに演出してくれるページナビまとめ。
ブロガーでは珍しい、長い記事自体をページナビで分割するカスタマイズなども紹介してみます。
ネットショップなどを見ていても感じるのですが、こういったナビしかないと、ざーっと5ページ、6ページ見ていくと、気になったものが何ページ目にあったかわからなくなってしまいます。
10ページ全部見終わった後、5ペ−ジ目に戻りたくっても、またひとつずつ、前の記事のLinkをクリックして移動していかなければいけませんー
あーめんどくさっ！！
って、なってしまうのは、私だけでしょうか？？？
なので、自分のBlogには、ページナビがつけられるBlogサービスを！そんな風に思っていたわけす。
でも、私は、コードをがりがりかけるわけでもありませんし、HTMLとCSSという言葉を知っているぐらいのレベルです。
不明な点ばかりですが、実装できてしまったので紹介してみます。
アーカイブページには表示できません。
私のBlogを、年月で見たい人はまずいないと思うので、もともとアーカイブページは表示していません。
どうしてもページナビが表示されない場合があったりしますので、まずは、ご使用のテンプレートをチェック。
マイブログから、テンプレートへ移動。
HTMLの編集をクリックして、HTMLを開いて、デフォルトのページングのスタイルをチェックしてみて下さい。
こうなっていると表示されません。海外で配布されているテンプレートによくあるようです。
#blog-pager {
text-align: center;
}
こうなっていたら
clear:both;
を追加。
#blog-pager {
clear:both;
text-align: center;
}
これで、保存。
どのカスタマイズを行う時も、必ず、マイブログからテンプレートへ移動、バックアップ／復元をクリックして、使用中のテンプレートをダウンロードしてバックアップしておきましょう！！
ご使用のテンプレートでは、実装できないコードもあるので、いくつか試してみることも忘れずに。
テンプレート、HTMLの編集をクリック、ウィジェットのテンプレートを展開をチェックして下の文字列を検索。
見つけたら、こんな感じに書き換えます。
これでも、ラベルページのページングの表示が上手くいかない場合は、テンプレートでウィジェットの展開をチェックして『max-results=』を検索。
max-results=の後の数字が、自分で設定した数字と同じかをチェック。
違っていたら、設定とこの数字をあわせて下さい。
設定から、その他のサイトフィードの設定を『完全』に。
１ページ中に表示したい数字は、カスタマイズのコードと、管理画面の設定を揃えておく必要があります。
管理画面のマイページ、設定の『投稿とコメント』で設定した記事数と同じ数字にすることをお忘れなく。
あと、私のテンプレートの場合だけかもしれませんが、同じ日に複数の投稿があると、多少読み込みに不具合を生じる場合があるようです。
私の場合は、同じ日に複数投稿する場合がないので特に対策など施していませんが、そのあたりの修正についてはこちらのサイトで詳しく説明がされているようです（英語）。
たまに同じ日に複数投稿する程度で、かつ、日付にこだわらない場合は、マイブログの投稿画面で、スケジュールをクリック、日付と時刻を設定を選んで、記事の日付をずらすのも解決策（その場凌ぎっぽいですけど （汗 ）のひとつです。
HTMLをさわるとなると構えてしまいそうですが、ページナビを追加する場合は、だいたいパターンがあるので、これを覚えておけば大丈夫。
]]></b:skin>
の手前にスタイルシートのコードをコピー。
</body>
の直前にもう一方のコードをコピーで完了。
ガジェットに追加するものや、直接HTMLに書き込むものなど。
どれも実装は、とても簡単です。
まずは、スクロールバーがついたページナビ、とてもクールです。
デモはこちら。
1ページに表示したい記事数はここの数字を変えます。
var postperpage=7;
この他Abu Farhanでは、いくつかページナビが紹介されています。
※こちらで紹介されているページナビを導入すると、ちいさくAbu Farhanへのlinkが表示されます
かわいい感じのページナビ。
1ページに表示したい記事数は、ここの数字を変えます。
var postperpage=4;
2012.12 このナビは現在うまくうごかなくなっているかも（汗
Bloggerでひとつの記事が長くなる場合に便利ですね。
私も、いつか使用してみたいと思います。
いちおう便利そうなので、少しだけ。
解説ページにいくと、いくつかコードが書かれているのですが、最初に書かれているこのコードを記事投稿画面の一番下に記入します。
あとのコードはそのまま解説通り、記事投稿画面（ブログの記事を書いている画面『HTMLモード』で！）に書き込んでいけば大丈夫です。
idで指定された要素は、1ページ中1度しか使用できないお約束なので（たしか・・・そんなかんじですよね・・・）、複数のページにこれがあると（ラベルページやメインページなど）、上手く動いてくれません。
記事の中の1ページ目で<!--more-->を使って、隠すことで回避（※これでテストしてみたのですが、大丈夫そうでしたー）
2012.12 現在動かなくなってしまったので別のコードに差し替えています
ガジェットから『HTML/Java Script』を選んでそのまま追加、そのガジェットを記事の下に配置すればOKです。
1ページに表示する記事数の変更はこちらの数字を
var postperpage=4;
こちらでは、もうひとつコードが紹介されています。
こちらのコードは、私のブログでは使えませんでした。
でも、WordPressから移ってくる前に、どうしても気になっていたのがページナビ。
海外のサイトを探すと、この他にも参考になりそうなページがたくさんあります。
カスタマイズは、だいたい一定のパターンがあるので、英語を全て理解できなくても、なんとかなってしまうと思います。
HTMLを編集するときは、必ず復元できるように、テンプレートのダウンロードをしてからに。
自分の覚え書きにカスタマイズについてまとめてみましたが、なにか参考にしていただける部分がありましたら嬉しいです。
わからないことだらけなので、自己責任でお願いしますね！
こうしたらいいよー！とか、ここ違うよー！っていうことがありましたら、やんわりご指摘いただけると助かります。
過去に、いろいろカスタマイズを教えていただいたり試したことを思い出して、いぢいぢしていたのですが、公開までテストを繰り返していました。
私が、どうしてもつけたかったのがページナビ。
これ、ないととっても不便なんですよねー
以前は、日本語でしっかり解説されたBlogが存在していたのですが、現在は閉鎖されてしまい、あの素敵なカスタマイズのコードは遠いお山へー
テスト中、いろいろと海外サイトで調べて、ページナビを実装してみました。
あなたのBlogを読みやすく、クールに演出してくれるページナビまとめ。
ブロガーでは珍しい、長い記事自体をページナビで分割するカスタマイズなども紹介してみます。
なぜ？ページナビ
Bloggerのページナビは、記事下に、ホーム、前の記事、新しい記事の３つが表示されます。ネットショップなどを見ていても感じるのですが、こういったナビしかないと、ざーっと5ページ、6ページ見ていくと、気になったものが何ページ目にあったかわからなくなってしまいます。
10ページ全部見終わった後、5ペ−ジ目に戻りたくっても、またひとつずつ、前の記事のLinkをクリックして移動していかなければいけませんー
あーめんどくさっ！！
って、なってしまうのは、私だけでしょうか？？？
なので、自分のBlogには、ページナビがつけられるBlogサービスを！そんな風に思っていたわけす。
でも、私は、コードをがりがりかけるわけでもありませんし、HTMLとCSSという言葉を知っているぐらいのレベルです。
不明な点ばかりですが、実装できてしまったので紹介してみます。
Attention！ 共通
まず最初に、Bloggerでページナビを表示できるのは、メインページ、ラベルページです。アーカイブページには表示できません。
私のBlogを、年月で見たい人はまずいないと思うので、もともとアーカイブページは表示していません。
どうしてもページナビが表示されない場合があったりしますので、まずは、ご使用のテンプレートをチェック。
マイブログから、テンプレートへ移動。
HTMLの編集をクリックして、HTMLを開いて、デフォルトのページングのスタイルをチェックしてみて下さい。
こうなっていると表示されません。海外で配布されているテンプレートによくあるようです。
#blog-pager {
text-align: center;
}
こうなっていたら
clear:both;
を追加。
#blog-pager {
clear:both;
text-align: center;
}
これで、保存。
 |
| カスタマイズする前に必ずDLを 復元もここから実行します |
どのカスタマイズを行う時も、必ず、マイブログからテンプレートへ移動、バックアップ／復元をクリックして、使用中のテンプレートをダウンロードしてバックアップしておきましょう！！
ご使用のテンプレートでは、実装できないコードもあるので、いくつか試してみることも忘れずに。
ラベルページにページナビ
ラベルページにもページナビを表示する場合は。テンプレート、HTMLの編集をクリック、ウィジェットのテンプレートを展開をチェックして下の文字列を検索。
 |
| ここをチェックして完全に開きます |
'data:label.url'
見つけたら、こんな感じに書き換えます。
'data:label.url + "?&max-results=表示したい記事数"'
これでも、ラベルページのページングの表示が上手くいかない場合は、テンプレートでウィジェットの展開をチェックして『max-results=』を検索。
max-results=の後の数字が、自分で設定した数字と同じかをチェック。
違っていたら、設定とこの数字をあわせて下さい。
マイブログからの設定（必須）
設定から、その他のサイトフィードの設定を『完全』に。
１ページ中に表示したい数字は、カスタマイズのコードと、管理画面の設定を揃えておく必要があります。
管理画面のマイページ、設定の『投稿とコメント』で設定した記事数と同じ数字にすることをお忘れなく。
 |
| Blogger 管理画面 |
あと、私のテンプレートの場合だけかもしれませんが、同じ日に複数の投稿があると、多少読み込みに不具合を生じる場合があるようです。
私の場合は、同じ日に複数投稿する場合がないので特に対策など施していませんが、そのあたりの修正についてはこちらのサイトで詳しく説明がされているようです（英語）。
たまに同じ日に複数投稿する程度で、かつ、日付にこだわらない場合は、マイブログの投稿画面で、スケジュールをクリック、日付と時刻を設定を選んで、記事の日付をずらすのも解決策（その場凌ぎっぽいですけど （汗 ）のひとつです。
HTMLを直接編集する場合
HTMLをさわるとなると構えてしまいそうですが、ページナビを追加する場合は、だいたいパターンがあるので、これを覚えておけば大丈夫。
]]></b:skin>
の手前にスタイルシートのコードをコピー。
</body>
の直前にもう一方のコードをコピーで完了。
ページナビいろいろ その１
海外のサイトで紹介されているページナビを。ガジェットに追加するものや、直接HTMLに書き込むものなど。
どれも実装は、とても簡単です。
まずは、スクロールバーがついたページナビ、とてもクールです。
デモはこちら。
1ページに表示したい記事数はここの数字を変えます。
var postperpage=7;
この他Abu Farhanでは、いくつかページナビが紹介されています。
※こちらで紹介されているページナビを導入すると、ちいさくAbu Farhanへのlinkが表示されます
ページナビいろいろ その２
かわいい感じのページナビ。
1ページに表示したい記事数は、ここの数字を変えます。
var postperpage=4;
長い記事は、ページの中でページナビ！！
こちらでは、さらに、記事の中でページナビを可能にした方法を紹介しています。
2012.12 このナビは現在うまくうごかなくなっているかも（汗
Bloggerでひとつの記事が長くなる場合に便利ですね。
私も、いつか使用してみたいと思います。
いちおう便利そうなので、少しだけ。
解説ページにいくと、いくつかコードが書かれているのですが、最初に書かれているこのコードを記事投稿画面の一番下に記入します。
<script src="http://stylifyyourblog1.googlecode.com/svn/trunk/pageinpost.js" ></script> <script type="text/javascript"> activatables('page', ['page-1', 'page-2','page-3' ]); </script>
あとのコードはそのまま解説通り、記事投稿画面（ブログの記事を書いている画面『HTMLモード』で！）に書き込んでいけば大丈夫です。
<div class="content11" id="page-1">
ここに記事の１ページ目に表示したい内容を書き込む。
</div>
ちょっとだけ注意
長い記事を書く時に、ひとつの記事を複数に分割してくれるこのコードはとても便利だと思うのですが、記事内のページナビは『id』で指定されています。idで指定された要素は、1ページ中1度しか使用できないお約束なので（たしか・・・そんなかんじですよね・・・）、複数のページにこれがあると（ラベルページやメインページなど）、上手く動いてくれません。
記事の中の1ページ目で<!--more-->を使って、隠すことで回避（※これでテストしてみたのですが、大丈夫そうでしたー）
ページナビいろいろ その３
私が、現在使用中のコードはこちら。2012.12 現在動かなくなってしまったので別のコードに差し替えています
ガジェットから『HTML/Java Script』を選んでそのまま追加、そのガジェットを記事の下に配置すればOKです。
1ページに表示する記事数の変更はこちらの数字を
var postperpage=4;
こちらでは、もうひとつコードが紹介されています。
こちらのコードは、私のブログでは使えませんでした。
ブロガー用ページナビまとめ
ここ数年でかなり便利になったと感じるBlogger。でも、WordPressから移ってくる前に、どうしても気になっていたのがページナビ。
海外のサイトを探すと、この他にも参考になりそうなページがたくさんあります。
カスタマイズは、だいたい一定のパターンがあるので、英語を全て理解できなくても、なんとかなってしまうと思います。
HTMLを編集するときは、必ず復元できるように、テンプレートのダウンロードをしてからに。
自分の覚え書きにカスタマイズについてまとめてみましたが、なにか参考にしていただける部分がありましたら嬉しいです。
わからないことだらけなので、自己責任でお願いしますね！
こうしたらいいよー！とか、ここ違うよー！っていうことがありましたら、やんわりご指摘いただけると助かります。
このコメントはブログの管理者によって削除されました。
返信削除匿名さま
削除初めまして。
コメントの修正などをしていて、間違えて匿名さまからいただいたコメントを削除してしまいました＾＾；
大変申し訳ありません・・・
ページナビ、こちらの記事は古くなっているので、レスポンシブ化した時に、新たにコードを差し替えました。
Blogger Page Navigation や blogspot Page Navigation wp styleなどと検索すると、いろいろなバリエーションのコードがヒットするはずです。
現在ご使用中のテンプレにあうものとあわないものがあると思いますので、気になったものをいくつか試してください。
準備や基本的な実装方法は、この記事をチェックして下さい。
導入前の注意点として。
このBlogでは、一日に複数の記事を投稿する事はないので大丈夫ですが、基本的にBlogger用のページナビは一日に複数投稿すると動作がおかしくなるかと思います。
あと・・・500記事を超えた時に、動作がおかしくなる可能性があります。。
いちおう、どのコードもその問題に対応しているかと思いますが、一説によると不十分という記述もありますので、こればかりは500記事超えてみないとわかりません・・・
見た限りでは500記事超えても動いているBlogさんもあるので大丈夫かと思いますが。
ラベルページでは動作しますが、このBlogでは、月別一覧ページでは動作しないかもしれません。
現在使用中のコードはこちら記事にアップしています。
http://styleblog.soyokazezakka.com/2014/01/blogger.html
モバイル用に条件分岐させていましたが、現在は使用していません。
モバイルページでもページナビを動かすなら、jsファイルを一行書き換えで対応と書かれているこちらの記事が参考になるかと思います。
http://p--q.blogspot.jp/2013/08/blogger3.html
ipodの件、ありがとうございます＾＾；
盲点でした・・・
参考にしていただける部分があれば嬉しいです。