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

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

どうも、kazuです。
以前、Vaster2でページナビを設置する方法について記事を書いたのですが、貼り付けた「Helplogger」のページナビスクリプトにバグがありました。

きちんと検証せずに投稿してしまい、すみませんでした。


上の記事にコメント(ご指摘)下さった、ふじやん。様ありがとうございました。

修正に時間がかかってしまいましたが、今回は改めて「【修正版】Vaster2にページナビを設定する方法」について書いていきます。

スポンサーリンク

Helploggerページスクリプトに致命的なバグがありました

スクリプトのバグはふじやん。様の以下コメントの通り。

3ページ目を開いてる時に «Previous をクリックすると本来なら前のページ(=2ページ目)に移るはずが、何故かリンク先が1ページ目(=ホーム)になっていてホームに戻ってしまいます。
3ページ目だけで発生する現象で他のページでは問題ないようです。
3→2に移動する時だけは «Previous は使わず直接2をクリックするしかないようです。

まさかこんなバグがあるとは思ってもみませんでしたorz

スポンサーリンク

Vaster2にページナビゲーションを表示する方法

次のサイトへアクセス ※英語表記です。
http://mrbloggertricks.blogspot.jp/2015/09/how-to-add-next-previous-numbered.html

スクリプトコードの追加

1. スクリプトコードをコピー

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

3.「</body>」で検索 → すぐ上に貼り付け
※「Helplogger」のスクリプトコードを貼り付けている場合、削除もしくは上書きして下さい。

「postperpage」はデフォルトで「5」になっていますが、トップページに表示される記事数によって数値を変更します。(私の場合は、10記事表示されるので数値を「10」にしています。)

また、「numshowpage」についてはデフォルトで「2」になっていますが、そのままだと下の図のようにページ間が「・・・」になったので、「8」に変更しました。
(全記事数が少ないので何とも言えませんが、「3」でも「・・・」が表示され、「4」以降の数値では表示されませんでした。)

数値を「4」以上に変更すると下の図のように前ページが表示される。
記事数が少ない為、しっかり検証できていませんが、恐らく記事数により変動すると思います。

CSSコードの追加

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

2.「HTMLの編集」画面に戻り、「]]></b:skin>」で検索 → すぐ上に貼り付け
※「Helplogger」のCSSコードを貼り付けている場合、削除もしくは上書きして下さい。

数値を変更することにより、ページナビの間隔や色が変えられます。
また、マウスオーバー時に背景色を変更するよう下記のコードを追加しました。
(この辺りはお好みで)
【追加コード】
.showpageNum a:hover,.showpage a:hover, .showpagePoint{background:#f8f899;text-decoration:none;color: #666;}

おしまい!お疲れさまでした。

スポンサーリンク

さいごに

今回、コメントして下さったおかげでスクリプトコードのバグについて知ることができました。情報発信前に検証することが、いかに重要か実感できた次第です。

他の記事でも「これは間違ってるよ!」とか「もっとイイ方法があるよ!」等ありましたら、コメントにて教えていただけると大変嬉しいです。
お時間いただくことがあるかと思いますが、必ず対応します!

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

コメント

  1. こんばんは。
    お役に立てたようで良かったです(^^)

    • kazu より:

      ふじやん。様

      対処法を教えていただいて大変助かりました☆
      また、お気づきの点がありましたら、ご指摘下さい。
      どうぞよろしくお願いしますm(_ _)m