編集： base.css
画像やリンクの上に、マウスが行くと、上下に動くカスタマイズです。
文字リンクは、マウスが行くと文字色が変わったりしますが、画像は何もアクションを起こさないのは、やや物足りない感じがしませんか？
今回は、画像やリンクにマウスが行くと、上下に動くカスタマイズです。
カスタマイズといっても、ものすごく簡単で、以下のコードをbase.cssに付け足すだけです。
a:hover { top:6px; position:relative; }base.cssに付け足して保存します。キャッシュされた画像とファイルを削除して確認してみてください。
上のコードは下に6px動かしますが、数値を変えれば、動く幅も変更できます。
右に動かす場合はtopをleftに、右下なら
a:hover { top:6px; left:3px; position:relative; }というように、コードを付け足します。
マウスが行くと、文字に3px、下に6px分移動します。
右にはleft、左にはright、下にはtop と逆のような感じですが、
left＝左から6px分動く
といた感じで覚えておくとよいでしょう。
