今回は、ページネーション(ページ送り)の色や形の変更を試してみたので紹介したいと思います。
使用テーマはyStandardです。
ページネーション(ページ送り)とは
投稿記事が複数ページにまたがる場合、アーカイブ下部に次ページがあることを示すページネーション(ページ送り)が表示されます。
今回は、このページネーションのデザインを自分色にカスタマイズしてみました。
追加cssで編集
外観→カスタマイズ→追加cssへ移動し、ここで編集します。
現在ページの背景色と色
.pagination__item.-current { background-color: #45bde5; color: #fff; }
このコードの中のbackground-colorで現在ページの背景色を変えることができます。デフォルトは#292b2cですが、#45bde5と青い色に変更しました。
colorはデフォルトで#fffと白だったのでそのままです。
background-colorとcolorを設定することで、現在ページの背景と中の数字の色が変更できました。
次のページに移動すると、ちゃんと2ページ目が現在のページとして青くなっているのがわかります。
現在ページ以外の背景色と色
.pagination__item { background-color: #fff; color: #222; }
続いて、現在ページ以外の背景と色を変更してみます。
こちらもコードの中のbackground-colorとcolorを変更します。
background-colorをサイトの背景と同じ色にすると、ページネーションの背景が見えなくなります。
なんだかすっきりした感じに見えますね。
.pagination__item { background-color: #fff; color: #45bde5; }
colorを変更して青に統一してみました。
ホバー時の色
現在ページと、その他のページの色を変更しました。次は、ホバー時の色です。
マウスを数字や矢印の上にもっていくと、その部分だけ色が変わります。
このホバー時の色を変更してみます。
.pagination__item:hover { color: #e54545; opacity: 1; }
ここではcolorを色を赤っぽくしてみました。
opacityは不透明度で、0で透明、1で不透明になります。0.1～0.9の間で設定すると赤色の強度が調整できます。
そのままの色を出したいならopacityは1がいいと思います。
ここで安心していると、今度は現在ページの色までホバー時に赤くなってしまいました。
現在ページにホバーしたときの色も個別に指定します。
.-current:hover { color: #fff; }
colorを指定することで、現在ページへのホバー時の色を変えることができました。
四角形から円へ
.pagination__item.-current { background-color: #45bde5; color: #fff; border-radius: 50%; }
現在ページの背景を四角形から円にするには、最初の背景色を設定したところにborder-radiusの設定を加えます。この値を50％にすることで四角形から円に変えることができます。
.pagination__item.-current { background-color: #fff; color: #45bde5; border-radius: 50%; border: 3px solid #45bde5; }
円を輪っか状態にしたいときは、まず背景色をサイトの背景と同じ色にします。
次に、borderを設定します。3pxの部分で線の太さを決めます。solidは1本線にするという意味です。最後に#45bde5と線の色を決めます。
相変わらずサイトのカスタマイズは大変です。
文字の色から背景の色まで全部細かく指定しなければなりません。さらにホバー時まで。
何はともあれ、サイトのカラーに合ったページネーションに変更できたので一安心。
よかったら参考にしてみてください。