HTMLとCSSでデザインされたページネーションのサンプルです。ホームページ作りにご利用ください。
現在、レンタルHP作成サービスでページネーションが作れるのはALICE+のみのようですので、そちらのソースコードで作ってみました。
ALICE+では、「小説」「ブログ」「アルベム」で、次の独自タグを記載すると以下のコードが生成されます。
##pagination##
<div class="PageNavi">
<ul class="pagination">
<li><a>«</a></li>
<li><a><</a></li>
<li><a>1</a></li>
<li><a>2</a></li>
<li><span class="active">3</span></li>
<li><a>4</a></li>
<li><a>></a></li>
<li><a>»</a></li>
</ul>
</div>
基本になるHTMLですが、HTMLをコピペしてもダメです。独自タグをコピー&ペーストしてください。
CSSをコピー&ペーストします。貼り付ける場所は下記をご覧ください。
それではデザインサンプルをご覧ください。
色は好きな配色を試してください。。
.pagination{
text-align:center;
display:flex;
align-items:center;
justify-content:flex-start;
margin:22px auto;
max-width:90%;
}
.pagination li{
list-style:none;
flex-grow:1;
}
.pagination li a,
.pagination li span.active{
margin:0 -1px 0 0;
padding:0;
display:inline-block;
color:#666;
background:#fff;
width:100%;
height:36px;
line-height:36px;
text-align:center;
text-decoration:none;
vertical-align:middle;
position:relative;
border:1px solid #ccc;
transition:all 0.3s ease;
}
.pagination li a:hover,
.pagination li span.active{
color:#fff;
background:#666;
border:1px solid #666;
}
.pagination{
text-align:center;
display:flex;
align-items:center;
justify-content:flex-start;
margin:22px auto;
max-width:90%;
}
.pagination li{
list-style:none;
flex-grow:1;
}
.pagination li a,
.pagination li span.active{
margin:0 -1px 0 0;
padding:0;
display:inline-block;
color:#666;
background:#fff;
width:80%;
height:36px;
line-height:32px;
text-align:center;
text-decoration:none;
vertical-align:middle;
position:relative;
border:1px solid #ccc;
border-radius:50%;
transition:all 0.3s ease;
}
.pagination li a:hover,
.pagination li span.active{
color:#fff;
background:#666;
border:1px solid #666;
}
.pagination{
text-align:center;
display:flex;
align-items:center;
justify-content:center;
margin:22px auto;
max-width:90%;
}
.pagination li{
list-style:none;
width:36px;
}
.pagination li a,
.pagination li span.active{
margin:0 -1px 0 0;
padding:0;
display:inline-block;
color:#666;
background:#fff;
width:36px;
height:36px;
line-height:30px;
text-align:center;
text-decoration:none;
vertical-align:middle;
position:relative;
border:4px solid transparent;
border-radius:50%;
transition:all 0.3s ease;
}
.pagination li a:hover,
.pagination li span.active{
color:#666;
background:#fff;
border:4px solid #2fb468;
}
.pagination{
text-align:center;
display:flex;
align-items:center;
justify-content:space-around;
margin:22px auto;
max-width:90%;
}
.pagination li{
list-style:none;
width:36px;
}
.pagination li a,
.pagination li span.active{
margin:0 -1px 0 0;
padding:0;
display:inline-block;
color:#666;
background:#fff;
width:100%;
height:36px;
line-height:36px;
text-align:center;
text-decoration:none;
vertical-align:middle;
position:relative;
border:1px solid #ccc;
transition:all 0.3s ease;
}
.pagination li a:hover,
.pagination li span.active{
color:#fff;
background:#40aaef;
border:1px solid #40aaef;
}
.pagination{
text-align:center;
display:flex;
align-items:center;
justify-content:space-around;
margin:22px auto;
max-width:90%;
}
.pagination li{
list-style:none;
width:36px;
}
.pagination li a,
.pagination li span.active{
margin:0 -1px 0 0;
padding:0;
display:inline-block;
color:#666;
background:#fff;
width:100%;
height:36px;
line-height:36px;
text-align:center;
text-decoration:none;
vertical-align:middle;
position:relative;
border:1px solid transparent;
transition:all 0.3s ease;
}
.pagination li a:hover,
.pagination li span.active{
color:#fff;
background:#40aaef;
border:1px solid #40aaef;
}
.pagination{
text-align:center;
display:flex;
align-items:center;
justify-content:flex-start;
margin:22px auto;
max-width:90%;
}
.pagination li{
list-style:none;
flex-grow:1;
}
.pagination li a,
.pagination li span.active{
margin:0 -1px 0 0;
padding:0;
display:inline-block;
color:#666;
background:#fff;
width:100%;
height:36px;
line-height:36px;
text-align:center;
text-decoration:none;
vertical-align:middle;
position:relative;
border:1px solid #ccc;
transition:all 0.3s ease;
}
.pagination li:first-child a{
border-top-left-radius:50%;
border-bottom-left-radius:50%;
}
.pagination li:last-child a{
border-top-right-radius:50%;
border-bottom-right-radius:50%;
}
.pagination li a:hover,
.pagination li span.active{
color:#fff;
background:#fba848;
border:1px solid #fba848;
}
.pagination{
text-align:center;
display:flex;
align-items:center;
justify-content:space-around;
margin:22px auto;
max-width:90%;
}
.pagination li{
list-style:none;
width:36px;
}
.pagination li a,
.pagination li span.active{
margin:0 -1px 0 0;
padding:0;
display:inline-block;
color:#666;
background:#e7e8ef;
width:100%;
height:36px;
line-height:36px;
text-align:center;
text-decoration:none;
vertical-align:middle;
position:relative;
border:1px solid #e7e8ef;
transition:all 0.3s ease;
}
.pagination li a:hover,
.pagination li span.active{
color:#fff;
background:#40aaef;
border:1px solid #40aaef;
}
.pagination{
text-align:center;
display:flex;
align-items:center;
justify-content:space-around;
margin:22px auto;
max-width:90%;
box-shadow:0 1px 4px rgba(0,0,0,0.3);
}
.pagination li{
list-style:none;
width:36px;
}
.pagination li a,
.pagination li span.active{
margin:0 -1px 0 0;
padding:0;
display:inline-block;
color:#666;
background:#fff;
width:100%;
height:36px;
line-height:36px;
text-align:center;
text-decoration:none;
vertical-align:middle;
position:relative;
border:1px solid #fff;
transition:all 0.3s ease;
}
.pagination li a:hover,
.pagination li span.active{
color:#40aaef;
background:#e7e8ef;
border:1px solid #e7e8ef;
}
.pagination{
text-align:center;
display:flex;
align-items:center;
justify-content:space-around;
margin:22px auto;
max-width:90%;
}
.pagination li{
list-style:none;
width:36px;
}
.pagination li a,
.pagination li span.active{
margin:0 -1px 0 0;
padding:0;
display:inline-block;
color:#93b8ca;
background:#fff;
width:100%;
height:36px;
line-height:36px;
text-align:center;
text-decoration:none;
vertical-align:middle;
position:relative;
border:1px solid #fff;
transition:all 0.3s ease;
}
.pagination li a:hover,
.pagination li span.active{
font-size:2.2em;
color:#40aaef;
background:#fff;
border:1px solid #fff;
}
.pagination{
text-align:center;
display:flex;
align-items:center;
justify-content:space-around;
margin:22px auto;
max-width:90%;
}
.pagination li{
list-style:none;
width:36px;
}
.pagination li a,
.pagination li span.active{
margin:0 -1px 0 0;
padding:0;
display:inline-block;
color:#5ba7ec;
background:#f6f7f8;
width:100%;
height:36px;
line-height:36px;
text-align:center;
text-decoration:none;
vertical-align:middle;
position:relative;
border:1px solid #f6f7f8;
border-radius:50%;
transition:all 0.3s ease;
}
.pagination li a:hover,
.pagination li span.active{
color:#fff;
background:#5ba7ec;
border:1px solid #5ba7ec;
}