webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

シンプルで使える「WP-PageNavi」デザインCSSコード

WP-PageNaviのデザインCSSコピペコード
3172
この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー＆講師
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき
  • 小4・年長の母
もっと詳しくみる

プラグイン「WP-PageNavi」を使用したページネーションのデザイン用CSSコードです。

WP-PageNaviの使い方についてはこちらの記事をご覧ください。

【WordPress】でページネーションを実装する
【WordPress】でページネーションを実装する
chiiweb.net/media/pagination/

シンプルなデザインなので、カラーコードを変更するだけですぐに使えると思います。

デザイン01

.wp-pagenavi {
	margin: 40px auto;
	font-size: 12px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #77a0d1;
}
.wp-pagenavi a {
    color: #77a0d1;
}
.wp-pagenavi span.current,
.wp-pagenavi a.page {
	margin: 0 10px 0 0;
	border: solid 1px #eee;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	line-height: 40px;
	text-align: center;
	box-sizing: border-box;
	justify-content: center;
	display: flex;
	align-items: center;
	transition: .3s;
}
.wp-pagenavi span.current {
    border: none;
    background: #77a0d1;
    color: #fff;
}
.wp-pagenavi a.page {
	background: none;
}
.wp-pagenavi a.page:hover {
    background: #77a0d1;
    color: #fff;
}
.wp-pagenavi .first,
.wp-pagenavi .extend {
    margin-right: 10px;
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
    display: none;
}

デザイン02

.wp-pagenavi {
	margin: 40px auto;
	font-size: 14px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
}
.wp-pagenavi a {
    color: #333;
}
.wp-pagenavi a:hover {
	color: #77a0d1;
}
.wp-pagenavi span.current,
.wp-pagenavi a.page {
	margin: 0 10px;
	line-height: 2;
	padding: 0 12px;
	transition: .03s;
	display: block;
	border-bottom: 4px solid transparent;
}
.wp-pagenavi span.current {
	border-bottom: 4px solid #77a0d1;
}
.wp-pagenavi a.page {
	background: none;
}
.wp-pagenavi a.page:hover {
	border-bottom: 4px solid #77a0d1;
}
.wp-pagenavi .first,
.wp-pagenavi .extend {
	margin-right: 15px;
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
	display: none;
}

デザイン03

.wp-pagenavi {
	margin: 40px auto;
	font-size: 14px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
}
.wp-pagenavi a {
  color: #333;
	display: block;
	padding: 24px;
	border: 1px solid #eee;
	box-shadow: 5px 5px 5px #eee;
}
.wp-pagenavi span.current,
.wp-pagenavi a.page {
	margin: 0;
	line-height: 2;
	padding: 0 20px;
	display: block;
	transition: .3s;
}
.wp-pagenavi span.current {
	background: #eee;
	box-shadow: 5px 5px 5px #eee;
	border: 1px solid #eee;
}
.wp-pagenavi a.page {
	background: none;
}
.wp-pagenavi a.page:hover {
	background: #eee;
}
.wp-pagenavi .first,
.wp-pagenavi .last {
	border: none;
	box-shadow: none;
}
.wp-pagenavi .extend {
	margin: 0 14px;
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
    display: none;
}

デザイン04

.wp-pagenavi {
	margin: 40px auto;
	font-size: 14px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	border: 1px solid #eee;
	box-shadow: 5px 5px 5px #eee;
}
.wp-pagenavi a,
.wp-pagenavi span.current {
  color: #333;
	display: block;
	padding: 24px;
}
.wp-pagenavi span.current {
	color: #77a0d1;
}
.wp-pagenavi a:hover {
	color: #77a0d1;
}

デザイン05

.wp-pagenavi5 {
	margin: 40px auto;
	font-size: 12px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #77a0d1;
}
.wp-pagenavi5 a {
    color: #77a0d1;
}
.wp-pagenavi5 span.current,
.wp-pagenavi5 a.page {
	margin: 0;
	padding: 20px;
	text-align: center;
	box-sizing: border-box;
	justify-content: center;
	display: flex;
	align-items: center;
	border-bottom: 2px solid #77a0d1;
}
.wp-pagenavi5 span.current {
	position: relative;
}
.wp-pagenavi5 span.current::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 6px 12px 6px;
	border-color: transparent transparent #8cc4ff transparent;
	position: absolute;
	bottom: -6px;
	left: 0;
	right: 0;
	margin: auto;
}
.wp-pagenavi5 a.page {
	background: none;
}
.wp-pagenavi5 a.page:hover {
	background: #77a0d1;
	color: #fff;
}
.wp-pagenavi5 .first,
.wp-pagenavi5 .extend {
	margin-right: 10px;
}
.wp-pagenavi5 .previouspostslink,
.wp-pagenavi5 .nextpostslink {
	display: none;
}

デザイン06

.wp-pagenavi {
	margin: 40px auto;
	font-size: 12px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #77a0d1;
}
.wp-pagenavi a {
	color: #333;
}
.wp-pagenavi span.current,
.wp-pagenavi a.page,
.wp-pagenavi .extend,
.wp-pagenavi .first,
.wp-pagenavi .last {
	margin: 0 10px 0 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	line-height: 40px;
	text-align: center;
	box-sizing: border-box;
	justify-content: center;
	display: flex;
	align-items: center;
}
.wp-pagenavi span.current {
		border: solid 1px #77a0d1;
}
.wp-pagenavi a.page:hover,
.wp-pagenavi .first,
.wp-pagenavi .last {
	background: #77a0d1;
	color: #fff;
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
    display: none;
}

いいなと思ったら
TAPしてね♡↓

WordPress

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home → Webデザイン → WordPress → シンプルで使える「WP-PageNavi」デザインCSSコード

関連記事

クリップボードにコピーしました

更新通知を受け取る

不定期更新の為、
メールにて更新お知らせを
お送りいたしますlove letter

（更新通知以外のメールは
お送りしませんので
ご安心ください）