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

ららのブログでは、カーソルを乗せるとピコッと動く画像を多用しています。動かなくても用は果たしますが、動いた方が楽しいですよね。画像にリンクを張ったときに、画像が動く方法をご紹介します。

ららです。



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

たとえばこんなの。



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

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



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

cssファイルの編集

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

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



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



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

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


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



記事内での書き方

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

<div class=”img-move”>~~~~~~</div>
(<>は半角に変えてください)


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



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




この記事が役に立ったと思ったらクリックしてね。ららが喜びます。

 

 

 

こんな記事もありますよ☆ぜひ見ていってね!

 


最後まで読んでいただき、ありがとうございました。


ららのブログでは、あなたからの疑問・質問・お問い合わせを大歓迎しています。 こちらからいつでもメールを送ってくださいね。

>>ららにメールを送る

 

 

コメントを残す

サブコンテンツ

このページの先頭へ