HTML入門

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

ららです。
 

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

 

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

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

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

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

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

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

 

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

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

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

 

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

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

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

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

 

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

ABOUT ME
らら
らら
ららです。2人の子供がいる40代の主婦です。コツコツとアフィリエイトにチャレンジし、月6桁の目標を達成することができました。このブログでは、同じ目標を持つあなたに、ららの知識やアドバイスをお伝えしています。お問い合わせはいつでも受け付けていますのでお気軽にどうぞ。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です