Blogger Tips:ページナビゲーションのカスタマイズ | neputa notes

日常のログをつらつらと

Blogger Tips:ページナビゲーションのカスタマイズ

13 件のコメント
スポンサーリンク
Bloggerのテンプレート「Vaster」を色々カスタマイズした一連の4つ目(参照:Blogger 色々カスタマイズ)として、ページナビゲーションをカスタマイズした作業についてまとめる。

作業対象のブログはこちら → 読書感想BLOG



ページナビゲーションのCSSを追加する

Vaster には、TOPページや、ラベルアーカイブページで記事一覧を表示した際に表示される、ページナビゲーションがデフォルトである。

これをcssで見た目を変える。
テンプレート>HTMLの編集で、ページナビゲーションで検索すると以下のCSSソースがあるので、ここを書き換える。

修正前
/*    ページナビゲーション
------------------------------------------------ */
.pagenavi{
   clear:both;
   margin:10px auto;
   text-align:center
}
.pagenavi span,.pagenavi a{
   color:#000;
   padding:3px;
   margin-right:5px;
   border:1px solid #333
}
.pagenavi a:hover{
   background:#000000;
   color:#fff;
   text-decoration:none
}
.pagenavi .pages,.pagenavi .current{
   font-weight:bold
}
.pagenavi .pages{
   border:none
}
修正後
/*    ページナビゲーション
------------------------------------------------ */
.pagenavi {
  background:#f1f1f1;
  clear:both;
  margin:15px auto;
  text-align:center;
  border:1px solid #bfbfbf;
  padding:3px 0
}
.pagenavi span,.pagenavi a {
  border:1px solid #f1f1f1;
  padding:1px 4px;
  color:#000;
  margin:2px;
  font-size:12px
}
.pagenavi span {
  color:#3a3a3a
}
.pagenavi a:hover,.pagenavi .current {
  border:1px solid #bfbfbf;
  background:#fffdf0;
  color:#000;
  text-decoration:none
}
.pagenavi .pages {
  color:#666
}

これで以下のような外観になる。

「pages 1 of ~」の部分は、リンクしているscriptファイル側で制御されているため変えることはできない。もし変えたければ別のプラグインを探すか、自分で用意する必要がある。

今回の作業では以下の記事を参考にさせていただきました。
Add Page Number Navigation For Blogspot (8 News Stylish) ー toturials blog

次回は「ラベル・クラウドを設置」。
スポンサーリンク
スポンサーリンク

13 件のコメント :

  1. コメント失礼いたします!
    Vaster使ってるんですけど、
    トップページの記事一覧の下のページナビゲーションが、ラベルページの記事一覧の下には表示されず、ラベルページで2ページ目以降に移動出来ない状況で、苦戦しております。。
    もしよろしければ、何か策をご教授いただけられないでしょうか(;_;)

    返信削除
  2. コメントありがとうございます。
    返事が大変遅くなり申し訳ありません。

    vasterのラベルによる記事一覧ページはURLパラメータを付けてあげないとページャーが表示されないようですね。

    以下のURLは最新のvasterテンプレートをダウンロードし、'data:label.url' の箇所を全て 'data:label.url + "?&max-results=5"' に修正したものです。それ以外は手を入れていません。ラベルによる記事一覧を表示させて頂ければページャーが表示されているのを確認いただけると思います。

    http://neputa-test.blogspot.jp/

    ちなみに、URLパラメータのresultsのカウントを変えれば一覧表示させる記事の数をコントロールできます。

    またグーグルドライブに今回使用したテンプレートを公開で置いておきましたので良かったらご参照ください。
    わからない点などありましたらまたご質問ください。

    https://drive.google.com/file/d/0B-R4v6LbKKj8SDF6YmYxeFhRTlU/view?usp=sharing

    返信削除
  3. ドライブからダウンロードさせていただきました!
    そしてラベルページにナビゲーションが出現しました!!
    本当にありがとうござました(๑•̀ㅂ•́)و✧

    返信削除
    返信
    1. お~、うまくいって良かったです!
      こちらこそ参考にしていただいてありがとうございました。

      削除
  4. すいません。
    コメント欄で書かれている事を半日かけて全部試してみたんですが、ページナビがラベル欄に表示されません。

    ●URLパラメーターを弄っても無反応
    ●グーグルドライブのhttps://drive.google.com/file/d/0B-R4v6LbKKj8SDF6YmYxeFhRTlU/view?usp=sharingこれをコピーしてもエラーが出る
    http://osorawotonderu.blogspot.jp/search/label/%E5%8C%97%E3%81%A0%E3%81%9C?max-results=20

    返信削除
    返信
    1. (´・ω・`)自己解決しました。すいません

      削除
  5. はじめまして。Tomonari O.と申します。
    こちらのサイトも参考にして「Vaster」を利用してのですが、
    最近、ページナビゲーションが表示されなくなりました。
    テンプレート自体はいじっていないのです。

    サイトは下記です。
    http://neverenough777.blogspot.jp/

    neputaさんの読書感想Blogはちゃんと表示されているのですが、
    何か原因はあるのでしょうか。
    突然の不具合なので悪戦苦闘しております。
    何かヒントでもあればと思うのですが、
    よろしくお願いします。

    返信削除
    返信
    1. コメントありがとうございます。

      vasterに組み込まれているpage-navigationのjsファイルがリンク切れしているのが原因です。
      https://gyazo.com/708a32f8e94e86d0188736b2c8dfb7b0

      ファイルを追跡できなかったので結局別のものに差し替えました。
      ちなみに読書感想BLOGで使用したのは以下の記事のものとなります。
      http://bloggercustoman.blogspot.com/2015/08/blogger_4.html

      時折こういうことがあるので任意で公開されているソースへのリンクは悩ましいですね。
      自分で必要なものはホストするべきなのかなと思いつつ、ついついサボってしまっております...。

      近日こちらの記事も更新しておきます。

      削除
  6. neputaさま

    Tomonari O.です。大変助かりました。
    新規にブログを作って「Vaster」を導入してならなかったので、
    もしやリンク切れかと疑っていたところです。
    そして、neputaからの返信。
    リンク切れどころか、解決策まで。。。。
    今変更して無事に動作しました。
    カスタマイズは酒でも飲んで明日取り掛かります。
    取り急ぎ、お礼まで。
    本当にありがとうございました!

    返信削除
  7. すいません、興奮しすぎて、
    呼び捨てになってしまいました。
    申し訳ございません。

    返信削除
    返信
    1. いえいえ!お気になさらずに。
      まずは解決できて何よりです。
      カスタマイズがんばってください。

      削除
  8. 以前ページナビで助けていただいた者です!以前はありがとうございました♪

    今回のページナビで、やり方が解らず、迷走しております(><)
    お暇な時にでもやり方ご教授願います(><)
    宜しくお願い致します。。。

    返信削除
    返信
    1. なかなかブログに手を付けられず、ずいぶんと時間が経ってしまいましたが解決はできましたでしょうか。
      もしお力になれることがあればまたコメントをお願いします。

      削除