リンクをクリックすると、リンクがボタンのように下がる方法

リンクをクリックすると、リンクがボタンのように下がる方法をお伝えします。

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

たくさんのページを見てもらった方が、売上も上がりますし、検索エンジンの評価も高くなるからです。
リンクをクリックすると、リンクがボタンのように下がるようにすれば、押し心地が良くなります。そうすると、サイト内の回遊率が高くなって、SEO対策につながるはずです！

リンクをクリックしたときに、リンクがボタンのように下がると、「押し心地」が良くなるので、意外とおすすめな方法だと思いますよ。

個人的には、けっこう気に入っている方法なので、良かったら参考にしてくださいね。

■ リンクをクリックすると、リンクがボタンのように下がる方法の手順

手順１：CSSファイル（style.css）に、下記のソースを入れる。

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

「a:active」という記述は、「リンクをクリックしたとき」の動作を示しています。

style.css ファイルに、上記のソースを入れることで、「マウスでリンクをクリックしたときに、リンクが下に下がる」という動きになります。
（上記のソースは、「a:hover」の下に入れるようにしてください）

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

リンクをクリックすると、リンクが少し、下に下がりますよね？
リンクが、ボタンのような押し心地になる、という技になります。

■ けっこう、厄介な技でもある・・

個人的には、この技（リンクをクリックすると、リンクがボタンのように下がる方法）は好きなのですが、、、この技を使うと、いろいろなところに、影響が出る可能性があるのですよね。

たとえば、「スライドショー」 がうまく動かなくなったり、「上に戻るボタン」がうまく動かなくなったり、などです。

リンク関係（ボタン関係）の個所に、影響が出てしまう可能性があるので、ちょっと注意が必要になります。

あと、この技（リンクをクリックすると、リンクがボタンのように下がる方法）は、Internet Explorer のブラウザだと、うまく動かないこともあります。

ブラウザによっても、ちょっと動作が異なるので、覚えておいてください。
（つまり、ちょっと扱いづらい技、ということです・・）