ブログの表示速度に問題があるとき、PageSpeed Insightsの計測結果を参考にする人は少なくないと思います。
かく言う私も先日、更なる高速化を目指し、サーバーやタグマネジャーの設定を変えたり、CSSをカスタマイズしたりしました。
（その時の試行錯誤については、こちらの記事をご覧ください。）
もちろん、すぐに効果が出ない対策もありますが、せっかちな私はさっそく「PageSpeed Insights」で計測し直し、ふと「ユーザー補助」のスコアが低いことに気づきました。
調べてみると、「パンくずリストが見づらい（コントラスト比が足りない）」というのが、問題（改善点）の1つとして提示されています。
Cocoonでは、パンくずリストの文字やアイコンに、デフォルトで薄いグレーが使われています。個人的にはその柔らかい感じが好きなんですが、Google（そして読者）からは「視認性が低い」と判断されてしまうようです。
そこで今回は、WordPressのCocoonテーマを利用している人向けに、PageSpeed Insightsの「ユーザー補助」スコアを改善し、読者にとって圧倒的に見やすくなるパンくずリストのカスタマイズCSSをご紹介します。
「!important」を使わない安全なコードで、追加CSSにそのままコピペするだけで簡単に設定できます。
なお、今回紹介している色は「まなまなライフ（当サイト）」のテーマカラーに合わせたアースカラーなので、別の色がいいという人は、カラーコード(#xxxxxx）を変更してください。
パンくずリストの色を変えるコピペコード
当サイトで実際に使っているのは、「!important」を使わない安全なカスタマイズCSSコードです。そのまま、またはカラーコード(color: 後の #xxxxxx）を変更してご利用いただけます。
/*-------------------------------------------
パンくずリストの色変更
-------------------------------------------*/
/* 通常時の文字とリンクの色 */
.breadcrumb,
.breadcrumb a {
color: #331c1c; /* 文字の色指定（暗い茶色） */
}
/* ホームのアイコン色 */
#breadcrumb.breadcrumb .breadcrumb-home .fa.fa-home.fa-fw {
color: #331c1c; /* アイコンの色指定 */
}
/* カテゴリのアイコン色 */
#breadcrumb.breadcrumb .fa.fa-folder.fa-fw {
color: #331c1c; /* アイコンの色指定 */
}
/* マウスオーバー時のテキスト（文字）の色 */
.breadcrumb a:hover {
color: #d35400; /* 文字の色指定（濃いオレンジ） */
}
/* ホームの文字にマウスが乗ったとき、ホームアイコンも連動（内側にあるため） */
#breadcrumb.breadcrumb .breadcrumb-home:hover .fa-home {
color: #d35400; /* アイコンの色指定 */
}
/* カテゴリの文字にマウスが乗ったとき、手前（外側）にあるフォルダアイコンだけを連動 */
#breadcrumb.breadcrumb .breadcrumb-item:has(a:hover) .fa-folder {
color: #d35400; /* アイコンの色指定 */
}なお、文字を太字に、さらにはっきりさせたい場合は、一番最初のコードを以下のコードに置き換えるといいかもしれません。（当サイトでは使用していません。）
/* 通常時の文字とリンクの色 /
.breadcrumb, .breadcrumb a {
color: #331c1c; / 文字の色指定（暗い茶色） */
font-weight: bold;
}
読者に優しい「色選び」のポイント
当サイトでは、カスタマイズ後、ラベル（文字）もアイコンも通常時は「暗い茶色（#331c1c）」、マウスオーバー（ホバー）の際には「濃い目のオレンジ（#d35400）」というアースカラーを採用しています。
もしご自身のブログに合わせて色をアレンジする場合は、次の「読者に親切な色選びのポイント」を参考にしてみてください。
- 十分な「濃さ」をキープする：
薄めの色はNGです。スマホや明るい屋外でもしっかり文字が読めるよう、通常時もホバー時も「濃い目の色」を選びましょう。 - 「訪問済み（既読）」を連想させる色は避ける：
Webデザインの世界では、一般的に「赤紫」などは「すでに訪問したことがあるリンク」として認識されやすい色です。濃い目の色がいいとはいえ、ホバー色には青や緑・オレンジなど、色の変化が明確にわかる、読者を混乱させない、サイトのテーマカラーに合った明る目の色を選ぶのがおすすめです。
＼使いたい色のカラーコードがわからないときはSnipping Toolのカラーピッカーが便利！／
CSSの貼り付け手順（画像付き）
上でコピーしたコードは、「追加CSS」に貼り付けるだけで簡単に反映されます。「子テーマのCSSをいじるのはちょっと…」という初心者の人にも手を出しやすいカスタマイズです。
Step1：カスタマイズ画面を開く
WordPressの管理画面（ダッシュボード）＞左メニューの [外観] ＞ [カスタマイズ] をクリック。
Step2：「追加CSS」を選択する
カスタマイズ画面の左メニューの一番下にある [追加CSS] をクリック。
Step3：コードを貼り付けて公開する
入力エリア（すでに他にコードを入れている場合は一番下の行）に、先ほどコピーしたCSSコードを貼り付け、画面右上にある [公開] ボタンをクリック。
公開が完了すると、ボタンが「公開済み」に変わります。
最後にスマホやPC画面で実際にパンくずリストの文字やアイコンの色が変わっているかチェックしてみてください。
レンタルサーバーに「ConoHa WING」をお使いの場合、WAF（セキュリティ機能）がOnになっていると、セキュリティシステムによって「不審なアクセス」と誤判定され、エラーが表示されることがあります。
対処法：
- WordPressの管理画面（ダッシュボード）＞左メニューの [ConoHa WING] ＞ [設定] をクリック。
- ［セキュリティ設定］内の［Conoha WING WAF設定］にある［利用設定］横のチェックを外し（［Off］にし）、［設定を更新する］をクリック。
- カスタマイズ画面で、再度 [公開] ボタンを押す。
- 保存（公開）が完了したら、必ずConoHaのWAFを [ON] に戻し（［利用設定］横にチェックを入れ直し）、［設定を更新する］をクリック。
★ [ConoHA WING x Cocoon] なら、ダッシュボードから簡単に設定変更が可能！ ★
＼WINGパック（12か月以上）の申し込みで、初回お支払い料金から5000円割引キャンペーン中／
まとめ：見やすいパンくずリストでユーザー補助スコアを改善しよう！
今回は、Cocoonのパンくずリストのラベル（文字）とアイコンの色を、通常時とマウスオーバー時の両方で「!important」なしに安全にカスタマイズするCSSを紹介しました。
実は、この記事を書くにあたって、ネット上にある「パンくずリストのラベル・アイコンの色変更」の解説記事を探しまくりました。けれど、特にアイコンの色変更（それもマウスオーバー時）については驚くほど情報が少なく、唯一見つけた「コピペOK」のコードも、マウスオーバーの際にフォルダーアイコンの色が変わらない（連動しない）という結果に終わりました。
そこで、AIモードの力を借りて原因を突き詰めてみたところ、Cocoonの「ホームアイコン」と「カテゴリー（フォルダー）アイコン」では、HTMLの階層構造が根本的に異なるらしいことがわかりました。
今回ご紹介したコードは、
- 右側の空白スペースでのフライング誤反応：パンくずリストにマウスオーバーしていないのに、行全体のパンくずリストの色が変わる
- 手前アイコンの誤作動：一番最後のラベル（文字）にマウスオーバーしただけなのに、その前のラベルも含め、パンくずリスト全体の色が変わる
などの失敗コードを散々試し、検証を重ねた末に、ようやくマウスオーバーした場所だけが連動するようになった決定版です。
パンくずリストを「見やすい色（暗い茶色や濃いオレンジ）」に整えることは、表示速度の改善には直接関係ないかもしれませんが、PageSpeed Insightsの「ユーザー補助」スコアを改善し、Googleと読者の両方から評価されるブログ作りの重要な一歩になります。
ぜひ今回のコードをコピペして、あなたのブログのアクセシビリティ向上に役立ててください！
今回のカスタマイズのきっかけとなった「AIモードを使ったブログ高速化」の舞台裏はこちら。AIにどんな対策を指示され、どれが実際に効果があったのか、試行錯誤のメリットや注意点をまとめています。
