CSS

ページネーションの設計

HTML


<nav class="nav-pager">
<div class="nav-pager-contents">
<ul>
<li class="prev"><a href="/sp/search/area/34207/?page=3" rel="prev">前へ</a></li>
<li class="next"><a href="/sp/search/area/34207/?page=5" rel="next">次へ</a></li>
</ul>
<ol>
<li><a href="/sp/search/area/34207/?page=1">1</a></li>
<li><a href="/sp/search/area/34207/?page=2">2</a></li>
<li><a href="/sp/search/area/34207/?page=3">3</a></li>
<li><em>4</em></li>
<li><a href="/sp/search/area/34207/?page=5">5</a></li>
<li><a href="/sp/search/area/34207/?page=6">6</a></li>
<li><a href="/sp/search/area/34207/?page=7">7</a></li>
</ol>
</div>
</nav>

CSS


.nav-pager{
	text-align: center;
	.nav-pager-contents,
	ul,
	ol,
	ol li{
		display: inline-block;
	}
	ul,
	ol{
		margin-bottom: 0;
		a,
		em{
			padding: 7px;
			line-height: 1;
		}
	}
	.nav-pager-contents{
		position: relative;
		padding: 0 3.5em;
	}
	ul{
		li{
			position: absolute;
			top: 0;
		}
		.prev{
			left: 0;
		}
		.next{
			right: 0;
			text-align: right;
		}
	}
	ol{
		li:last-child{
			margin-right: 5px;
		}
	}
}

MTML


<mt:SetVarBlock name="count"><$mt:EntriesOnIndex$></mt:SetVarBlock>

<nav class="nav-pager">
<div class="nav-pager-contents">
<mt:Pagination>
<mt:PaginationHeader>
<ul>
<mt:IfPageBefore><li class="prev"><$mt:PageBefore abs2rel="1" delim="前へ"$></li></mt:IfPageBefore>
<mt:IfPageAfter><li class="next"><$mt:PageAfter abs2rel="1" delim="次へ"$></li></mt:IfPageAfter>
</ul>
<ol>
</mt:PaginationHeader>
<mt:IfPaginationCurrent>
<li><em><$mt:PaginationLink element="number"$></em></li>
<mt:Else>
<li><a href="<$mt:PaginationLink abs2rel="1"$>"><$mt:PaginationLink element="number"$></a></li>
</mt:IfPaginationCurrent>
<mt:PaginationFooter>
</ol>
</mt:PaginationFooter>
</mt:Pagination>
</div>
</nav>