記事一覧などの下の方に、番号が振ってありますよね？
2つ目以降の記事（一覧）に進むための番号で、これを「ページネーション」といいます。
これがですね、気になって仕方なかったんですｗ
丸くてもっとパステルカラーにしたかった。
こういう柔らかい感じにしました^^
記事内のページネーションも本当は変えたかったのですが、どうしてもそのコードがどこにあるのかわからず、記事内に関しては「改ページ」は使わずに一つずつにして、「前のページ」「次のページ」とリンクを貼ることにしました。
こんな感じにしました。シンプルで気に入ってます^^
スワローやストークは記事内ページネーションは「次のページ」という四角いボタンになってしまうんです。残念
このデザインにすると「次のページ」ボタンは変わりませんが、リンク色のぶっとい四角ボタンではなく、指定したページネーションのデザインになります。
ただし、「次のページ」の文字は消えません……無念。
ページネーションを自分好みにカスタマイズしよう！
ストークとスワローで、若干数値などが違ったので、両方載せておきます^^
スワロー
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | /* ページネーション */ .pagination a, .pagination span, .page-links a{ margin: 0; display: block; padding: 12px 6px; text-decoration: none; line-height: 1; font-size: 1em; width: 100%; border-radius: 50%; color: #a0a0a0; border: 1px solid #c4eff2!important; font-weight: normal; } .page-links a{ display: inline-block; width: 47%; } .pagination span.dots{ background: none!important; padding-left: 5px; padding-right: 5px; } .pagination a:hover, .pagination a:focus, .pagination span:hover, .pagination span:focus, .page-links a:hover, .page-links a:focus{ border: rgba(200, 244, 235, 0.8)!important; background-color: rgba(200, 244, 235, 0.8)!important; color: #a0a0a0; } .pagination .current{ cursor: default; color: #fff; background-color: #c4eff2!important; } .pagination .current:focus, .pagination .dots:hover, .pagination .dots:focus { color: #111; } |
ストーク
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | /* ページネーション */ .pagination a, .pagination span, .page-links a, .page-links ul > li > span { margin: 0; padding: 10px 17px; text-decoration: none; border-radius: 50%; line-height: 1; font-size: 1em; font-weight: normal; color: #909090; border: 1px solid #c4eff2!important; } .pagination span.dots, .page-links ul > li > span.dots { background: none!important; padding-left: 12px; padding-right: 12px; } .pagination a:hover, .pagination a:focus, .pagination span:hover, .pagination span:focus, .page-links a:hover, .page-links a:focus { border: rgba(200, 244, 235, 0.8)!important; background-color: rgba(200, 244, 235, 0.8)!important; color: #fff; } .pagination .current, .page-links ul > li > span { cursor: default; color: #fff; background-color: #c4eff2!important; } .pagination .current:focus, .pagination .dots:hover, .pagination .dots:focus { color: #111; } |
以上で終了です！
カラーはメインカラー（全体の70%に使う色）やその同系色（全体の25%に使う色）にすると、よりキレイに見えます^^
ではでは、お読みくださりありがとうございました♪
「外観」⇒「カスタマイズ」⇒「追加css」
と移動し、以下のコードを貼り付けしてください