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

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

ららです。
 

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

 

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

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

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

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

やり方

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

 

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

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

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

 

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

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

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

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

 

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

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

 

アドセンス関連記事


外注マスタープログラム


ららサポート

 




最後まで読んでいただき、ありがとうございました。
このブログを「いいな」と思ったら、
下の白いボタンを、1回クリックしてくださいね。
ららに一票入って、人気ブログランキングに飛びます
↓ ↓ ↓

ありがとうございます☆ あなたの1票が、励みになってます^^

 

この記事はいかがでしたか?
ららは、あなたのお役にたてる記事の配信を心がけています。
「こんな記事を書いてほしい」「聞いてみたいことがある」
そんな場合は、こちらからいつでもメールを送ってください。
>>ららにメールを送る

 

 

コメントを残す

サブコンテンツ

このページの先頭へ