copyright © Taniweb

Blog

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

公開日：2016年7月29日最終更新日：2017年10月19日

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

全17タイプ　CSS一覧

Type01　

サンプルHTMLはこちら

/*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はこちら

/*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はこちら

/*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はこちら

/*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はこちら

/*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はこちら

/*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はこちら

/*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はこちら

/*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はこちら

/*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はこちら

/*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はこちら

/*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はこちら

/*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はこちら

/*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はこちら

/*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はこちら

/*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はこちら

/*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はこちら

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

[data-arkb-linkbox]{cursor:auto}[data-arkb-link][aria-hidden="true"]{visibility:visible;color:transparent;z-index:0;width:100%;height:100%;pointer-events:auto}a.arkb-boxLink__title{text-decoration:underline}

WEBの企画と制作の流れ

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