忍者ブログのデザインテンプレートでページ送り（ページャー）を挿入する場合のちょっとしたコツをお教えしちゃいます。

変更内容

まずはページ送りの使用について

忍者ブログでページ送りを実装する場合には、このような独自タグを利用します。 pagelink_10でページ数分ループして、$pagelink_10_linkでリンクを表示する（現ページの場合はリンク無し）といった仕様です。簡単ですね。

<ul>
  <!--pagelink_10-->
  <li><!--$pagelink_10_link--></li>
  <!--/pagelink_10-->
</ul>

課題と変更した後のイメージ

この独自タグを利用する場合に、今となってはチョットだけ使いにくい点があります。 それは、ページ送りの現ページを示す部分が、AタグやSPANタグなど何らかのHTMLに囲まれていれば良いのですが、数字をまっさらに表示する仕様になっています。そのため、リンクが存在する場合とmarginやサイズがそろわず、ちょっとレイアウトが使いにくい状態になっています。なので、現ページの部分にAタグをjavascriptで挿入して良い感じになる様に調整をします。

変更方法

変更方法は簡単。わずか３ステップです。

（HTML）ページ送りを入れたい個所に独自タグを入れる

<div id="PageLinkBlock">
    <ul id="PageLink10">
    <!--pagelink_10--><li><!--$pagelink_10_link--></li><!--/pagelink_10-->
    </ul>
</div>

（HTML）BODYの閉じタグの直前に下記のスクリプトをいれる

<!--ページリンク調整-->
<script>
   var pagerEmts=document.getElementById("PageLink10");
   var contents = "";
   for(var i in pagerEmts.childNodes){
     var emt=pagerEmts.childNodes.item(i).innerHTML;
     if(emt !== undefined){
       if(!emt.match(/<("[^"]*"|'[^']*'|[^'">])*>/))
       {
       contents = contents + "<li class=\"active\"><a href=\"#\">"+emt+"</a></li>";
       } else {
       contents = contents + "<li class=\"noactive\">"+emt+"</li>";
       }
     }
   }
   pagerEmts.innerHTML= contents;
</script>

（CSS）CSSに下記を追加する

#PageLinkBlock {
    margin:60px;
    text-align:center;
}

#PageLinkBlock ul {
    text-align:center;
}

#PageLink10 {
    text-indent:center;
    font-family:Tahoma,Arial,Helvetica,sans-serif;
    font-size:120%;
}

#PageLink10 li {
    margin:0.4em;
    font-weight:bold;
    display:inline;
}

#PageLink10 li a{
    background-color: #373C38;
    padding:0.7em 1.0em;
    font-weight:normal;
    text-decoration:none;
    color: #FCFCFC;
    
    /* 角丸 */
    border-radius: 3px;        
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;  

    /* 影 */
    -moz-box-shadow: 2px 2px 2px #B9B8B5; 
    -webkit-box-shadow: 2px 2px 2px #B9B8B5;
    box-shadow: 3px 3px 3px #B9B8B5;
}

#PageLink10 li.active a{
    background-color: #FFDB4F;
    color: #333333;
}

#PageLink10 li a:focus,
#PageLink10 li a:hover,
#PageLink10 li a:active {
    background: #FFDB4F !important;
    color: #333333;
}

あとがき