■リンクテキストの色を変えるには
スタイルシートに以下のプロパティを記述します。
a:link { color : color-code ; } /* 通常の色 */
a:visited { color : color-code ; } /* 訪問済みの色 */
a:active { color : color-code ; } /* 選択した時の色 */
a:hover { color : color-code ; } /* マウスを乗せた時の色 */
color-code には透明にしたい色を、#ff3366 といった色コードや red などのシステムカラーで指定* します。
フォントの色だけに限らず、例えば background-color （背景色）や background-image （背景画像）を指定することもできます。要するに、通常の CSS 宣言文をほとんど使えます。ただし、極端な設定をするとリンクの状態によってデザインが崩れる場合もあるので注意してください。
■リンクの下に下線を表示しないようにする
スタイルシートの text-decoration を用います。
a:link { text-decoration : none ; }
a:visited { text-decoration : none ; }
a:active { text-decoration : none ; }
a:hover { text-decoration : underline ; }
この例では、通常のリンクテキストに下線は表示されませんが、マウスがリンクテキストの上に乗った場合のみ、リンクテキストに下線が表示されます。
text-decoration には以下の種類がありますので、お好きなものをお選びください。
none --> なし
underline --> 下線
overline --> 上線
line-through --> 打ち消し線
blink --> 点滅
inherit --> 親要素からの継承
■マウスを乗せた場合だけ太字にする
スタイルシートの font-weight を用います。
a:hover { font-weight : bold ; }
font-weight には、normal , bold , bolder , lighter などがあります。
などなど、スタイルシートのプロパティが許す限り、様々な表現ができます。こんな感じで、普段目立たないリンクテキストをデザインすれば、クリックしてもらえるかもしれません。いかがでしょうか。
ちなみに私の場合は、この記事で紹介している記述とは少し違っています。
■うちのブログでは、以下の記述を採用しています。
A { color: #0080ff; text-decoration: none; background: none;}
A:link { color: #0080ff; text-decoration: none; background: none;}
A:link:hover { color: #ff0000; text-decoration: none; background: none;}
A:link:active { color: #00ff00; text-decoration: none; background: none;}
A:visited { color: #0080ff; text-decoration: none; background: none;}
A:visited:hover { color: #ff0000; text-decoration: none; background: none;}
A:visited:active { color: #00ff00; text-decoration: none; background: none;}
リンクテキストの変化に不整合があった場合を補うため、このように業と複雑化させています。<a name="#hogehoge"> といった href 属性のない <a> タグでもスタイルを変化させたい方は、この記述をお勧めします。