Vaster2カスタマイズ!番号付きページナビを設置する方法

カスタマイズ
スポンサーリンク

どうも、kazuです。
あなたのブログに「番号付きのページナビゲーション」はついていますか?
トップページの下についているコレのこと。

Bloggerのテンプレート「Vaster2」を使っていますが、「Next>(前の投稿)」か「<Previous(新しい投稿)」しか表示されないんですよね。
(前の「Vaster」ではあったらしいのですが。)

そこで、今回はVaster2に番号付きのページナビゲーションを設置する方法をご紹介します。

※ご注意
この記事でご紹介している「Helplogger」のページナビスクリプトですが、ちょっとしたバグがあります。
修正版として、別のスクリプトを使用した記事をアップしましたので、こちらをご参照下さい。


【修正版】Vaster2カスタマイズ!番号付きページナビを設置する方法

スポンサーリンク

ページナビゲーションの設定方法

「Helplogger」にアクセス ※英語表記です。
https://helplogger.blogspot.jp/2014/04/how-to-add-numbered-page-navigation-widget-for-blogger.html

 

CSSコードの追加

1. 下にスクロールして、好みのページナビゲーションのコードをコピー

2. Blogger管理画面「テーマ」 → 「HTMLの編集」を選択

3.「]]></b:skin>」で検索 → すぐ上に「2.」でコピーしたコードを貼り付け
※好みの色に変更してもOK。ちなみに私は黄色の部分を変更しました。

4. 最初からあるページナビゲーションのコードを「/*」と「*/」で囲む(コメント化する)
※元々表示されていた「Next>」か「<Previous」については、四角で囲まれた状態では表示されなくなりますのでご注意を!

ちなみにコメント化しないと、こんなアンバランスな状態になります。

 

スクリプトコードの追加

1.「Helplogger」内のスクリプトコードをコピー
※縦のスクロールバーを見ると分かる通り、かなり長いコードです。

2.「HTMLの編集」画面に戻り、「</body>」で検索 → すぐ上に貼り付け
※黄色の部分はデフォルトで「3」になっていますが、トップページに表示される記事数によって数値を変更します。(私の場合は、10記事表示されるので数値を「10」にしています。)

3. 「テーマを保存」をクリック

「First」と「Last」のボタンを非表示にする方法

1. 次のコードをコピー

2.「]]></b:skin>」の上に次のコードを貼り付け

私自身、当初は「First」と「Last」のボタンを表示していました。が、パソコンではバッチリ表示できたもののiPhoneで見るとなぜか2段に。

恐らく横幅や文字サイズを調整すれば、きちんと表示されるのでしょうが、思い切って非表示にしました。

スポンサーリンク

さいごに

いかがでしたでしょうか?
まだ、記事数が少ないときにはあまり必要ないかも知れません。しかし、記事数が多くなればなるほど、読者の方が迷子になる可能性大です。

番号付きのページナビゲーションを設置することにより、読者にとって次のようなメリットがあります。

  • 自分が見ているページがどの辺りか分かる
  • 全体でどのくらいのボリュームなのか分かる

あなたも自分のブログに「番号付きのページナビゲーション」を設置してみませんか?

最後まで読んでいただき、ありがとうございましたm(_ _)m
それではまた~!

コメント

  1. はじめまして。
    当方のブログでもこちらで紹介されているHelploggerのページナビスクリプトを導入していたのですが、どうやらこちらのスクリプトにはバグがあるようです。
    3ページ目を開いてる時に «Previous をクリックすると本来なら前のページ(=2ページ目)に移るはずが、何故かリンク先が1ページ目(=ホーム)になっていてホームに戻ってしまいます。
    3ページ目だけで発生する現象で他のページでは問題ないようです。
    3→2に移動する時だけは «Previous は使わず直接2をクリックするしかないようです。
    そこで他サイトにあった別のスクリプトと入れ替えてみたところ、この不具合は解消されました。
    http://mrbloggertricks.blogspot.jp/2015/09/how-to-add-next-previous-numbered.html
    以上、一応ご参考まで。

    • kazu より:

      ふじやん様

      はじめまして。
      スクリプトのバグについて、とても分かりやすいご説明ありがとうございますm(_ _)m
      全く気付いていませんでした・・・まさかこのようなバグがあるとはorz
      教えていただいた対処法を是非、参考にさせていただきます。