【SWELL】ページャーの色を変更する方法｜メインカラー以外への変更はCSS設定が必要！

初心者

SWELLのぺージャーってどこから色を変えるの？
メインカラー以外にも設定できる？

そんな疑問に答えます。

この記事を書いた人

• IT業界24年のベテラン エンジニア
• WordPressで企業サイトの構築しています
• 取り扱いWordPressテーマは300個オーバー

SWELLマニアの かんた です

【一覧ページ】ページャーの色を設定する方法

SWELLのページャーは次の2つの方法で色の設定が行えます。

カスタマイザーからページャの色を設定する方法

メインカラーと背景色を同じ色にするとページャーが背景と同化して表示されてないように見えるので注意しましょう。

ページャーの色をメインカラー以外に設定する方法

カスタマイザーから設定する場合、どうしてもメインカラーとページャーは同一の色になってしまいます。メインカラー以外の色にページャーを設定したい場合はCSSで調整する必要があります。

かんた

ページャーの色をCSSで変更するサンプルコードを紹介します。

アクティブなページャーのフォントの色を変更するコード

[class*=page-numbers].current {
    color: black;
}

黒（black）を指定しているコードです。

オンマウスのページャーのフォントの色を変更するコード

 [class*=page-numbers]:hover {
    color: black;
}

黒（black）を指定しているコードです。

枠線の色を変更するコード

[class*="page-numbers"] {
    border:1px solid black;
}

黒（black）を指定しているコードです。

アクティブなページャーのフォントの色を変更するコード

[class*=page-numbers].current {
    color: black;
}

黒（black）を指定しているコードです。

ページャーの背景色を変更するコード

[class*="page-numbers"] {
    background-color: black;
}

黒（black）を指定しているコードです。

かんた

CSSには優先順位があります。コードの設置場所、記述順に注意しながらカスタマイズしましょう。

【記事ページ】ページャーの色を設定する方法

記事ページにも「次の記事」、「前の記事」へのページャーが表示されます。

記事一覧ページと同様にメインカラーで指定した色が自動的に反映されます。メインカラー以外の色に変更するにはCSSコードで調整しましょう。

ページャーの色をメインカラー以外に設定する方法

「次へ」のページャーの色変更するコード

こちらは「次の記事」へのリンクです。記事ページャーの右側です。

.p-pnLinks.-style-normal .-next .p-pnLinks__link {
    border-right: solid 1.25em black;
}

黒（black）を指定しているコードです。

「前へ」のページャーの色変更するコード

こちらは「前の記事」へのリンクです。記事ページャーの左側です。

.p-pnLinks.-style-normal .-prev .p-pnLinks__link {
    border-right: solid 1.25em black;
}

黒（black）を指定しているコードです。

まとめ

WordPressテーマ「SWELL」のぺージャーをカスタマイズする方法を紹介しました。

SWELLのページャーはメインカラーで指定した色が自動的に適用されます。メインカラー以外の色にする場合はCSSコードをアレンジして調整しましょう。

ぜひお試しください！