Contact us
   Blog

Blog

Wp-PageNavi デザイン変更 CSS 一覧

前回の記事で紹介した、Wp-PageNavi デザイン変更用CSSです。全17種類あります。カスタマイズも自由です。気に入ったデザインを元に、さらに自分好みに調整してご活用ください。
ここで紹介しているデザインのCSSの解説はこちら

全17タイプ CSS一覧

Type01 

サンプルHTMLはこちら

01

/*wp-pagenavi 01*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #795A3C;
	background-color: #FFF1DA;
	border: 1px solid #DBC9AA;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #A09D71;
	border-color: #999;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background-color: #FC872E;
	border-color: #FC872E;
	font-weight: bold;
    }

Type02

サンプルHTMLはこちら
02

/*wp-pagenavi 02*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background-color: #3CB4E5;
	border: 1px solid #3CB4E5;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #FFC500;
	border-color: #FFC500;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background-color: #36C21C;
	border-color: #36C21C;
	font-weight: bold;
    }

Type03

サンプルHTMLはこちら
03

/*wp-pagenavi 03*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background-color: #FF74C7;
	border: 1px solid #FF74C7;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #00FFDD;
	border-color: #00FFDD;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background-color: #62B1EF;
	border-color: #62B1EF;
	font-weight: bold;
    }

Type04

サンプルHTMLはこちら

04

/*wp-pagenavi 04*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #66852F;
	background-color: #E5DE56;
	border: 1px dashed #E9C436;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #FFB500;
	border: 1px dashed #E9C436;
    }
.wp-pagenavi span.current{
	color: #fff;
	background-color: #A0C364;
	border: 1px dashed #E9C436;
	font-weight: bold;
    }

Type05 

サンプルHTMLはこちら

05

/*wp-pagenavi 05*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background-color: #1C181A;
	border: 1px solid #1C181A;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #FF0037;
	border-color: #FF0037;
    }
.wp-pagenavi span.current{
	color: #777;
	background-color: #CFD5DA;
	border-color: #CFD5D;
	font-weight: bold;
    }

Type06

サンプルHTMLはこちら

06

/*wp-pagenavi 06*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #777;
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
	background-color:#ededed;
	border:1px solid #dcdcdc;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration:none;
}
.wp-pagenavi a:hover{
    color:#e4685d; 
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background-color:#dfdfdf;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background:-moz-linear-gradient( center top, #fc8d83 5%, #e4685d 100% );
	background:-ms-linear-gradient( top, #fc8d83 5%, #e4685d 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fc8d83', endColorstr='#e4685d');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fc8d83), color-stop(100%, #e4685d) );
	background-color:#fc8d83;
	border-color: #e4685d;
	font-weight: bold;
    }
	

Type07

サンプルHTMLはこちら
07

/*wp-pagenavi 07*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
	background:-ms-linear-gradient( top, #3d94f6 5%, #1e62d0 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #3d94f6), color-stop(100%, #1e62d0) );
	background-color:#3d94f6;
	border:1px solid #3d94f6;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration:none;
}
.wp-pagenavi a:hover{
    color:#3d94f6; 
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background-color:#dfdfdf;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background:-moz-linear-gradient( center top, #1e62d0 5%, #3d94f6 100% );
	background:-ms-linear-gradient( top, #1e62d0 5%, #3d94f6 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #1e62d0), color-stop(100%, #3d94f6) );
	background-color:#1e62d0;
	border-color: #3d94f6;
	font-weight: bold;
    }

Type08

サンプルHTMLはこちら
08

/*wp-pagenavi 08*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
    	background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
	background:-ms-linear-gradient( top, #89c403 5%, #77a809 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #89c403), color-stop(100%, #77a809) );
	background-color:#89c403;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #74b807;
	padding:9px 18px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	text-shadow:1px 1px 0px #528009;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #a4e271;
 	-moz-box-shadow:inset 1px 1px 0px 0px #a4e271;
 	box-shadow:inset 1px 1px 0px 0px #a4e271;
	text-align: center;
	text-decoration:none;
}
.wp-pagenavi a:hover{
	color: #fff;
	background: -moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
	background: -ms-linear-gradient( top, #ffab23 5%, #ffec64 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffab23), color-stop(100%, #ffec64) );
	background-color: #ffab23;
	border-color: #ffab23;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background: -moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
	background: -ms-linear-gradient( top, #ffab23 5%, #ffec64 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffab23), color-stop(100%, #ffec64) );
	background-color: #ffab23;
	border-color: #ffab23;
	font-weight: bold;
    }

Type09 

サンプルHTMLはこちら
09

/*wp-pagenavi 09*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background:-moz-linear-gradient( center top, #fa665a 5%, #d34639 100% );
	background:-ms-linear-gradient( top, #fa665a 5%, #d34639 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa665a', endColorstr='#d34639');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fa665a), color-stop(100%, #d34639) );
	background-color:#fa665a;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #d83526;
	padding:9px 18px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	text-shadow:1px 1px 0px #98231a;
 	-webkit-box-shadow:inset 1px 1px 0px 0px #fab3ad;
 	-moz-box-shadow:inset 1px 1px 0px 0px #fab3ad;
 	box-shadow:inset 1px 1px 0px 0px #fab3ad;
	text-align: center;
	text-decoration:none;
}
.wp-pagenavi a:hover{
	color: #fff;
	background:-moz-linear-gradient( center top, #d34639 5%, #fa665a 100% );
	background:-ms-linear-gradient( top, #d34639 5%, #fa665a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d34639', endColorstr='#fa665a');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #d34639), color-stop(100%, #fa665a) );
	background-color:#d34639;
	border-color: #d34639;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background:-moz-linear-gradient( center top, #F2B3AD 5%, #e4685d 100% );
	background:-ms-linear-gradient( top, #F2B3AD 5%, #e4685d 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2B3AD', endColorstr='#e4685d');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fc8d83), color-stop(100%, #e4685d) );
	background-color:#F2B3AD;
	border-color:#F2B3AD;
	font-weight: bold;
    }

Type10

サンプルHTMLはこちら
10

/*wp-pagenavi 10*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background: 
	linear-gradient(63deg, #999 23%, transparent 23%) 7px 0, 
	linear-gradient(63deg, transparent 74%, #999 78%), 
	linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%), 
	#444;
	background-size: 16px 48px;
	border: 1px solid #DBC9AA;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #FFD100;
	border-color: #999;
    }
.wp-pagenavi span.current{
	color: #red;
	background: 
	linear-gradient(63deg, #F339C5 23%, transparent 23%) 7px 0, 
	linear-gradient(63deg, transparent 74%, #F339C5 78%), 
	linear-gradient(63deg, transparent 34%, #F339C5 38%, #F339C5 58%, transparent 62%), 
	#444;
	background-size: 16px 48px;
	border-color: #red;
	font-weight: bold;
    }

Type11 

サンプルHTMLはこちら
11

/*wp-pagenavi 11*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background: #36c;
	background-color:#269;
	background-image: linear-gradient(white 1px, transparent 1px),
	linear-gradient(90deg, white 1px, transparent 1px),
	linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
	linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
	background-size:100px 100px, 100px 100px, 10px 10px, 10px 10px;
	background-position:-1px -1px, -1px -1px, -1px -1px, -1px -1px
	border: 1px solid #fff;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 8px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #269;
	background-color: #FFD100;
	border-color: #999;
    }
.wp-pagenavi span.current{
	color: #269;
	background-color: #FFD100;
	border-color: #999;
    }

Type12

サンプルHTMLはこちら
12

/*wp-pagenavi 12*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #fff;
	background: #36c;
	background-color: #A51847;
	background-size: 88px 88px;
	background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px,
	0px 36px, 4px 2px, 29px 6px, 33px 30px;
	background-image: 
	linear-gradient(335deg, #C90032 23px, transparent 23px),
	linear-gradient(155deg, #C90032 23px, transparent 23px),
	linear-gradient(335deg, #C90032 23px, transparent 23px),
	linear-gradient(155deg, #C90032 23px, transparent 23px),
	linear-gradient(335deg, #C90032 10px, transparent 10px),
	linear-gradient(155deg, #C90032 10px, transparent 10px),
	linear-gradient(335deg, #C90032 10px, transparent 10px),
	linear-gradient(155deg, #C90032 10px, transparent 10px);
	border: 1px solid #C90032;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 8px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #FFF;
	background-color: #E17599;
	border-color: #999;
    }
.wp-pagenavi span.current{
	color: #FFF;
	background-color: #E17599;
	border-color: #999;
    }

Type13 

サンプルHTMLはこちら
13

/*wp-pagenavi 13*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #FFF600;
	background: #36c;
	background-color: #001;
	background-image: radial-gradient(gray 15%, transparent 16%),
	radial-gradient(white 15%, transparent 16%);
	background-size: 10px 10px;
	background-position: 0 0, 30px 30px;
	border: 1px solid #001;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 8px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #000;
	background-color: #E17599;
	border-color: #999;
    }
.wp-pagenavi span.current{
	color: #000;
	background-color: #E17599;
	border-color: #999;
    }

Type14 

サンプルHTMLはこちら
14

/*wp-pagenavi 14*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #FFF600;
	background: #36c;
	border: 1px solid #fff;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #fff;
	background-color: #FF0000;
	border-color: #FF0000;
    }
.wp-pagenavi span.current{
	color: #fff;
	background-color: #FF0000;
	border-color: #FF0000;
    }

Type15 

サンプルHTMLはこちら
15

/*wp-pagenavi 15*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #A044AD;
	background-color: #E2BFEE;
	border-right-style: solid;
	border-bottom: 3px solid #A044AD;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
	border-right-color: #A044AD;
}
.wp-pagenavi a:hover{
	color: #fff;
	background-color: #A15AD3;
	border-color: #A15AD3;
    }
.wp-pagenavi span.current{
	color: #fff;
	background-color: #A15AD3;
	border-bottom-color: #A044AD;
	border-right-color: #A044AD;
    }
	

Type16 

サンプルHTMLはこちら
16

/*wp-pagenavi 16*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #A4EB8C;
	background-color: #26B8AA;
	border-right-style: solid;
	border-bottom: 3px solid #98D184;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
}
.wp-pagenavi a:hover{
	color: #fff;
	background-color: #268EB8;
	border-color: #268EB8;
    }
.wp-pagenavi span.current{
	color: #fff;
	background-color: #268EB8;
	border-color: #268EB8 #287C9E #287C9E #268EB8;
    }

Type17

サンプルHTMLはこちら
17

/*wp-pagenavi 17*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #4DD0D5;
	background-color: #FFFFFF;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration: none;
	border: thin dotted #4DD0D5;
}
.wp-pagenavi a:hover{
	color: #fff;
	background-color: #4DD0D5;
    }
.wp-pagenavi span.current{
	color: #fff;
	background-color: #4DD0D5;
    }

Join our Salon


WEBのお手紙しろやぎくろやぎ。大切な方にWebのレター「Web Letter」をお届けしませんか? 6月中旬頃に、3ヶ月無料モニター様を募集いたします。