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

WordPressを利用してホームページを運用されている会社や個人のブロガーさんは、Wp-PageNavi(コンテンツのページ送りを自動で表示してくれるプラグイン)を使っている方も多いと思います。

ページ送り(ページネーションとも呼びます)はこういった↓↓↓ものです。

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 を使用』の項目を、必ず『いいえ』にしてください。
Wp-PageNavi  デザイン変更

ナビボタンの文字もここで設定できますので、必要があれば、変更してください。

pagenavi

使い方

あとは、以下のCSSから好きなものを選んで、ご自分のWordPressのテンプレートに追加してください。このCSSはWp-PageNaviがインストールされている前提で作っていますので、インストールしていない方は、まずは、プラグインをインストールしてください。

簡単なCSSですので、部分的に、好みに合わせてカスタマイズしてもよいですね!ここで紹介しているデザインのCSSはこちら

基本のCSSの解説

pagenavi_base

《.wp-pagenavi》
基本のセレクタです、ページのボタンが、画面の中で中央揃えの配置になるようになっています。(センター配置)これを解除したい場合は、text-alignのプロパティ部分をコメントアウトしてください。

《.wp-pagenavi a, .wp-pagenavi span》
マウスが乗っていない時の、ボタンの形や色を設定しています。角丸は再現できないブラウザもありますのでご了承ください。その場合は、通常の四角で表現されます。

《.wp-pagenavi a:hover》
マウスが乗った時の、ボタンの背景の色と文字の色を指定します。

《.wp-pagenavi span.current》
ページの中で現在地を示すボタンの背景の色と文字の色を指定します。

全17タイプ デザイン一覧

ここで紹介しているデザインのCSSはこちら

Type01 

サンプルHTMLはこちら
01

Type02

サンプルHTMLはこちら
02

Type03

サンプルHTMLはこちら
03

Type04

サンプルHTMLはこちら
04

Type05 

サンプルHTMLはこちら
05

Type06

サンプルHTMLはこちら
06

Type07

サンプルHTMLはこちら
07

Type08

サンプルHTMLはこちら
08

Type09 

サンプルHTMLはこちら
09

Type10

サンプルHTMLはこちら
CSSだけでストライプを作りますので、画像を用意する必要はありません。
10

Type11 

サンプルHTMLはこちら
CSSだけで縦横の罫線柄を作ります。画像は必要ありません。
11

Type12

サンプルHTMLはこちら
後ろの柄もスタイルシートで作りますので、画像は必要ありません。
12

Type13 

サンプルHTMLはこちら
ドット柄もスタイルシートで作りますので、画像は必要ありません。

13

Type14 

サンプルHTMLはこちら
14

Type15 

サンプルHTMLはこちら
15

Type16 

サンプルHTMLはこちら
16

Type17

サンプルHTMLはこちら
17

ここで紹介しているデザインのCSSはこちら