ページネーション(html直書き)

概要

記事ページにページネーションを配置したい時に活用できます。
各aタグのURLを変更してお使いください。

デモ

次のページページのタイトル・概要

1. <
2. 1
3. 2
4. 3
5. 4
6. 5
7. >

html / css

タブ切替でhtml/cssを確認できます。
それぞれコピーしてお使いください。

See the Pen ページネーション by hbm-design (@hbm-design) on CodePen.

カスタマイズ

「ページのタイトル・概要」の文字・線の色を変更する

.pagination-wrapper .next-page-title a {
    border: 2px solid #任意の線の色に変更;
    color: #任意の文字色に変更;
}
/* 「ページのタイトル・概要」をhoverしたときの背景・文字の色 */
.pagination-wrapper .next-page-title a:hover {
    background: #任意の背景色に変更;
    color: #任意の文字色に変更;
}

ページネーションの数字の色を変更する

.pagination-wrapper .pagination a {
    color: #任意の文字色に変更;
}
/* 数字をhoverしたときの色 */
.pagination-wrapper .pagination a:hover {
    background: #任意の背景色に変更;
}
/* 現在のページを指す色 */
.pagination-wrapper .pagination .current a {
    background-color: #任意の背景色に変更;
}