CSSテクニック

見出しにもリンクを

リンクと言えば、マウスを乗せたとき何らかの変化(色が変わったり、斜体になったり)をするのが普通ですが、 今回のテクニックはそのような変化を一切起こさなくするテクニックです。

テクニック使用前

リンクでーす

テクニック使用後

リンクでーす

一見ただの文字のようですが、カーソルの形が変わるのでリンクを張っていることが分かると思います。

次のようなスタイルシートを書いて、適用させたいAタグにclass設定をするだけです。

a:link.title{
    color:#993300;
    text-decoration:none;
    font-style:italic;
    font-weight:lighter;
}
a:visited.title{
    color:#993300;
    text-decoration:none;
    font-style:italic;
    font-weight:lighter;
}
a:hover.title{
    color:#993300;
    text-decoration:none;
    font-style:italic;
    font-weight:lighter;
}

全部の設定を同じにしてあげればOKです。ここではclass名はtitleですが、好きなようにつけてください。 ただし、class名は3つとも同じにしないと失敗します。

当然のことですが、このテクニックは使いどころを選びます。

普通に使用してしまうと、どこがリンクなのか分からなくなって、見に来た人が激しく混乱します。 決して普通のリンクで使用してはいけません。

このテクニックは、わざわざリンクを張る必要は無いんだけど、 うっかりクリックする人がいたり、張ってあると便利かも知れないところに使用します。

そうすると、「リンク張ってあると思ったのに〜」と間違って押した人が怒るというケースが減ります。

あくまでも、張ってあると便利そうなところにだけ使用してください。


使いこなすための+α

張ってあると便利なところの1つが見出しです。

とくに、うちのサイトのように扉ページを採用しているところで利用すると効果があるでしょう。

別に色が変わる見出しでもいいんだけど、それだとちょっと落ち着きがないとか、見出しとしてどうなのか? と私は思うので、使うことをお勧めします。

間違って普通のリンクに使用しないように、必ずclass設定を行ってください。


一覧へ戻る


Last Modified 2004-11-21 © きくちゃん 2004 - All Rights Reserved