ＣＳＳデザイン第５回「リンクカラー」

はい、ついに第５回目です。

今回はリンクカラーについて触れようと思います。

「リンクカラーってナニ？」

「リンクがどれかわかって、リンクしたときに色が変わるものだよ♪」

と、まぁ勝手な解釈をしてみました。

リンクしたとき（またはマウスが乗った時も）に色が変わるって言うことはロールオーバーの一種ってことです。

簡単なロールオーバーならばＣＳＳだけで可能となります。

まずは色の変更から行きますね♪

では解説していきます。

a:link:{ } /*クリックする前*/

a:visited{ } /*クリックした後*/

a:active{ } /*クリック中*/

a:hover{ } /*カーソルを合わせた時*/

という感じに書けばリンクすることによるロールオーバーの完成です。

実際には

a:link {color: #0000FF; }
a:visited{color: #0000FF; }
a:active {color: #0000FF; }
a:hover {color: #FFC0CB; }

というように使います。
（ちなみに私のですｗそのままコピーでも使えますよ。）


ただし、これは全てのリンクについて有効となってしまいます。

seesaaはサイト名称とかもリンクなので、「タイトルだけを変更解除したい」とか「記事内部のリンクだけにロールオーバーしたい」ということにはなりません。

「それはどうするの？」

はい、それは個別に設定することが出来ます。

ブログタイトルだけ変化したい場合。

h1 a:hover{ color:#CC33FF; }
h1 a:link{ color:#CC33FF; }
h1 a:visited{ color:#CC33FF; }
h1 a:active{ color:#CC33FF; }

のように変えたい要素（ここではh1）に　a:link{　}　等を追加します。

これで全体と個を別々にカラーチェンジすることができます。

自分の追加した項目がわかりやすいように一番下にまとめておくとか、一番上にまとめるとかするとあとで自分が何を追加したのかわかりやすいかも知れませんね♪


-p.s-
カラーの解説しかしていないですが、実際にはマウスが乗ったときだけ背景（画像や色）を表示させる・下線を表示させるということも出来ます。

簡単な操作で面白いことが出来るので試してみてはいかがでしょう(笑）