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

マウスを乗せるとピコッと動く画像。リンクになっていることが直感的にわかります。 これはどうやったらできるんでしょう?そのやり方をご紹介します。

ららです。
 

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

 

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

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

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

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

やり方

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

 

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

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

※クリックすると拡大します。

 

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

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

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

※クリックすると拡大します。

 

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


この記事が役に立ったと思ったらクリックしてね。ららが喜びます。

 

 

 

こんな記事もありますよ☆ぜひ見ていってね!

 


最後まで読んでいただき、ありがとうございました。


ららのブログでは、あなたからの疑問・質問・お問い合わせを大歓迎しています。 こちらからいつでもメールを送ってくださいね。

>>ららにメールを送る

 

 

コメントを残す

サブコンテンツ

このページの先頭へ