[WordPress CSS]WorPressのプラグインWP Page Numbersのページャーをページの中央に揃える方法




WordPressを使っている方で記事数が多くなった場合のページャーで「WP Page Numbers」を使っている方も少なくないはず。

実際に使ってみると便利ですよね。
設置方法とかその他諸々は置いといて、この「WP Page Numbers」を使うと最終的に以下のようなコードが生成されます。

そしてこのコードに対して「WP Page Numbers」のデフォルトテーマを使用していると選択したテーマのCSSが生成されます。
そのCSSだとliをfloatしているのでページの中央に配置ができない・・・

なんだか気持ち悪いので中央に揃えたろうじゃないか!

実はpositionを使えばしっかり中央に揃います。

#wp_page_numbers {
	position:relative;
	padding-bottom:30px;
}
#wp_page_numbers ul {
	position: relative;
	left: 50%;
	float: left;
}
#wp_page_numbers ul li {
	position: relative;
	left: -50%;
	float: left;
}

これで最低限の中央配置は完了です。

ちなみに当ブログでは

#wp_page_numbers {
	position:relative;
	padding-bottom:30px;
}
#wp_page_numbers ul {
	position: relative;
	left: 50%;
	float: left;
}
#wp_page_numbers ul li {
	position: relative;
	left: -50%;
	float: left;
	list-style:none;
}
#wp_page_numbers ul li a {
	display:block;
	padding:3px 5px;
	margin:5px;
	border:1px solid #3a87ad
}
#wp_page_numbers ul li a:hover {
	background:#3a87ad;
	color:#fff;
	text-decoration:none;
}
#wp_page_numbers ul li.active_page a {
	background:#3a87ad;
	color:#fff;
}

としています。(ご参考までに)

これでスッキリ気持ちよくブログライフが楽しめますね!

追記

肝心なことを書き忘れていますた。
WP Page Numbersの設定で最初の方に「Include theme stylesheet for page numbers」とあります。
WP Page Numbersのデフォルトのスタイルを使うか使わないかのチェックです。
これを使わない。要するにチェックを外すのを忘れないようにお願いします。
(上に書いた内容で通じるかと思いましたが・・・)

タイトルとURLをコピーしました