カーソルを乗せると、ボタンやバナーなどの画像がピコッと動く方法

当ページのリンクには広告が含まれている場合があります。また、記事の内容は作成時のものになります。
  • URLをコピーしました!

ららです。

ららのブログでは、
カーソルを乗せるとピコッと動く画像が多くあります。

たとえばこんなの。

動かなくてもリンク機能は果たしますが、
やっぱり動いた方が楽しいですよね。

これのやり方をご紹介します。

目次

カーソルを乗せると、ボタンやバナーなどの画像がピコッと動く方法

cssファイルの編集

まずは、外観→テーマ編集から、advanced.cssを開きます。

このファイルは賢威の場合です。
それ以外のテンプレートの場合は、どれか該当しそうなcssファイルを開いてそこに追加してください。

一番最後までスクロールして、最後のところに文章を追加します。

追加するのはこの文章です。

/* カーソルを乗せると画像が動く
───────────────────────── */
div.img-move a:hover {
position: relative;
top: 3px;
left: 3px;
}

 

こんなふうになります。更新してくださいね。

記事内での書き方

記事内で、画像を配置してリンクを張ったあと、その両はじをこれで囲みます。

<div class="kakomu01"><div class="img-move">
~~~~~~
~~~~~~
</div>

 

さきほどの「らら書店」のバナーは、こんなコードになってます。
(クリックすると拡大します)

わかりにくかったらららまでご連絡ください。
ぜひマネしてみてくださいね^^

お問い合わせはこちらからお気軽に♪

応援してくれたら嬉しいです

記事が役に立ったら、ここをクリックして応援をお願いします。

私が稼げるようになった教材

アンリミテッドアフィリエイト
ごくごく普通の主婦だった私が、累計800万円以上稼げたのは、この教材を購入して作業をしたから。
詳細は、こちらのページでご紹介しています。
>>アンリミテッドアフィリエイトらら流レビュー
私がここまでたどった経験を元にした特典と、濃厚すぎるサポートも差し上げています。

無料レポートを書かずにメルマガ読者を全自動で集める方法!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

ららです。
2人の子供はもう成人した50代主婦です。10年ほど前から、主婦業・母親業の隙間時間でアフィリエイトに挑戦。パート時代の約6倍の月収を達成することができました。

超マイペースで超怠惰で超食いしん坊の私でもできたその秘密は、とにかく諦めないこと!
これから始めるあなたに私の経験をお伝えするため、ブログ・メルマガで情報を配信するとともに、サポートやコンサルを行っています。常に初心者さん目線を忘れない安心できるブログを目指してますので、どうぞ何でもご相談くださいね。

コメント

コメントする

目次