カーソルが乗った時、リンクがずれるようにするには

こんばんは。

リンクにカーソルが乗った時に、そのリンクが
少しずれるようにする方法を御紹介します。

カーソルを乗せてみて下さい（↓）。

やさしいアメブロカスタマイズ！と女性タレント画像


わてくちめのブログ、ブログ記事内のリンクは、
上のようにカーソルが載ると少しずれる設定をしてます。

このほうが、これはリンクですよ～！って、
ブロブ閲覧者さんにも解り易くて良いのではと
思います。

他にも、サイドバーやメッセージボードのリンクも
全部ずれるように設定する仕方もあったんですが、
何故か、このブログの場合、ページ送りボタンが、
バッタのように飛び跳ねてしまいましたww

で、記事内のリンクだけ、この設定をしてます。

記事内のリンクにカーソルが乗った時に少しずれるようにする方法

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

以下のコードをコピーして、ＣＳＳの末尾にペッ！と
貼り付けて下さい^^;

/*記事内リンクがオンマウス時にずれる-08-16*/
.articleText a:hover{color:#CC0000; position: relative; top: 1px; left: 1px;}

・赤字の箇所がオンマウス時のテキストリンク
の色です（上の場合は、少し暗めの赤）。

・ position: relative;は位置をずらすって
意味だと思います。

・top: 1px; left: 1px;は上から1px、左から1px
つまり右下へ1pxづつ、ずらすって意味だと思います。

このpx値をあまり大きくすると、崩れたような感じに
なってしまいますので、１～３位が適当ではないかと
思います。

尚、この設定をすると画像リンクもオンマウス時に
ずれるようになります。


よかったら、試してみてください。


☆ブィブィ　o(^_^)o

パラマウントニャンコ

がおぉぉぉ～～！！