SWELL - シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ
¥17,600（税込）※ お支払いは一度限りです。月額や年額ではありません。
シンプル美と機能性を両立させた、最高峰の国産WordPressテーマ『SWELL』。ぜひ、この感動の使い心地を体験してみてください。
SWELL - シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ
¥17,600（税込）※ お支払いは一度限りです。月額や年額ではありません。
シンプル美と機能性を両立させた、最高峰の国産WordPressテーマ『SWELL』。ぜひ、この感動の使い心地を体験してみてください。
悩む人ページャーのカスタマイズ画面からでは背景色や文字色、枠線の色を変更できません。変更する方法があれば教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
ページャーにはメインカラーが反映されており、ページャーのみを変更することができません。変更は追加CSSにコードを書く必要があり、今回はそのコードを紹介します。
管理画面メニューから、「外観」＞「カスタマイズ」を選択します。
サイドバーから、「追加CSS」を選択します。
以下の赤枠にコードを書いていきます。
解説するにあたって設定を以下にしています。
以下のコードを追加CSSにコピペすることでページャーの背景色や文字色、枠線の色を変更することができます。
変更箇所を#0dbaffで表示させています。
アクティブなページャーの背景色を変更する
[class*=page-numbers].current {
background-color: ここにカラーコードを入力;
}
アクティブなページャーの文字色を変更する
[class*=page-numbers].current {
color: ここにカラーコードを入力;
}
ページャーの背景色を変更する
[class*=page-numbers]:hover {
background-color: ここにカラーコードを入力;
}
ページャーの文字色を変更する
[class*=page-numbers]:hover {
color: ここにカラーコードを入力;
}
マウスを乗せた時の背景色を変更する
[class*="page-numbers"] {
background-color: ここにカラーコードを入力;
}
マウスを乗せた時の文字色を変更する
[class*="page-numbers"] {
color: ここにカラーコードを入力;
}
ページャーの枠線の色を変更する
[class*="page-numbers"] {
border: solid 1px #0dbaff;
}
※ページャーのデザインで「背景グレー」を選択時は、枠線がつきます。つけない場合はコード不要です。
※目立つように枠線の太さを3pxにしています。
サイドバーから、「サイト全体設定」を選択します。
サイト全体設定から、「ページャー」を選択します。
ページャーから、以下の設定が行えます。
今回は以上です。
この記事が気に入ったら
フォローしてね！