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;
    }

Follow me

WEBの企画と制作の流れ

WEB制作は リサーチとデザインと実装。リサーチや企画といった 情報を取り扱う工程。 そして、それを元にデザインする工程。デザインしたものを実装する工程。 中でも企画検討といった部分は上流工程と呼ばれ、独立して扱われることもあります。WEBサイトを作る際の思考法やブランディングのために必要なこと。知っておいて欲しい制作の知識や受発注の心得などをまとめました。

future

いきなり完成したものを作って納品するのではなく、徐々に積み上げてゆくように、側でクライアントを支えながら完成させてゆく新しいスタイルの制作です。

lalan with you