HTML入門

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

ららです。

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

たとえばこんなの。

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

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

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

cssファイルの編集

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

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

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

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

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

 

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

記事内での書き方

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

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

 

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

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

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

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

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

メールはお気軽に

ららにメールあなたからのメールはいつでも大歓迎です。
お問い合わせはこちらのフォームからどうぞ。
48時間以内に愛をこめてお返事をさせていただいています。

 

ららにメールする

この記事で使われているイラストは…

この記事で使用されているイラストの大部分は、こちらのイラスト集のものを使用しております。

COMMENT

メールアドレスが公開されることはありません。