WordPressを利用してホームページを運用されている会社や個人のブロガーさんは、Wp-PageNavi（コンテンツのページ送りを自動で表示してくれるプラグイン）を使っている方も多いと思います。
ページ送り（ページネーションとも呼びます）はこういった↓↓↓ものです。
このデザイン↑↑↑ ボタンの色や形などを、選べるようになっている「WP-PageNavi Style」というプラグインもありますが、この程度のデザインなら、プラグインを使わなくてもスタイルシートに数行追加するだけで、簡単に変更することができます。ある程度、CSSがわかる方なら、さらに自分好みにカスタマイズできるでしょう！
Wp-PageNavi https://ja.wordpress.org/plugins/wp-pagenavi/
WP-PageNavi Style https://wordpress.org/support/view/plugin-reviews/wp-pagenavi-style
インストールするプラグインは、なるべく必要最小限にしたいという方は、デザイン変更用のCSSを17種類書きましたので、自由に活用してください。
最初の準備、管理画面でWp-PageNaviの設定を行う
WordPressの管理画面から、Wp-PageNaviの設定画面へ進み、『pagenavi-css.css を使用』の項目を、必ず『いいえ』にしてください。
ナビボタンの文字もここで設定できますので、必要があれば、変更してください。
使い方
あとは、以下のCSSから好きなものを選んで、ご自分のWordPressのテンプレートに追加してください。このCSSはWp-PageNaviがインストールされている前提で作っていますので、インストールしていない方は、まずは、プラグインをインストールしてください。
簡単なCSSですので、部分的に、好みに合わせてカスタマイズしてもよいですね！ここで紹介しているデザインのCSSはこちら
基本のCSSの解説
《.wp-pagenavi》
基本のセレクタです、ページのボタンが、画面の中で中央揃えの配置になるようになっています。（センター配置）これを解除したい場合は、text-alignのプロパティ部分をコメントアウトしてください。
《.wp-pagenavi a, .wp-pagenavi span》
マウスが乗っていない時の、ボタンの形や色を設定しています。角丸は再現できないブラウザもありますのでご了承ください。その場合は、通常の四角で表現されます。
《.wp-pagenavi a:hover》
マウスが乗った時の、ボタンの背景の色と文字の色を指定します。
《.wp-pagenavi span.current》
ページの中で現在地を示すボタンの背景の色と文字の色を指定します。
/*wp-pagenavi base*/
.wp-pagenavi {
clear: both;
text-align:center;
}
.wp-pagenavi a, .wp-pagenavi span {
color: #999;
background-color: #FFF;
border: solid 1px #e0e0d2;
padding: 8px 15px;
margin: 0 2px;
white-space: nowrap;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
text-align: center;
text-decoration:none;
}
.wp-pagenavi a:hover{
color:#FFF;
background-color:#999;
border-color:#999;
}
.wp-pagenavi span.current{
color: #FFF;
background-color: #66cccc;
border-color: #66cccc;
font-weight: bold;
}
全17タイプ デザイン一覧
Type01
Type02
Type03
Type04
Type05
Type06
Type07
Type08
Type09
Type10
サンプルHTMLはこちら
CSSだけでストライプを作りますので、画像を用意する必要はありません。
Type11
サンプルHTMLはこちら
CSSだけで縦横の罫線柄を作ります。画像は必要ありません。
Type12
サンプルHTMLはこちら
後ろの柄もスタイルシートで作りますので、画像は必要ありません。
Type13
サンプルHTMLはこちら
ドット柄もスタイルシートで作りますので、画像は必要ありません。
