Wp-PageNavi デザイン変更用CSSを17種類書きました。ご自由にお使いください。

Takako Taniguchi

8年前

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;
    }