マウスが乗った時、リンクが少し、ずれるようにする方法

大変です！リンクがガタガタ、怖がってます！((((((ﾉﾟ⊿ﾟ)ﾉ

（笑）

マウス（カーソル、矢印）が乗った時、リンク（テキスト、画像）が少し、ずれるようにする方法をご紹介してみたいと思います。

※CSS編集用デザインを採用されている方向けです。

ふたとうりの方法をご紹介します。

①ブログ全体のリンクをずらす方法

この方法だと、サイドバー、メニューバー等、全部のリンク（テキスト、画像）がオンマウス時にずれます。

で、方法ですが、以下のコードをCSSの末尾に貼り付けて下さい。

/*オンマウスでのリンクが微動、範囲は全体*/

a:hover {
top:1px;
left:1px;
position:relative;
}

自分もこの方法でやってみたんですが、何故かページ送りボタンがバッタが飛び跳ねるように動き過ぎてしまいました。

自分の場合は次の方法を使ってます。

②オンマウス時、記事本体のリンクのみ、ずらす方法

以下のコードをCSSの末尾に貼り付けて下さい。

/*記事本体のオンマウス時の仕様*/
.articleText a:hover{color:#CC0000; position: relative; top: 1px; left: 1px;}

この position: relative;って位置をずらすって意味があるみたいですね。

こういう改造？カスタマイズって、人によって、うまくいったり、行かなかったりってあると思います。

参考の一つと思って頂ければと思います。

ま、でもチョコっと動くって、なんかカッコいいですよね（笑）。

ちょっとした「Webお役立ち情報」とかを主に書いてます。