暇人北っちの趣味ブログアフィリエイト。

ギター、ゲーム、アニメ。やりたいことに時間とお金を使おう。

ブログの画像にアニメーションつける方法〜マウスオーバーイベント〜

クリックしてほしい画像に少し変化をつけると
読者さんが「ここクリック出来るんだー」って
すぐに理解してくれます。

今回はそんな画像にアニメーションをつける方法をご紹介。

画像をホワって白く表示させる

ちょっと参考画像をおいておきますね。

mail

これはお問い合わせに使っている画像ですが、
画像にマウスを重ねてみてください。

白くホワっとした効果がかかるのが
わかりますか?

これがマウスオーバー時のアニメーション。

クリックしてほしい画像は
こういう効果を入れておくと
目立つので読者さんにもわかりやすいです。

アニメーションを入れる手順

まずは以下のコードを全部コピーしてください。

[html]a img {
-webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
a:hover img {
opacity: 0.6;
filter: alpha(opacity=60);
}[/html]

これをあなたのブログのCSSに追記します。

ワードプレス管理画面より、
外観→テーマ編集をクリック。

スクリーンショット 2013-07-18 17.05.26

右のメニューからStyle.cssという名前を探し、
クリックします。

画像のものがそれです。

ここに先ほどコピーしたものを
貼り付ければOK。

わかりやすく一番下とかに入れておくといいですよ。

なお、北っちが利用している
リファインスノーのテンプレートでは
custom.cssという追記用のファイルがあります。

ここに貼り付けるだけでOK。

スクリーンショット 2013-07-18 17.05.43

できたら「ファイルを更新」をクリック。

これだけです。

あとは記事を書くときに普通に
画像を張り付ければアニメーションが
発動するようになっています。

また、この効果はヘッダー画像や、
ウィジェット内の画像にも適用されます。

参考にさせて頂いた記事はこちら

北っちの利用しているテンプレートを
チェックしたい方はこちら

[btn_l color=”green” corner=”r” url=”//kitacchi869.com/5092.html”]LUREA付属のリファインスノーテンプレート[/btn_l]

LEAVE A REPLY

*
*
* (公開されません)

Return Top