カスタマイズ

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

ららです。
 

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

 

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

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

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

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

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

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

 

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

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

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

 

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

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

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

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

 

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

無料レポートが書けなくてもメルマガを始める方法
HAPPYな仕組みダウンロード

「メルマガを始めてみたいけど読者を集めるの大変そう…」
そんなあなたへ。努力しなくっても読者さんが集まる、目からウロコの方法を伝授します(無料です)。

>>レポートをダウンロード!

COMMENT

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