【WordPress】WP-PageNaviがデフォルト設定が左寄せだもんで、真中揃えにする方法

WordPressの人気プラグインでWP-PageNaviってやつがあります。

何のプラグインかというと、WordPressの多くのテーマで記事のページを次に送る時

こんな感じなってるよね。

「古いやつ」とかは僕が勝手に書き換えたけど。

普通は「oldentry」とかかな？？

で、それだと使いにくいということで、WP-PageNaviってのを入れると

こういう感じでよく見慣れたいわゆる「ページナビ」に変わるというナイスなやつです。

ただ、デフォルトの設定が「左揃え」（左に寄ってるよね）なので、真中揃えの方が良い！！っていう僕みたいな人のための記事です。

まずはWP-PageNaviの設定画面（左バーの「設定」>「PageNavi」ってとこね）で、「pagenavi-css.cssを使用」にチェックして下さい。

そうするとズバリpagenavi-css.cssを書き換えるとデザインが変わるというわけです。

pagenavi-css.cssはプラグインフォルダに裸で入ってるのでそれを編集しましょう！

何もいじってないのがこんな感じ

[css]

/*
Default style for WP-PageNavi plugin

http://wordpress.org/extend/plugins/wp-pagenavi/
*/

.wp-pagenavi {
clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #000;
}

.wp-pagenavi span.current {
font-weight: bold;
}

[/css]

で、真中寄せにすればいいので一行追加するだけです。

[css]

/*
Default style for WP-PageNavi plugin

http://wordpress.org/extend/plugins/wp-pagenavi/
*/

.wp-pagenavi {
clear: both;

/* センター寄せ */
text-align:center;
}

.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #000;
}

.wp-pagenavi span.current {
font-weight: bold;
}

[/css]

するとこんな感じです。

他にもいろいろいじれるので、試して見てね。

僕はとりあえずこれでいっかって感じでーす！

posted with amazlet at 13.03.21

エ・ビスコム・テック・ラボ
毎日コミュニケーションズ
売り上げランキング: 172,656