賢威の「公開日・更新日」の文字色を変更する方法

※当サイトにはプロモーションが含まれています。

にゃのらいと

ページスピードインサイトで確認したら、ユーザー補助の項目で、「背景色と前景色には十分なコントラスト比がありません」と表示されたにゃ

ページスピードインサイトを使って、自分のサイトのパフォーマンスを測定している人もいるかと思います。

ページスピードインサイトでは、パフォーマンス、ユーザー補助、おすすめの方法、SEOについて、どれだけ最適化されているかを測定することができます。

【公式】PageSpeed Insightsを確認する

今回、ユーザー補助の項目で、「公開日・更新日」の文字の色が引っ掛かっていたので、修正することにしました。

なお、ワードプレス（WordPress）テーマ「賢威」のデフォルト設定だと、表示される文字色は、#adadadなので、下記のように表示されます。

更新日 2025年1月4日 | 公開日 2024年4月1日

しかし、背景色が白（#fff）の場合、この配色だと、ページスピードインサイトでは怒られてしまうので、文字の色を#575757に変更しました。

更新日 2025年1月4日 | 公開日 2024年4月1日

にゃのらいと

確かに、下の方が見やすいにゃ

なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

「公開日・更新日」の文字の色を変更するCSS

賢威の「公開日・更新日」の文字の色を変更するCSSです。

CSS

/* 公開日・更新日 */
.entry_status .entry_date_item {
color: #575757;
}

上記のコードを、追加CSSに記載してあげればOKです。

補足：ワードプレスの「追加CSS」の編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

なお、追加CSSに記載する際に、ブラウザ上で全角から半角に変換すると、エンコーディング（文字コード）の関係で、不具合が発生することがあります。

その為、編集する時は、メモ帳などに貼り付けたものを編集をしてからペーストするようにしましょう。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

強制リロードをすることで、ブラウザがキャッシュを無視し、最新のコンテンツを再読み込みします。

なお、コントラスト比をチェックするサイトの使い方について、まとめた記事が下記となります。