ページナビ

通常、メイン部の一番上と一番下に表示される、ページ送りなどの部分です。

HTML構造

<nav class="page-nav art-nav" data-module-name="dem_page-nav,1">
	<a href="" class="prev-page" rel="prev">前のページ</a>
	<a href="" class="next-page" rel="next">次のページ</a>
</nav>
  • 前ページや次ページがないときは、該当部分は出力されません。
  • どちらもないときは、<nav>だけ出力されます。

コンテンツページの場合は次のようになります。

<nav class="page-nav art-nav" data-module-name="dem_page-nav,1">
	<a href="#" class="prev-page" rel="prev">adiaryについて</a>
	<a href="#" class="upnode-page">トップページ</a>
	<a href="#" class="next-page" rel="next">関連ツール</a>
</nav>

これも、それぞれ出力されない時がありますし、全く出力されないこともあります。（navの中身が空）

注意事項

  • 右揃え、左揃えはデザイン編集からユーザーが指定できますので、特に指定しなくても良いかと思います。
    • 指定するとしても .page-nav に対して指定してください。ユーザー指定にCSS優先度で勝ってしまいます。
  • nav.page-nav は記事一覧画面、コメント一覧画面でも使われています。
    • 記事のページ送りにだけ指定したい場合は art-nav に対して指定してください。

標準のCSS

satsuki2.css では、ui-iconを使って矢印を出力しています。アイコンを使用するかどうかはテーマの好みです。どう表示しても構わないでしょう。

nav.page-nav に対する指定は、記事一覧、コメント一覧でも有効になり、かつどちらでも良い具合に働きます。

nav.page-nav {
	font-size:	10pt;
	line-height:	100%;
	margin:		1em 0;
}
nav.page-nav a {
	display:	inline-block;
}
nav.page-nav a:first-child {
	margin-right:	1em;
}
nav.page-nav a:last-child {
	margin-left:	1em;
}

a.prev-page:before,
a.upnode-page:before,
a.next-page:after {
	display:		inline-block;
	width:			16px;
	height:			16px;
/*	background-image:	url(ui-icons.png);	*/
	content:		' ';
	vertical-align:		bottom;
}
a.prev-page:before {
	background-position: -208px -16px;
}
a.upnode-page:before {
	background-position: -224px -16px;
}
a.next-page:after {
	background-position: -240px -16px;
}