【WordPress】yStandardカスタマイズ、ページネーションのデザインを変える

2019年12月1日

今回は、ページネーション(ページ送り)の色や形の変更を試してみたので紹介したいと思います。
使用テーマは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と線の色を決めます。

相変わらずサイトのカスタマイズは大変です。
文字の色から背景の色まで全部細かく指定しなければなりません。さらにホバー時まで。

何はともあれ、サイトのカラーに合ったページネーションに変更できたので一安心。
よかったら参考にしてみてください。

その他のyStandardカスタマイズ