悩む人ページャーのカスタマイズ画面からでは背景色や文字色、枠線の色を変更できません。変更する方法があれば教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- 開いているページャーの背景色や文字色、枠線の色を変更できるようになる
- 開いていないページャーの背景色や文字色、枠線の色を変更できるようになる
- マウスをページャーに乗せた際の背景色や文字色、枠線の色を変更できるようになる
本記事の内容
【SWELL】ページャーの背景色や文字色、枠線の色の変更方法
ページャーにはメインカラーが反映されており、ページャーのみを変更することができません。変更は追加CSSにコードを書く必要があり、今回はそのコードを紹介します。
追加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にしています。
【SWELL】ページャーの形やデザインの設定方法
サイドバーから、「サイト全体設定」を選択します。
サイト全体設定から、「ページャー」を選択します。
ページャーから、以下の設定が行えます。
- ページャーの形：四角 or 丸
- ページャーのデザイン：枠線付き or 背景グレー
今回は以上です。