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

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

ららです。
 

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

 

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

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

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

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

やり方

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

 

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

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

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

 

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

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

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

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

 

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

この記事を読んだあなたには、こちらの記事もオススメです☆

 

おすすめ商材一覧

 

パソコン操作のこと。アフィリエイトのこと。
どんなことでも気軽にいつでも、ららに聞いていただける環境をご用意しました。 これでもう、ひとりで悩まずに済みますよね。詳細はこちらをご覧ください。
>>会員制メールサポート「らら組」

 

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

 




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

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

 

↑ この動くアバターは、こちらで作っていただきました。
あなたのアバターに命を吹き込む「四次元アバター」

 

「ユーザーが求める記事を書くこと」
「ちゃんと読んでもらえる役立つ記事を書くこと」
それが今、Googleに求められている、上位表示されるサイトの条件です。
あなたのブログは大丈夫ですか?記事がつまらなくて、せっかくの報酬を逃していませんか?
そうならないためには、正しい記事の書き方を勉強することが重要です。
満足度98%、ブログ初心者さん向け、読者に読まれる記事の書き方が学べます。
>>関連記事はココをクリック

 

コメントを残す

サブコンテンツ

このブログについて

プロフィール

情報商材アフィリエイト

ららです。
高校生と中学生の2人の子供がいる、40代主婦です。
主婦業・母親業をやりながら、隙間時間でアフィリエイトを実践し、
月6ケタの目標を達成することができました。

あなたと同じ目線の、安心できるブログを目指してます。
お気軽にメールくださいね。

詳しいプロフィールと実績はこちら




応援よろしくね♪

メールはお気軽に


ららに相談したいことなどがありましたら、お気軽にどうぞ。
些細なことでもアホらしいことでも、大歓迎です♪
>>ららにメールを送る

カテゴリー

YouTubeやってます

このバナーをクリックして、
チャンネル登録してください♪


ららの愛用品

サーバーやらドメインやらパソコン回りの品など…。ららはいったい何を使っているの?
実際に使っている物をご紹介します。
ららの愛用品ご紹介

相互リンクについて

2015年10月をもちまして、相互リンクのページは終了いたしました。
理由は
・昨今のSEO事情では、相互リンクが有益ではないこと
・リンク先の閉鎖が相次ぎ、機能を果たさなくなったこと
です。
相互リンクしていただいたブログ様、長いあいだありがとうございましたm(_ _)m

このページの先頭へ