Google Chromeで訪問済みリンクの色が変わらない理由と対処法

Google Chromeで訪問済みリンクの色が変わらない問題に直面した方は多いのではないでしょうか。特にStylusを使用してカスタマイズした場合、他のブラウザでは問題なく動作するのに、Chromeだけが反応しないことがあります。本記事では、その原因と解決方法について解説します。

1. Google Chromeの訪問済みリンクに関する制限

Google Chromeには、訪問済みリンクのスタイル変更に制限があります。実は、Chromeはセキュリティ上の理由から、訪問済みリンクの色を変更することを制限しています。これは、JavaScriptやCSSでページの状態をトラッキングし、ユーザーのプライバシーを保護するためのものです。

そのため、通常は:visitedで指定した色が効かないことがあります。特に、他のブラウザ（FirefoxやEdge）では問題なく機能しても、Chromeでは動作しない場合があります。

2. なぜ他のブラウザでは色が変わるのか？

FirefoxやMicrosoft Edgeでは、訪問済みリンクのスタイル変更が問題なく動作します。これらのブラウザは、Google Chromeとは異なるプライバシー保護のアプローチを取っており、訪問済みのリンクのCSSスタイルを自由に変更できるため、ユーザーがカスタマイズしたスタイルが反映されます。

一方、Chromeはそのセキュリティ機能として、訪問済みリンクの情報を外部から簡単にアクセスできないようにしています。これが、あなたが見ているリンクの色変更が反映されない原因となっています。

3. Stylusで設定したCSSコードの見直し

StylusでCSSを設定している場合、以下のようなコードを使用して訪問済みリンクの色を変更していますが、Chromeでは上手く機能しないことがあります。

a:visited { color: purple; }

このCSSは他のブラウザでは問題なく機能しますが、Chromeでは、:visitedに関して特定のプロパティ（例えばbackground-colorやcolor）に制限があるため、反映されないことがあります。Chromeで確実に動作させるためには、色だけではなく、リンク自体の構造に関する他のスタイルも設定する必要があります。

4. 解決方法：Chromeで訪問済みリンクの色を変えるには？

Chromeでも訪問済みリンクの色を変える方法には、いくつかのアプローチがあります。まず、以下のコードを試してみてください。

a:visited { color: purple !important; }

このように、に!importantを追加することで、Chromeでもスタイルが強制的に適用される場合があります。ただし、この方法でも完全に反映されないことがあるため、他のスタイルの変更（例えばborderやbackground）を追加して、他の要素も変更するとよいでしょう。