[WordPress][Luxeritas] 個性的ページネーション(ページャー)デザイン7パターン

2020年9月23日

ページネーションデザインを変更したいけど、カスタマイザーからはできないし、やり方が分からない…

そんな疑問に答えます。

ちなみにページネーションとはブログ内の今何ページ目にいるのかを表示してくれるあれです。ページャーとも言いますね💡

WPテーマ「Luxeritas」を使っている人向けに書いていますが、それ以外の方もクラス名を変更することで応用は可能です💡

before&after

before

Luxeritasのページネーションは、デフォルトではこのようなデザインをしています。

after

サイトの雰囲気に合わせ、枠線、色を変更し、角を丸くして柔らかい印象にしました。

デザイン変更の仕方

これはカスタマイザーからは変更できないため、子テーマのStylesheetから変更しています。(子テーマのCSSを編集しています)

よく分からない場合はこの辺りの記事も参考にしてみてください。

シンプルデザイン

このサイトで使っているものです。好きな色で応用してみてください。 

/* ボタン同士を離す */
.pagination>li{
 padding: 0px 3px;
}
/* 枠線を消す */
.pagination>li>a, .pagination>li>span, .pagination>li:last-child>a, .pagination>li:last-child>span, .pagination>.not-allow:first-child>span:hover{
 border: none;
}
/* 色を変更 */
.pagination>.active>span, .pagination>li>a:hover{
 background: none;
 background-color: #71d9f5; /* ここを好きな色に指定 */
}
.pagination>li span, .pagination>li>a{
 background-color: #fff;
}
/* 角の丸み */
.pagination>li>a, .pagination>li>span{
 border-radius: 5px;
}

色選びに関してはこちらも参考にどうぞ。

配色のためのおすすめ無料ツール7選

ボーダーあり

上のデザインの枠線ありバージョンです。上では枠線をnoneにしていますが、こちらではboederを指定し、好きな色に変えています。

/* 枠線の色を変更 */
.pagination>li>a, .pagination>li>span, .pagination>li:last-child>a, .pagination>li:last-child>span, .pagination>.not-allow:first-child>span:hover {
    border: 1px solid #71d9f5;
}

初期デザインの色だけ変更

/* 枠線の色を変更 */
.pagination>li>a, .pagination>li>span, .pagination>li:last-child>a, .pagination>li:last-child>span, .pagination>.not-allow:first-child>span:hover {
    border: 1px solid #71d9f5;
}
/* ページネーションの色を変更 */
.pagination>.active>span, .pagination>li>a:hover {
    background: 0 0;
    background-color: #71d9f5;
}

初期デザインの形はそのままに、色だけ変更したものです。シャープさを残しつつ、少しソフトな印象です。

丸系のデザイン

上のコードを基本に、角の丸みを100%に設定しています。そのままだと少し潰れたようにも見えるので、line-heightで高さを調節しました。

/* 角の丸み */
.pagination>li>a, .pagination>li>span {
    border-radius: 100%;
    line-height: 23px;
}

丸い枠線

角の丸みを100%にした上で、borderを指定しました。シャボン玉っぽい。

/* 角の丸み */
.pagination>li>a, .pagination>li>span {
    border-radius: 100%;
    line-height: 22px;
}
/* 枠線の太さ、色 */
.pagination>li>a, .pagination>li>span, .pagination>li:last-child>a, .pagination>li:last-child>span, .pagination>.not-allow:first-child>span:hover {
    border: 1px solid #71d9f5;
}

個性的なデザイン

ネオン風

box-shadowを指定し、うっすらと光っているように見せています。

/* 色を変更 */
.pagination>.active>span, .pagination>li>a:hover {
    background: 0 0;
    background-color: #71d9f5;
    box-shadow: 0 0 5px #71d9f5; /* 影の色 */
}

立体的なボタン風

グレイの影を指定し、ボタン風にしました。少し使うのが難しいかもしれませんが、3Dなデザインのブログに。

/* 色を変更 */
.pagination>.active>span, .pagination>li>a:hover {
    background: 0 0;
    background-color: #71d9f5;
    box-shadow: 0 0 5px #888; /* 影の色 */
}

最後に

以上!

ページネーションのデザイン変更まとめでした。

意外と目立つ所なので、是非ご自身のブログデザインに合うよう変更してみてください!