←左のメニュー、リンクの下線がなく、マウスを乗せると色が変わりますよね。 このような感じにするタグはこちら↓。<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;} |