PageButeというMT Pluginを使えば、Movable Typeを簡単にページ分割できる。前回のエントリーでは、設置方法から基礎コーディングを紹介したが、今回はもう少し発展させ、スタイルシートで容易にデザインできるようにコーディングする方法を紹介する。

ナビゲーションにこだわりを

ページ分割した場合にもっともユーザビリティ、デザインで重要なのが各ページ間を移動させるためのナビゲーションの部分にほかならない。前回のエントリーでは、ただ単に<span>〜</span>で囲ったテキストではき出していたが、もう少し一工夫させて、デザインしてみよう。もちろん見かけだけではなく、利用者側の扱いやすいように、ユーザビリティを考えたナビゲーションにするのが望ましい。

前回のエントリーのサンプルコード

<div>	<MTIfPageBefore>		<span><$MTPageBefore delim="前に戻る"$></span>	</MTIfPageBefore>

	<span><$MTPageLists delim=", "$></span>

	<MTIfPageNext>		<span><$MTPageNext delim="次に進む"$></span>	</MTIfPageNext></div>

最適化後のサンプルコード

<ul id="page-list">	<MTIfPageBefore>		<li id="previous-page"><$MTPageBefore delim="前に戻る"$></li>	</MTIfPageBefore>

	<li><span><$MTPageLists delim='</span></li><li><span>'$></span></li>

	<MTIfPageNext>		<li id="next-page"><$MTPageNext delim="次に進む"$></li>	</MTIfPageNext></ul>

前回は<div>〜</div>の間にナビゲーションを表示させていたが、<ul>〜</ul>で囲うように変更し、<li>〜</li>で前後ページへのリンクや、各ページリンクを表示するようにする。コーディングの理念からも、この処置は適切なはずだ。

前後ページへのリンク箇所は特に変更はないが、是非とも<li>タグにid付けしてもらいたい。これは各ページリンクとのデザインの差別化を図るためにも必須な事。その他、id付けではなく、classで差別化を図っても良しだ。

アトリビュートに工夫を

今日のエントリーで一番重要なところが、各ページリンクを表示させる<$MTPageLists$>タグのアトリビュートだ。下記は前述のコードの一部。

<li><span><$MTPageLists delim='</span></li><li><span>'$></span></li>

注目すべき点は、アトリビュートに</span></li><li><span class="page-list-item">と記述し、<li><span>〜</span></li>を繰り返し表示するようにしてあること。このアトリビュートは、ページリストリンクが複数ある場合に限り表示される仕組みなので、<$MTPageLists$>直前の<li><span>でリストタグ+スパンが開始され、アトリビュートの</span></li>で一度閉じ、次に続く<li><span>でリストタグ+スパンが再度開始、最後に<$MTPageLists$>直後の</li>で閉じる。もしもエントリーが少なく、1ページのみの表示となった場合は、アトリビュートは無視されるので普通に<li><span>〜</span></li>で囲まれるだけで問題はない。

ちなみに、<span>を入れ子にする必要は特にないが、後々のスタイルシートでデザインする事を踏まえて今回は入れ子にしてある。なくてもあっても変わらないが、あってもコードが少し複雑になるだけで、特に困ることはない。後々のために、是非とも入れておこう。

次はいよいよ

前回のエントリーと比較して、今回最適化を行ったコードは、スタイルシートでスタイルを適応しやすい事だけに集中した。次回はいよいよスタイルシートの記述に突入する。コーディングとデザインを考えながらコーディングしていく楽しさを味わうことができるのは、WEBデザイナーのみに許された特権だ。是非とも楽しんでもらいたい。