リンクの小技 

【 当サイトで使用しているリンクあれこれ 】

←左のメニュー、リンクの下線がなく、マウスを乗せると色が変わりますよね。
このような感じにするタグはこちら↓。<head>〜</head>の間に入れてください。
ここで紹介しているタグは細かく設定できるようにしたものです。

<STYLE TYPE="text/css">
<!--
a:link {text-decoration:none; font-size: 8pt; color:#CC9933 }
a:visited {text-decoration:none; font-size: 8pt; color:#CC9933 }
a:hover {text-decoration:none; font-size: 8pt; color:#FF9966 }
-->
</STYLE>

【 タグの説明 】

link・・・まだ訪問したことのないリンクの設定(未訪問)
visited・・・既に訪問したことのあるリンクの設定。
hover・・・マウスを乗せた時の設定。
font-size・・・ここの数字を変更することでリンクの文字のサイズを変えます。
color・・・文字の色です。


【 リンクの下線について 】

上記のタグを見てください。上記のタグは下線を全て消す設定になっています。
text-decoration・・・ここの部分で下線の設定を行います。

リンク下線を消す場合・・・none
リンクの下線を出す場合・・・underline

ちなみにリンクの下線を全部出す場合はtext-decoration部分を消して構いません。


【 リンク部分の背景色をつける 】

当サイトのLINKの素材検索ページに使用しています。
触れるとリンクの背景色がピンク色になりますよね。
このようにするにはタグにbackgroundを追加して背景色を指定します。

a:hover {text-decoration:none; font-size: 8pt; color:#FF9966; background:#ffe6cc}
↑上のタグだとマウスが乗った際に背景色がつきます。

つまりはこんな感じ。マウスを乗せてみて→cotton

【 リンクに触れると動く 】

当サイトの上の方を見てください↑

小さくて可愛らしい検索サイトへのリンクがありますよね。
マウスで触れると動くのがわかりますか?

こんな感じにするにはマウスを乗せた時(hover)の設定部分にタグを付け足します。
それがこれ→ position:relative;top:2px;left:2px;

設定例のタグはこちらです↓
a:hover {text-decoration:none; font-size: 8pt; color:#FF9966; position:relative;top:2px;left:2px;}