Bloggerのページャーをカスタマイズする

iPhoneography: 'Double Rainbow' (diptych)Bloggerの画面下にある【古い投稿】や【新しい投稿】へのリンクをボタンなどで表現する方法を紹介します。また、これらをページャーと呼ぶことがあります。
photo credit: Dirk Dallas


Bloggerのページャーをボタンで表現する

BloggerのPagerをButtonで表現するには、HTMLの編集にて、【新しい投稿】などが表現されている部分をタグで囲ってやるだけです。具体的には、以下のようになります。



  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>

<!--"###新しい投稿###"-->
      <span id='blog-pager-newer-link'>
      <div class='button01'><a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>Next</a></div>
      </span>

<!--"新しい投稿"バックアップ
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
-->

    </b:if>

    <b:if cond='data:olderPageUrl'>

<!--"古い投稿"-->
      <span id='blog-pager-older-link'>
      <div class='button01'><a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Prev</a></div>
      </span>
 
<!--"古い投稿"バックアップ
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
-->

    </b:if>

<!--"ホーム"--> 
<div class='button01'><a class='home-link' expr:href='data:blog.homepageUrl'>HOME</a></div>

<!--"ホーム"バックアップ
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
-->
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>


あとは、 CSSの追加 にて、以下の様なCSSを追加します。

.button01 a {
    background: #EEE;
    padding: 3px 12px;
    border: 2px solid #CCC;
    text-decoration: none;
    color: #000!important;
    border-radius: 3px;
    -webkit-transition: all 0.3s ease;
}
.button01 a:hover {        
    border: 2px solid #06c;
    background: #06c;
    color: #fff!important;
}​



BloggerのページャーにJavaScriptを使用する

簡単に見た目を変更したければ、 JavaScriptを使用します。ただし、私はこのやり方はあまり好きじゃないのですが、簡単に見た目を変更するには、お勧めです。





以下を </body> の上に貼り付けます。なお、`Script`の読み込み箇所は、自身が管理する`Server`に`Upload`し、変更してもいいと思います。また、 postperpagenumshowpage の部分は、環境によって数字を変更しましょう。



そして、 Accents を検索し、当該箇所を以下のようにします。
/* Accents始まり
---------------------------------------------- */
.section-columns td.columns-cell {
  border-$startSide: 1px solid $(body.rule.color);
}

<!--"点線"を削除
.blog-pager {
  background: $(paging.background);
}
-->

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
}

.footer-outer {
  border-top: none;
}

<!--###".footer-outer"のバックアップ
.footer-outer {
  border-top: $(footer.bevel) dashed #bbbbbb;
}
-->

<!--###"ページ"のリストを表示する-->
.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:12px;width:700px;padding:17px;} 
.showpageNum a,.showpage a {background:#069; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;} 
.showpageNum a:hover,.showpage a:hover {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;}
.showpagePoint {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}

/* Accents終わり
---------------------------------------------- */


ページャーの表示には、直接関係のない箇所もありますが、参考のために載せておきました。