リンクにマウスを重ねると、リンクが下に凹む方法

リンクにマウスを重ねると、リンクが下に凹む方法をお伝えします。

ホームページでは、リンクをクリックしてもらって、いろいろなページを見てもらうことが大切です。

そのために、「これがリンクだ！」ということを、分かりやすくしてあげる必要があります。

リンクにマウスを重ねると、リンクが下に下がるようにすれば、リンクということが分かりやすくなりますよね

リンクにマウスを重ねたときに、リンクが下に凹むと、「これがリンクだ！」ということが分かりやすくなり、クリック率が高くなりますよ。

１つの方法として、ぜひ知っておいてくださいね。

■ リンクにマウスを重ねると、リンクが下に凹む方法の手順

手順１：CSSファイル（style.css）に書かれている、「a:hover」の記述を、下記のように変更する。

a:hover { color:#aa0000; text-decoration:none; background-color:#ffcc99; }
　　↓　↓　↓　↓　↓
a:hover { position: relative; top: 1px; left: 1px; }

「a:hover」という記述は、「マウスがリンクの上に重なったとき」の動作を示しています。

style.css ファイルの記述を、上記のように変更することで、「マウスがリンクの上に重なったときに、リンクが下に移動する！」という動きになります。

それでは、下記のリンクにマウスを重ねてみて、リンクが下に移動することを確認してみてくださいね。

【注意】

上記の記述は、「自分で更新できる最短ホームページテンプレート」 の、CSSファイル（style.css）に書かれている記述です。

■ ちょっとしたカスタマイズ方法

「a:hover」の記述を、「1px;」から「3px;」に変更すれば、リンクがずれる幅も広くなります。（ただ、大きく移動しすぎるのも良くないです）

また、リンクの色を変えたり、太字にすることなどもできますよ。

a:hover { color:red; font-weight:bold; text-decoration:none; background-color:#ffcc99; position: relative; top: 3px; left: 3px; }

たとえば、上記の記述を、CSSファイル（style.css）に入れると、下記のようなリンクになります。

リンクがずれる幅も広げることができますし、色も変えることができるので、自由にやってみてくださいね！（派手すぎには注意です）

■ リンクの色や見栄えはとても大切！！

ホームページの最大の特徴は、「リンク」です。１つのページから、いろいろなページにリンクを張って、つなげることで、訪問者はいろいろなページを見ることができるようになります。

だから、訪問者に、「これがリンクだ」ということを、分かりやすいようにしてあげることが重要ですよね。

そのための記述が、「a:hover」の記述であり、マウスがリンクの上に重なったときに、リンクの色を変えてあげることで、「これがリンク」ということが分かりやすくなります。

個人的には、このサイトで採用しているように、マウスがリンクの上に重なったら、オレンジ色にリンクが光る見栄えが好きなのですが、、、

自分の好みに合わせて（訪問者が分かりやすいように）、「a:hover」の記述を変えてみてくださいね。