「wp-pagenavi」プラグインのインストールとCSSのカスタマイズ

投稿者: | 2009/02/09

インストールは通常通り「/wp-content/plugins」にアップロード。カスタマイズは以下のように。
「/wp-content/plugins/wp-pagenavi」の「pagenavi-css.css」を開いて編集。
またはテーマファイルのCSSに記述

例) 配置の中央揃え

.wp-pagenavi { text-align: center;}

追記) 2011/5/30

プラグイン「WP-Page Navi」のCSSデザイン サンプル

画像上のCSS・・CSS3で角丸(※IEには対応していません)

/* ---------------------------------------------------
 PLUGIN WP-Page Navi 角丸
---------------------------------------------------- */
.navigation {
	font-size: 12px;
	line-height: 20px;
	padding:15px 0;
	clear: both;
}
.navigation a {
	float: left;
	text-decoration: none;
	color: #fff;
	background-color: #666;
	padding: 2px 4px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.navigation a:hover {
	background-color: #333;
}
.wp-pagenavi {
	text-align: center;
}
.wp-pagenavi a {
	font-weight: bold;
	float: none;
}
.wp-pagenavi .current {
	font-weight: bold;
	color: #fff;
	background-color: #5593ea;
	padding: 3px 4px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.wp-pagenavi span.extend {
	text-decoration: none;
	color: #fff;
	background-color: #888;
	padding: 2px 4px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

画像下のCSS

/* ---------------------------------------------------
 PLUGIN WP-Page Navi
---------------------------------------------------- */
.navigation { padding: 15px; text-align:center;}

.wp-pagenavi { font-weight: normal;}
.wp-pagenavi a, .wp-pagenavi a:link {
	padding: 1px 5px 1px 5px; 
	margin: 3px 4px;
	text-decoration: none;
	border: 1px solid #aaa;
	color: #666;
	background-color: #e7e8e3;
}

.wp-pagenavi a:visited {
	padding: 1px 5px 1px 5px; 
	margin: 3px 4px;
	text-decoration: none;
	border: 1px solid #aaa;
	color: #666;
	background-color: #e7e8e3;
}

.wp-pagenavi a:hover {
	border: 1px solid #0090db;
	color: #fff;
	background-color: #2f97cc;
}

.wp-pagenavi a:active {
	padding: 1px 5px 1px 5px; 
	margin: 3px 4px;
	text-decoration: none;
	border: 1px solid #aaa;
	color: #666;
	background-color: #e7e8e3;
}

.wp-pagenavi span.pages {
	padding: 1px 5px 1px 5px; 
	margin: 3px 4px;
	color: #666;
	border: 1px solid #aaa;
	background-color: #e7e8e3;
}

.wp-pagenavi span.current {
	padding: 1px 5px 1px 5px;
	margin: 3px 4px;
	border: 1px solid #aaa;
	color: #fff;
	background-color: #2f97cc;
}

.wp-pagenavi span.extend {
	padding: 1px 5px 1px 5px;
	margin: 3px 4px;
	border: 1px solid #aaa;
	color: #666;
	background-color: #e7e8e3;
}

おすすめ本:いま一番わかりやすい WordPress日本語版でブログサイト構築入門

関連記事

「wp-pagenavi」プラグインのインストールとCSSのカスタマイズ」への3件のフィードバック

  1. ピンバック: ワタシの今の環境を晒してみるよ - LOVE!?

  2. ピンバック: ページナビゲーションを表示するWordPressのプラグイン★WP-PageNavi | みみみんメモ

  3. ピンバック: プラグイン「WP-Page Navi」 | レッドのウェブページ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*