ブログの表示速度に問題があるとき、PageSpeed Insightsの計測結果を参考にする人は少なくないと思います。
かく言う私も先日、更なる高速化を目指し、サーバーやタグマネジャーの設定を変えたり、CSSをカスタマイズしたりしました。
（その時の試行錯誤については、こちらの記事をご覧ください。）
もちろん、すぐに効果が出ない対策もありますが、せっかちな私はさっそく「PageSpeed Insights」で計測し直し、ふと「ユーザー補助」のスコアが低いことに気づきました。
調べてみると、「パンくずリストが見づらい（コントラスト比が足りない）」というのが、問題（改善点）の1つとして提示されています。
Cocoonのデフォルトのパンくずリストでは、文字やアイコンに薄いグレーが使われています。個人的にはその柔らかい感じが好きなんですが、Google（そして読者）からは「視認性が低い」と判断されてしまうようです。
そこで今回は、PageSpeed Insightsの「ユーザー補助」スコアを改善し、読者にとって圧倒的に見やすくなるパンくずリストのカスタマイズCSSをご紹介します。
「!important」を使わない安全なコードで、追加CSSにそのままコピペするだけで簡単に設定できます。
なお、今回紹介している色は私のサイトのテーマカラーに合わせたアースカラーなので、別の色がいいという人は、カラーコード(#xxxxxx）部分を変更してください。
パンくずリストの色を変えるコピペコード
以下が、私が実際に使った「!important」を使わない安全なカスタマイズCSSコードです。そのまま、またはカラーコード(#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; /* アイコンの色指定 */
}読者に優しい「色選び」のポイント
私のサイトでは、ラベル（文字）もアイコンも通常時は「暗い茶色（#331c1c）」、マウスオーバー（ホバー）の際には「濃い目のオレンジ（#d35400）」というアースカラーを採用しています。
もしご自身のブログに合わせて色をアレンジする場合は、次の「読者に親切な色選びのポイント」を考慮してみてください。
- 十分な「濃さ」をキープする：
薄めの色はNGです。スマホや明るい屋外でもしっかり文字が読めるよう、通常時もホバー時も「濃いめの色」を選びましょう。 - 「訪問済み（既読）」を連想させる色は避ける：
Webデザインの世界では、一般的に「赤紫」などは「すでに訪問したことがあるリンク」として認識されやすい色です。読者の混乱を防ぐためにも、ホバー色には青や緑、オレンジなど、サイトのテーマカラーに合ったフレッシュな色を選ぶのがおすすめです。
CSSの貼り付け手順（画像付き）
コピーしたコードは、WordPressの「追加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にどんな対策を指示され、どれが実際に効果があったのか、試行錯誤のメリットや注意点をまとめています。
