【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のユーザー補助のスコアが気になる方は、ページャーのデザインを「枠線付き」に変更する及びページャーの背景とフォントのカラーを見直してみて下さい。

シェアしてね!

この記事を書いた人

2024年9月4日、Googleのコアアップデート完了。
このサイトは回復の兆しなし。2023年末からずっと投稿しているパチンコ・パチスロ搭載楽曲一覧の記事でなんとかアクセスを保っているだけ。ジャンルごとにドメインを分けて雑記ブログをやめる。パーマリンクを分かりやすく変更する。アイキャッチ画像のサイズを大きくする。等、SEOで改善できる点はいくつか思いつくけど、恐らくそんな単純な問題じゃないと思う。個人でもユーザーに役立つ記事を書けば上位表示できた時代は完全に終わった気がする。

コメント

コメントする

目次