完全保存版！CSSでページ送りを簡単ブラッシュアップ

クリック率が高い割に、意外と見過ごされがちなページャー機能。
今回はCSSのみの、基本的なカスタマイズ方法をご紹介します。
ベースとなるアメブロのHTMLは以下の通りです。

<div class="page topPaging">
<span class="now">1</span>
|
<a href="#" title="page 2">2</a>
|
<a title="page 3" href="#">3</a>
|
<a title="page 4" href="#">4</a>
|
<a title="page 5" href="#">5</a>
|
<a class="lastPage" title="最初から" href="#">最初</a>
<a href="#" class="nextPage" title="次のページへ">次ページ&nbsp;&gt;&gt;</a>
</div>

まずはカスタマイズ前の、デフォルトのページャーをご覧ください。
文字サイズも小さく、余白も少ないので、非常にクリックしづらいです。

1|2|3|4|5|最初次ページ >>

サンプル１：シンプルなページャー

文字サイズを大きく、余白を十分取ることで、だいぶ見やすくなりました。

1|2|3|4|5|最初次ページ >>

CSSはこちら※ピンク部分が変更箇所です

.page {
margin:0 auto 14px auto;
padding:0;
font-size:1.0em; /*フォントサイズ*/
text-align:center;
}
.page .now {
font-weight: bold;
padding: 5px;　/*余白サイズ*/
}
.page a {
line-height: 1.5;
padding: 7px;　/*余白サイズ*/
text-align: center;
}

区切り線の色が少し目立ちますか…ちょっと薄くしてみましょう。
今いるページを示す「１」というフォントの色も薄くします。

1|2|3|4|5|最初次ページ >>

CSSはこちら※ピンク部分が追加箇所です

.page {
margin:0 auto 14px auto;
padding:0;
font-size:1.0em;
text-align:center;
color: #CCCCCC;　/*区切り線の色*/
}
.page .now {
font-weight: bold;
padding: 5px;
color: #757575;　/*「１」の色*/
}
.page a {
line-height: 1.5;
padding: 7px;
text-align: center;
}

今いるページの「１」をもう少し別の方で、目立たせたいですね。
下線を引いてみましょう。で、マウスオーバー時には消える形に。

1|2|3|4|5|最初次ページ >>

CSSはこちら※ピンク部分が追加箇所です

.page {
margin:0 auto 14px auto;
padding:0;
font-size:1.0em;
text-align:center;
color: #CCCCCC;
}
.page .now {
font-weight: bold;
padding: 5px;
color: #757575;
text-decoration: underline;　/*下線あり*/
}
.page .now:hover {
text-decoration: none;　/*下線なし*/
}
.page a {
line-height: 1.5;
padding: 7px;
text-align: center;
}

リンクやマウスオーバー時の下線・フォントの色は、aタグ要素を継承しているので、上記のCSSをコピペすると、皆さんがスキンの最初の方で設定したカラーが適用されることになります。以下の部分ですね。

/*■リンク*/
a {
text-decoration:none;
color:#86b656;
}
/*■リンク：訪問済み*/
a:visited {
text-decoration:none;
color:#86b656;
}
/*■リンク：マウスオーバー時*/
a:hover {
text-decoration:underline;
color:#ffcc00;
}

ページャーだけ別の色を指定したい場合は、以下のように設定します。

1|2|3|4|5|最初次ページ >>

CSSはこちら※ブルー部分が追加箇所です

.page {
margin:0 auto 14px auto;
padding:0;
font-size:1.0em;
text-align:center;
color: #CCCCCC;
}
.page .now {
font-weight: bold;
padding: 5px;
color: #757575;
text-decoration: underline;
}
.page .now:hover {
text-decoration: none;
}
.page a {
line-height: 1.5;
padding: 7px;
text-align: center;
color: #0099ff !important　/*リンクの色*/;
.page a:hover {
color:#99ccff !important　/*ホーバー時の色*/;
}

以上が基本的なページャーのカスタマイズ方法です。
次回はこれをベースに、別のバージョンをご紹介したいと思います。お疲れ様でした。