移るんです-SAMPLE　（ページ移動リンクのレウアウトサンプル一覧）

← 戻る

　　# サンプル 5
　　# サンプル 6
　　# サンプル 7
　　# サンプル 8

　　# サンプル 9
　　# サンプル 10
　　# サンプル 11
　　# サンプル 12

吐き出すHTMLタグ

スタイルシートなどで自由にデザインすることが可能です（＾＾
吐き出すタグは以下のとおり。

＃表示しない項目のDIVタグ及びclassタグは表示されません。

＃レイアウトサンプル１

Prev12 3 4 5...18 Next

↓コレを、スキンのCSSファイルに書き込むと、↑こうなる

div.uturundesu {
  font-size:13px;
  padding: 7px;
  margin: 3px;
}
div.uturundesu a {
  padding: 2px 5px 2px 5px;
  margin: 2px;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #000;
}
div.uturundesu a:hover, div.uturundesu a:active {
  border: 1px solid #f0f0f0;
  color: #000;
}
div.uturundesu span.uturu_current {
  padding: 2px 5px 2px 5px;
  margin: 2px;
  border: 1px solid #d9d300;
  font-weight: bold;
  background-color: #d9d300;
  color: #fff;
}
div.uturundesu span.uturu_disabled {
  padding: 2px 5px 2px 5px;
  margin: 2px;
  border: 1px solid #EEE;
  color: #DDD;
}

△PAGE TOP

＃レイアウトサンプル２

Prev12 3 4 5...18 Next

↓コレを、スキンのCSSファイルに書き込むと、↑こうなる

div.uturundesu {
  font-size:13px;
  padding:3px;
  margin:3px;
}
div.uturundesu a {
  padding: 2px 5px 2px 5px;
  margin-right: 2px;
  border: 1px solid #ddd;
  text-decoration: none; 
  color: #aaa;
}
div.uturundesu a:hover, div.uturundesu a:active {
  padding: 2px 5px 2px 5px;
  margin-right: 2px;
  border: 1px solid #a0a0a0;
}
div.uturundesu span.uturu_current {
  padding: 2px 5px 2px 5px;
  margin-right: 2px;
  border: 1px solid #e0e0e0;
  font-weight: bold;
  background-color: #f0f0f0;
  color: #aaa;
}
div.uturundesu span.uturu_disabled {
  padding: 2px 5px 2px 5px;
  margin-right: 2px;
  border: 1px solid #f3f3f3;
  color: #ccc;
}

△PAGE TOP

＃レイアウトサンプル 3

Prev12 3 4 5...18 Next

↓コレを、スキンのCSSファイルに書き込むと、↑こうなる

div.uturundesu {
  letter-spacing : 1px;
  padding:3px;
  margin:3px;
}

div.uturundesu a {
  padding: 2px 5px 2px 5px;
  margin-right: 2px;
  border: 1px solid #ddd;
  text-decoration: none; 
  color: #88AF3F;
}
div.uturundesu a:hover, div.uturundesu a:active {
  border:1px solid #85BD1E;
  color: #638425;
  background-color: #F1FFD6;
}
div.uturundesu span.uturu_current {
  padding: 2px 5px 2px 5px;
  margin-right: 2px;
  border: 1px solid #B2E05D;
  font-weight: bold;
  background-color: #B2E05D;
  color: #FFF;
}
div.uturundesu span.uturu_disabled {
	padding: 2px 5px 2px 5px;
	margin-right: 2px;
	border: 1px solid #f3f3f3;
	color: #ccc;
}

△PAGE TOP

＃レイアウトサンプル 4

Prev12 3 4 5...18 Next

↓コレを、スキンのCSSファイルに書き込むと、↑こうなる

div.uturundesu {
  font-size:13px;
  padding: 3px;
  margin: 3px;
}

div.uturundesu a {
  border: 1px solid #dedfde;
  margin-right:3px;
  padding:2px 6px;
  background-position:bottom;
  text-decoration: none;
  color: #0061de;
}
div.uturundesu a:hover, div.uturundesu a:active {
  border: 1px solid #000;
  background-image:none;
  background-color:#0061de;
  color: #fff;
}
div.uturundesu span.uturu_current {
  margin-right:3px;
  padding:2px 6px;
  font-weight: bold;
  color: #ff0084;
}
div.uturundesu span.uturu_disabled {
  margin-right:3px;
  padding:2px 6px;
  color: #adaaad;
}

△PAGE TOP

＃レイアウトサンプル 5

Prev12 3 4 5...18 Next

↓コレを、スキンのCSSファイルに書き込むと、↑こうなる

div.uturundesu {
  padding: 3px;
  margin: 3px;
}
div.uturundesu a {
  padding: 2px 5px 2px 5px;
  margin: 2px;
  border: 1px solid #fff;
  text-decoration: underline;
  color: #000099;
}
div.uturundesu a:hover{
  border: 1px solid #000099;
  color: #000;
}
div.uturundesu a:active {
  border: 1px solid #000099;
  color: #f00;
}
div.uturundesu span.uturu_current {
  padding: 2px 5px 2px 5px;
  margin: 2px;
  border: 1px solid #fff;
  font-weight: bold;
  background-color: #fff;
  color: #000;
}
div.uturundesu span.uturu_disabled {
  padding: 2px 5px 2px 5px;
  margin: 2px;
  border: 1px solid #EEE;
  color: #DDD;
}

△PAGE TOP

＃レイアウトサンプル 6

Prev12 3 4 5...18 Next

↓コレを、スキンのCSSファイルに書き込むと、↑こうなる

div.uturundesu {
	padding:3px;
	margin:3px;
}

div.uturundesu a {
	padding: 2px 5px 2px 5px;
	margin-right: 2px;
	border: 1px solid #9aafe5;
	text-decoration: none; 
	color: #2e6ab1;
}
div.uturundesu a:hover, div.uturundesu a:active {
	border: 1px solid #2b66a5;
	color: #000;
	background-color: lightyellow;
}
div.uturundesu span.uturu_current {
	padding: 2px 5px 2px 5px;
	margin-right: 2px;
	border: 1px solid navy;
	font-weight: bold;
	background-color: #2e6ab1;
	color: #FFF;
}
div.uturundesu span.uturu_disabled {
	padding: 2px 5px 2px 5px;
	margin-right: 2px;
	border: 1px solid #929292;
	color: #929292;
}

△PAGE TOP

＃レイアウトサンプル 7　（黒背景）

Prev12 3 4 5...18 Next

↓コレを、スキンのCSSファイルに書き込むと、↑こうなる

div.uturundesu {
	font-size: 11px;
	font-family: Tahoma, Arial, Helvetica, Sans-serif;
	background-color:#3e3e3e;
	color: #fff;
}
div.uturundesu a {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	background-color:#3e3e3e;
	text-decoration: none; /* no underline */
	color: #fff;
}
div.uturundesu a:hover, div.uturundesu a:active {
	background-color:#ec5210;
	color: #fff;
}
div.uturundesu span.uturu_current {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	font-weight: bold;
	background-color: #313131;
	color: #fff;
}
div.uturundesu span.uturu_disabled {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	background-color:#3e3e3e;
	color: #868686;
}

△PAGE TOP

＃レイアウトサンプル 8 （黒背景）

Prev12 3 4 5...18 Next

↓コレを、スキンのCSSファイルに書き込むと、↑こうなる

div.uturundesu {
	padding: 3px;
	margin: 3px;
	text-align:center;
	font-family:Arial;
	font-size:13.5pt;
	color: #fff;
	background-color:#000;
	font-weight:bold;
}
div.uturundesu a {
	margin: 2px;
	text-decoration: none;
	color: #fa0;
	background-color:#000;
}
div.uturundesu a:hover, div.uturundesu a:active {
	color: #fff;
	background-color:#000;
}
div.uturundesu span.uturu_current {
	margin: 2px;
	font-weight: bold;
	color: #fff;
	background-color:#000;
}
div.uturundesu span.uturu_disabled {
	margin: 2px;
	color: #444;
	background-color:#000;
}

△PAGE TOP

＃レイアウトサンプル 9

Prev12 3 4 5...18 Next

↓コレを、スキンのCSSファイルに書き込むと、↑こうなる

div.uturundesu {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align:right;
	padding:4px 6px 4px 0;
	background-color:#cecfce;
	border-top:1px dotted #9c9a9c;
	color:#313031;
}

div.uturundesu a {
	font-weight:bold;
	color:#0030ce;
	text-decoration:underline;
	padding:1px 3px 1px 3px;
	margin:0 1px 0 1px;
}

div.uturundesu a:hover, div.uturundesu a:active {
}
div.uturundesu span.uturu_current {
	padding:1px 2px 1px 2px;
	color:#000;
	background-color:#fff;
}
div.uturundesu span.uturu_disabled {
	display:none;
}

△PAGE TOP

＃レイアウトサンプル 10

Prev12 3 4 5...18 Next

↓コレを、スキンのCSSファイルに書き込むと、↑こうなる

div.uturundesu {
  padding: 7px;
  margin: 3px;
}

div.uturundesu a {
  padding: 2px 5px 2px 5px; 
  margin: 2px;
  border: 1px solid #000000;
  text-decoration: none; /* no underline */
  color: #000000;
}
div.uturundesu a:hover, div.black2 a:active {
  border: 1px solid #000000;
  background-color:#000;
  color: #fff;
}
div.uturundesu span.uturu_current {
  padding: 2px 5px 2px 5px;
  margin: 2px; 
  border: 1px solid #000000;
  font-weight: bold;
  background-color: #000000;
  color: #FFF;
}
div.uturundesu span.uturu_disabled {
  padding: 2px 5px 2px 5px;
  margin: 2px;
  border: 1px solid #EEE;
  color: #DDD; 
}

△PAGE TOP

＃レイアウトサンプル 11

Prev12 3 4 5...18 Next

↓コレを、スキンのCSSファイルに書き込むと、↑こうなる

div.uturundesu {
	padding: 3px;
	margin: 3px;
	font-size:12px;
}

div.uturundesu a {
	border: 1px solid #ccc;
	margin-right:3px;
	padding:2px 6px;
	background-position:bottom;
	text-decoration: none;
	font-weight:bold;
	color: rgb(66,97,222);
}
div.uturundesu a:hover, div.uturundesu a:active {
	background-image:none;
	background-color:#4261DF;
	color: #fff;
}
div.uturundesu span.uturu_current {
	margin-right:3px;
	padding:2px 6px;
	font-weight: bold;
	color: #000;
}
div.uturundesu span.uturu_disabled {
	display:none;
}

△PAGE TOP

＃レイアウトサンプル 12

Prev12 3 4 5...18 Next

↓コレを、スキンのCSSファイルに書き込むと、↑こうなる

.uturundesu {
	padding: 3px;
	margin: 3px;
	font-size:13px;
}

.uturundesu a {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #EEE;
	text-decoration: none; /* no underline */
	color: #036CB4;
}

.uturundesu a:hover,
.uturundesu a:active {
	border: 1px solid #999;
	color: #666;
}
.uturundesu .uturu_current {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #036CB4;
	font-weight: bold;
	background-color: #036CB4;
	color: #FFF;
}
.uturundesu .uturu_disabled {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #EEE;
	color: #DDD;
}

△PAGE TOP

さらにもっとないの～って時は、コチラをどうぞ（参照元です）