PageSpeed Insightsで**「背景色と前景色には十分なコントラスト比がありません」という警告が消えずに困っていませんか？Cocoonテーマでは、投稿下に表示されるページネーションナビ（次のページ・ページ番号）が原因で、このエラーが出ることがあります。この記事では、「次のページ」を一度消した方法**と、追加CSSで色を変更してコントラストエラーを解消する方法を、初心者の方でも分かるように実例付きで解説します。
一番下の「次のページ」を消す
PageSpeed Insightsで「背景色と前景色には十分なコントラスト比がありません」という指摘がずっと出ています。
前までここに「次のページ」もエラーが出ていたのですが色の替え方がわからず「次のページ」だけ追加CSSで消去していました。消去の仕方は、cocoonのダッシュボードの「外観」の中の「追加CSS」に👇のCSSを貼り付けるだけです。
.pagination-next {
display: none;
}
「次のページ」の消し方手順（cocoonの場合）
１、ダッシュボード＞外観＞追加CSS
2,追加CSSに先ほどのコードをそのまま貼り付け上の公開をクリックする
＊コードが何か入っていたら一番下でも大丈夫です
使用したCSS👇
.pagination-next {
display: none;
}
３、「次のページ」が消えました
ページネーションナビの色を変える
今回ページネーションナビの色の変え方がわかったので、もう一度「次のページ」を戻して色を変えていきます
/*ページネーション*/
.pagination-next-link{
background-color:#db7093;
color:#f4d0600;
}
.pagination-next-link:hover {
background-color:#e6e6fa;
color:#db7093;
}
.page-numbers {
background-color:#db7093;
color:#4d0600;
}
.pagination .current {
background-color:#e6e6fa;
color:#db7093;
}
.pagination a:hover {
background-color:#e6e6fa;
color:#db7093;
}
意味は
.pagination-next-link:hover { →「次のページ」にマウスを置いたときの
background-color:#e6e6fa; →背景色
color:#db7093; →文字色
}
.pagination .current { →下のページナビゲーションの現在のページの
background-color:#e6e6fa; →背景色
color:#fdb7093; →文字色
}
.pagination a:hover { →下のページナビゲーションにマウスを置いたときの
background-color:#e6e6fa; →背景色
color:#db7093; →文字色
}
数字を変えると色が変わります色番号は色検索で簡単に探せるので自分色にカスタマイズしてみると楽しいかもですね！私は、PageSpeed Insightsで「背景色と前景色には十分なコントラスト比がありません」という指摘が出ているので、色をカスタマイズします。
このCSSを先ほどの「ダッショボード」の「外観」の「追加CSS」に貼り付けていきます
まとめ
ページの一番下にある「次のページ」とページのボタンこのネーミングわかりずらいですよね。ここはページネーションナビといいます。今回は、このページネーションナビに「背景色と前景色には十分なコントラスト比がありません」という指摘を追加CSSで修正しました！他にもいろいろとカスタマイズ出来るみたいですが、私はPageSpeed Insightsのエラーが修正できればよかったので、この、CSSにしました。でも、合格するまで何度か色を変えないとダメでした。色はたくさんあるので、似たような色でも微妙に合格基準があるみたいです。何度か合格するまで変えてみてください！もし私のようにPageSpeed Insightsで「背景色と前景色には十分なコントラスト比がありません」という指摘ある場合、色を合格するまで変更するとスピードが上がりますよ！
画像のサイズ変更の仕方はこちらから👇
コメント