リンクの下線を変更する

リンクはそのままだと味気ない割りに、 とても重要というか。。。
ページにたくさん出てくるので、 デザインに影響を与えますよね。
ページになじませたい場合に、 CSSを使ってリンクの見た目を変更することが出来ます。

<head>〜</head>の間に

<style TYPE="text/css">
<!--

-->
</style>


と書いてから、以下の4行を入力しましょう。

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active text-decoration:none;}
これでリンクの下線がはずれます。

 

リンクの下線を点線にしたい場合は、
a:link {border-bottom: 1px dotted #000000;} /* 黒い点線*/
a:visited {border-bottom: 1px dotted #000000;} /* 黒い点線*/
a:hover {border-bottom: 1px dotted #000000;} /* 黒い点線*/
a:active {border-bottom: 1px dotted #000000;} /* 黒い点線*/
と記述します。


リンクの下線を色々な色の直線にしたいなら、
a:link {border-bottom: 1px solid #F60;} /* オレンジ色 */
a:visited {border-bottom: 1px solid #000;} /* 黒色 */
a:hover {border-bottom: 1px solid #36C;} /* 青色 */
a:active {border-bottom: 1px solid #6C0;} /* 緑色 */
と書きます。

 

応用次第でとても色々なバリエーションの見た目になります。
あなたのHPにマッチした色になれば、
クリックしてくれる方が増えるかもしれませんね。

素材のトップへ

スポンサードリンク

スポンサードリンク

SOZAI | 素材

その他