記事一覧などの下の方に、番号が振ってありますよね?
2つ目以降の記事(一覧)に進むための番号で、これを「ページネーション」といいます。
これがですね、気になって仕方なかったんですw
丸くてもっとパステルカラーにしたかった。

こういう柔らかい感じにしました^^
記事内のページネーションも本当は変えたかったのですが、どうしてもそのコードがどこにあるのかわからず、記事内に関しては「改ページ」は使わずに一つずつにして、「前のページ」「次のページ」とリンクを貼ることにしました。
スワローやストークは記事内ページネーションは「次のページ」という四角いボタンになってしまうんです。残念
このデザインにすると「次のページ」ボタンは変わりませんが、リンク色のぶっとい四角ボタンではなく、指定したページネーションのデザインになります。
ただし、「次のページ」の文字は消えません……無念。
ページネーションを自分好みにカスタマイズしよう!

ストークとスワローで、若干数値などが違ったので、両方載せておきます^^

スワロー
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」
と移動し、以下のコードを貼り付けしてください