[ちょっとした小技]リンクをピコッと動かす

リンクをピコッと動かす♪

私のアレカオブログのバナーです。

ちょっとカーソルをバナーの上に置いてみて下さい。

ピコッ

とバナーが動きましたね
ついでにクリックして訪問して頂けると、私が１ポイント（１円）もらえます（笑）

次はテキストリンク。

pumoのアレカオ

こちらもカーソルを上に置くとピコッと動きます。

このようにリンクを動かすカスタマイズは「テンプレートの設定」で行います。

テンプレートによって違いは多少ありますが、リンクの設定はおおむね次のようになります。

a{cursor : pointer ;}
a:link{color : #色コード;}
a:visited{color : #色コード;}
a:active{color : #色コード;}
a:hover{color : #色コード;}


これを 

a{cursor : pointer ;}
a:link {color:#色コード;}
a:visited {color:#色コード;}
a:active {color:#色コード;}
a:hover {color:#色コード; position:relative;top:2px;left:2px; }
に変えます。 

a:hover {color:#色コード;　の後に　position:relative;top:2px;left:2px;
を書き加えるだけなんです。
最後に　『　}　 』で閉じるのを忘れないようにして下さいね。


『 position:relative;top:2px;left:2px;　』 というのが、リンクをピコっと動かすタグになります。

今の位置に対して左から2px、上から2px動かすという感じです。
2pxの数値を変えると、動きが大きくなったり小さくなったりしますよ