【SWELL】ページャーの形とデザインの設定

【SWELL】ページャーの形とデザインの設定

SWELLのページャーの形とデザインの設定についてまとめています。

目次

ページャーの設定

基本的な使い方は、公式サイトの解説記事を参考にして下さい。

ページャーのデザイン設定方法 | WordPressテーマ SWELL

形とデザインの設定

ページャーの形とデザインは、カスタマイザーの「ページャー」から設定できます。

カスタマイザー ▶ サイト全体設定 ▶ ページャー

ページャーの設定
ページャーの設定選択肢
四角 or 丸
デザイン枠線付き or 背景グレー
※全4パターン

お好みで形とデザインを選択して下さい(デザインは「枠線付き」推奨)。

カラーの設定

ページャーのカラーは、メインカラーに依存します。個別にカラーを変更することはできません。

カスタマイザー ▶ サイト全体設定 ▶ 基本カラー ▶ メインカラー

ページャーのカラー変更

ページャーのカラーを個別に変更したい時は、任意のカラーコードを入力してCSSで調整して下さい。

どちらもアクティブなページャーの設定は共通です。

枠線付きを選択している時は、非アクティブなページャーのテキストとボーダーのカラーを指定します。

[class*=page-numbers].current, [class*=page-numbers]:hover {
    color: #カラーコード; /* アクティブなページャーのテキストカラー */
    background-color: #カラーコード; /* アクティブなページャーの背景カラー */
}
[class*="page-numbers"] {
    color: #カラーコード; /* 非アクティブなページャーのテキストカラー */
    border-color: #カラーコード; /* ボーダーカラー */
}

背景グレーを選択している時は、非アクティブなページャーのテキストと背景のカラーを指定します。

[class*=page-numbers].current, [class*=page-numbers]:hover {
    color: #カラーコード; /* アクティブなページャーのテキストカラー */
    background-color: #カラーコード; /* アクティブなページャーの背景カラー */
}
[class*="page-numbers"] {
    color: #カラーコード; /* 非アクティブなページャーのテキストカラー */
    background-color: #カラーコード; /* 非アクティブなページャーの背景カラー */
}

CSSを追加できたら、ページャーにカーソルを乗せてカラーが反映されていることを確認して下さい。

デザイン「背景グレー」はPageSpeed Insightsのスコアがマイナス

ページャーのデザインで「背景グレー」を選択すると、PageSpeed Insightsのユーザー補助項目で「背景色と前景色には十分なコントラスト比がありません」と表示されることがあります。

背景色と前景色には十分なコントラスト比がありません

十分なカラー コントラストを確保する方法の詳細では、カラーコントラストアナライザーを用いて、ガイドラインに合格する色をテストできるので、スコアが気になる方はテストに合格したカラーを組み合わせて下さい。

また、ページャーのデザインを「枠線付き」に変更するだけでもこの問題は解決されます。

PageSpeed Insights

最後に

そこまで重要ではありませんが、PageSpeed Insightsのユーザー補助のスコアが気になる方は、ページャーのデザインを「枠線付き」に変更する及びページャーの背景とフォントのカラーを見直してみて下さい。

よかったらシェアしてね!

今日の一言

2023年11月3日にリリースされたコアアップデートが11月29日にロールアウトしました。長かっただけで特に大きな変化はありません。10月で大きく減ったアクセスは少し戻ったかな!?程度です(恐らく季節需要の高い記事のアクセスでそう見えるだけ)。とりあえずやる事は変わらないので、次のコアアップデートに向けてコツコツ記事を書いてリライトするだけです。

コメント

コメントする

目次