マウスを乗せると画像が動くリンクの作り方

ららです。
　

下の画像にマウスを当ててください。

クリックすると、特典の案内ページに飛ぶんですけど、
上の方は、マウスをあてたときに、ピコッと動きましたよね。
下のボタンはびくとも動きませんでした。
　

動いた方が、
どこかに飛ぶボタンなんだな
って気がしません？

動いた方が、クリックしたくなりませんか？
　

これは、どうやればできるんでしょう？
　

マウスを乗せると画像が動くリンクの作り方

管理画面の、外観　→　テーマ編集をクリックし、
右側のリストから、これを選択。

一番下までスクロールして、この文を追加。
/*　マウスを乗せると画像が動く
───────────────────────── */
div.img-move a:hover {
position: relative;
top: 3px;
left: 3px;
}

こんなふうになります。最後に更新ボタンを忘れずに。

動かしたい画像を、このコードで囲みます。
<div class="img-move">　～～　</div>
　

囲む画像は、aタグ（リンクのタグ）がついていないと動きません。
　

たとえば、こんな感じです。

これで、画像がピコッと動くようになります。
意外とカンタンなので、ぜひチャレンジしてみてくださいね＾＾