LuxeritasのページャーをSANGOに近づける

はじめに

こんにちは、よっしーです。

前回は、メニューをSANGOっぽく仕上げる方法を紹介しました。

今回は、ページャーです。

この部分ですね。プログの一覧をすると出て来るやつです。
ちょっとかわいい感じにしてみましょう。

子テーマのCSSの編集

今回変更するのは、「子テーマ」のstyle.cssだけです。


/* ページャー */ .pagination>li.not-allow { display: none !important; } /* ページャの大きさや色の設定 */ .pagination>li>a, .pagination>li>span { display: inline-block; margin: 0 5px; width: 40px; height: 40px; padding: 0px; vertical-align: middle; line-height: 40px; background: #fff; border: 1px solid #ddd; border-right: 0; color: #5ba9f7; border-radius: 50% !important; } /* ページャーのhover時の色 */ .pagination>li>a:hover { color: #5ba9f7; background: #c8e4ff; } /* アクティブ時の色 */ .pagination>.active>span{ color: #fff; background: #5ba9f7;; }

変更後は、こんな感じになります。

cssにimportantが多くて雑ですけど・・・。ごめんなさい・・・

まとめ

とりあえずページャーをかわいいデザインに変更しました。

気になる方は、試してみてください。