サイトのクリック済み・訪問済みのリンクの文字色をCSSで変えてリピーターに優しい作りにする

リンクのCSSを記述する際に、マウスが置かれた時にスタイルを適用する:hover擬似クラスは良く使うのですが、意外と忘れがちなのが:visited擬似クラスです。

これはユーザーが既にクリック済み、訪問済みの場合にスタイルを適用するものです。ユーザーからすれば、既に観覧済みの記事かどうか分かりやすいという利点があります。小説サイトやニュースサイトでは良く見かけます。

↓クリック済み、訪問済みのリンクの色を変える。

a:visited {
    color:#4B0082;
}

今までこのブログでは特に気にする必要は無かったのですが、つい最近できるだけ毎日更新を宣言してしまったので、そのとおり毎日くだらない記事も含めてブログを更新。毎日見てくれているという大変ありがたいユーザー様の為に、ブログ訪問時にまだ見ていない記事があるかどうかがパッと見で分かるようにしたかったからです。

記述時の注意点として、恐らく:hover擬似クラスを使っている方はa要素の次ぐらいに記述していると思いますが、:visited擬似クラスを使う際は:hover擬似クラスより前に記述するようにしてください。これは:hover擬似クラスより後に記述してしまうと、:hover擬似クラスのスタイルを:visited擬似クラスが上書きしてしまうためです。

a {
    color:#1e73be;
}

a:visited {
    color:#4B0082;
}

a:hover {
    color:#c80000;
}

小さな事ですが、こういうユーザビリティー向上に繋がる事をひとつひとつ大切にしていきたいと思います。