画像やテキストリンクをカクッと動かす設定方法

画像リンクやテキストリンクにマウスカーソルを合わせたとき、
カクッと右下に少し動くのって見たことありませんか?

例えばこういうやつです。

↓↓↓

トップへ戻る

 

これ、動くとなんだかクリックしたくなりませんか?

動かないよりは目に留まりやすいですし、
その分多くの記事を見てくれそうな気がしますよね。

 

「僕も自分のブログに取り入れたいなー」

 

と思い、いろいろと探し回っていたのですが、
なかなかうまくいかなかったんですよね。

 

しかーし、やっとうまくいく方法を探すことができたので、
その方法をあなたに紹介したいと思います。

1分程度でできるので、
サクッとやってみてくださいね^^

 

設定方法

リンクを動かす

 

設定はすごく簡単です。

 

あなたのブログのHTMLの<head>~</head>の部分、
この部分に以下のタグを入力するだけです。

<style type=”text/css”>
<!–
a:link {
text-decoration:underline;
color:#0033cc;
}
a:visited {
text-decoration:underline;
color:#0033cc;
}
a:active {
text-decoration:underline;
color:#0033cc;
}
a:hover {
text-decoration:underline;
color:#0033cc;
position:relative;top:2px;left:2px;
}
–>
</style>

 

以上。

リンクの部分が動くようになっているはずです。

 

</head>の直前に入れるとわかりやすくておススメです。

 

僕の場合はこれでうまくいきました。

今までうまく出来なかったので、
嬉しくて思わず何回もマウスを乗せてはずしてを繰り返しましたね(笑)

 

ちなみにワードプレステンプレート【リファイン】をお使いの場合、

【リファイン】リンクや画像をカクッと動かす設定方法

をご覧ください。






今日も訪問ありがとうございます!

ブログランキングに参加しています。
応援の為にクリックしてくれると跳んで喜びます。

わぁぁぁぁい!!!

今後とも当ブログをよろしくお願いします!
↓↓↓↓
にほんブログ村 小遣いブログ ネットビジネス起業・独立へ

そしてこちら、拡散していただけるとさらに喜びます!
↓↓↓↓

のびのびした自由な生活を送るメルマガ配信中

ふみたんと一緒に自由を満喫する世界を目指しませんか?あなたの参加をお持ちしています。

コメントを残す