リンクにマウスを載せた時押した感じにズレるブログカスタマイズ

リンクにマウスを載せた時押した感じにズレるブログカスタマイズ


テキストリンク、画像リンクなどをマウスのポインターを

載せた時にテキスト、画像などが押された感じになって、

解りやすいなと、他の人のブログ、ホームページなどを見て、

前から思っていましたが、自分でやってみると、

結構簡単にできることが分かりました。

ブログのテンプレートのCSSに下の物を追加して書きこめば良いだけでした。


意味は、マウスのポインターが載った時、

テキスト、画像の上と左に1pxの隙間が追加されて、

テキスト、画像のリンクが、右下にズレる。という感じです。

もっとズラしたい人は、1pxの1を2とか3とかにするといいです。


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


簡単なので、FC2ブログのこのブログと、

食べ物ブログのakit2の今これが食べたい通販掘り起こし大作戦。にも

同じ設定にしてみました。

ブログを見てる人に分かりやすくなってると思います。


seesaaの他のアフィリエイトブログにも同じ事をやってみようと思っています。