当ブログではページ番号・記事番号でジャンプできるようになっている。
（ページの上部と下部にオレンジ色で囲って表示している部分。）
これは忍者ブログの独自タグ”pagelink_10“を使っている。
この独自タグは、実際に表示する際には以下のようなタグに展開される。
<li>1</li> <li><a href="/Page/2/">2</a></li> <li><a href="/Page/3/">3</a></li> <li><a href="/Page/4/">4</a></li> <li><a href="/Page/5/">5</a></li> <li><a href="/Page/6/">6</a></li>
一方、bootstrapにはこのような用途のために作られた「pagination」クラスがある。
これは、以下のようにulとliのタグだけで、ページにジャンプするためのボタンを並べてくれるというものだ。
<div class="pagination"> <ul> <li><a href="#">Prev</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">Next</a></li> </ul> </div>
この二つを組み合わせて使えると良いのだが、残念ながら組み合わせるとデザインが崩れてしまう。
原因は、bootstrapのpaginationクラスはaタグのプロパティを設定することでpaginationのデザインを実現しているのだが、一方忍者ブログのpagelink_10では、現在表示中のページについてはaタグのリンクを付けてくれない点にある。
現在のページのところだけ、paginationクラスのデザインが適用されないので、デザインが崩れてしまうのである。
対策としては、現在のページのところにもaタグを追加すればよい。
また、aタグの無い項目＝現在のページなのだが、bootstrapでは該当する箇所のliタグのクラスにactiveを追加する必要がある。
これらは、JavaScriptで記述すれば実現可能だ。
当ブログのテンプレートファイルの該当部分はこうなっている。
<ul class="page-nav-list">
<!--if_prev_page-->
<li class="prev">
<a href="<!--$pagelink_prev_link-->">←</a>
</li>
<!--/if_prev_page-->
<!--pagelink_10-->
<li><!--$pagelink_10_link--></li>
<!--/pagelink_10-->
<!--if_next_page-->
<li class="next">
<a href="<!--$pagelink_next_link-->">→</a>
</li>
<!--/if_next_page-->
</ul>
<script>$("ul.page-nav-list li:not(:has(a))").addClass("active").wrapInner('<a href="#"></a>');</script>
ulにクラスを与えて、スクリプトが処理する対象を特定している。
スクリプトは、ulの内側のliタグ全てについて、
「もしliタグの内側にaタグがなかったら、liタグにはactiveクラスを追加し、さらにliタグの内側全体をaタグで囲む」
という処理を行っている。
また、このスクリプトはリストの直後に置いているが、こうしないと、デザインが崩れた状態が一度表示されてから修正される様子が目に見えてしまう。
スクリプトをこの位置で実行するため、jqueryのライブラリはこれより前でロードさせている。
コメント