リンクの色はデフォルトだとブラウザ固有のものが使われます。
あるいはWordPressなどのCMSを使っているなら、テーマとかで統一された色です。
でも一部のリンクではホバー時や訪問済みの色を変えたいこともありますよね。
そこでここではCSSだけでリンク色を変えるテクニックについてまとめました。
訪問済みのリンク色を変える
訪問済みリンク色はデフォルトだと青紫みたいな色
この色を変えるには :visited 疑似クラスを使います。
その名の通り訪問済み(visited)な要素に対してCSSを適用するクラスです。
例えば次のようなリンクタグを作ったとしましょう。
1 | <a class="link" href="https://example.com/">訪問済みの色を変えたリンク</a> |
分かりやすく link というクラス名をつけてます。
このリンクに対して訪問済みの色をカスタマイズしているのが次のCSS
1 2 3 | .link:visited{ color: purple; } |
.link:visited のようにセレクタの後に疑似クラスをくっつけるだけです。
これで訪問済みのリンク色がデフォルトから purple になります。
ホバー時のリンク色を変える
マウスなどがホバーしたときのリンク色はデフォルトだと青
このホバー時の色を変えるには :hover 疑似クラスを使います。
使い方は先ほどの:visited疑似クラスと全く同じです。
例えば次がホバー時のリンク色を darkblue に変更しているCSS例
1 2 3 | .link:hover{ color: darkblue; } |
これだけでホバー時にリンク色が指定した色に変わります。
ただし１つ注意すべきことがあるとすれば
「:hover疑似クラスは:visited疑似クラスより後に書いた方がいい」
ということ
例えば次のようなCSSを書いたとしましょう。
1 2 3 4 5 6 7 | .link:hover{ color: darkblue; } .link:visited{ color: purple; } |
もしリンクが訪問済みだった場合、ホバーするとリンク色は purple になります。
:hover を先に書いてしまったのでvisitedに上書きされてしまう訳です。
なのでそれを回避するには :hover は :visited の後に書くようにしましょう。
1 2 3 4 5 6 7 | .link:visited{ color: purple; } .link:hover{ color: darkblue; } |
これでホバー時と訪問済みの両方のリンク色が反映されるようになります。
jQueryからリンク色を変えるには？
ここまでCSSのみでリンク色を変える方法について紹介しました。
ちなみに同じことはjQueryを使っていてもできます。
ただし次のように直接疑似クラスを指定するのはダメです。
1 2 3 4 | $(function(){ $('a:visited').css('color', 'purple'); $('a:hover').css('color', 'darkblue'); } |
そもそもjQueryでは疑似クラスはサポートされてないので、こういう書き方はNG
なのでjQuery側で疑似クラスを扱うには少し工夫が必要です。
そのテクニックについては次でまとめました。
もしどうしてもjQuery側で疑似クラスを使いたいなら、この手法が役立つと思います。
リンク・ボタンのカスタマイズ関連記事
ここで紹介したCSSみたいに、リンク・ボタンのカスタマイズ頻度は多いです。
なので最後に、役立つリンク＆ボタンのカスタマイズ術を関連記事で紹介します。
特にデザイン関係で役立つのは、次記事で紹介したテクニック
手順もほんの少しのCSSを追加するだけ。簡単にできるので是非お試しください。
ここまでのまとめ
- 訪問済みリンク色を変えるリンクセレクタに対して :visited 疑似クラスを指定
- ホバー時のリンク色を変えるリンクセレクタに対して :hover 疑似クラスを指定
ただし訪問済みと併用する場合は !important を使用
デフォルトとは違ったリンクを作りたいときに役立つと思います。
以上CSSでリンク色を変えるテクニックについてまとめました。
