マウスカーソルを乗っけたらリンクが動くようにする

マウスカーソルを乗っけたら、リンクが動くようになっているサイトをよく見かけていましたが、ひそかにうらやましがっていました(笑)。
このたび、めでたく方法がわかりましたので、ご紹介いたします。



マウスカーソルを乗っけたら、リンクが動くようになっているってどういう意味?
と思われる方もいらっしゃるかもしれません。

↓こんなヤツです。




やり方を発見したのはこちら。
MovableTypeカスタマイズをする人なら、
知らない人はいないかもしれないサイトのひとつ「小粋空間」さん。

初めてご紹介させていただく記事は、こちらです。

リンクをマウスオン時にずらす

文字や画像のリンクにマウスをポイントすると表示が右下にずれるという技です。我楽さんのサイトで使われているのが気に入って、使ってみました。とりあえずタイトル文字と右下のバナーに適用させています。こういう小技は洒落ていていいですね。 カスタマイズ方法は、スタイルシートで該当するa:hoverの中に

position:relative; top:1px; left:1px;

を入れればOKです。


わーい\( ^∇^ )/早速やってみました~。




小粋空間」さん、他の記事も見てまわりましたが、すごく奥が深いです。

これからもMovableTypeの事をいろいろと勉強させていただきたいと思います。

ちょっと大技が多くて尻込みしてしまったので、まずは小技からご紹介させていただきました(笑)。



@ 2006年02月14日