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

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

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

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

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

スポンサーリンク

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

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

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=”http://kitacchi869.com/5092.html”]LUREA付属のリファインスノーテンプレート[/btn_l]

LEAVE A REPLY

*

あなたの好きなことで楽しくお金を稼ごう

あなたの好きなことで楽しくお金を稼ごう
「アニメが好き!」「ニコ厨で毎日ニコ動見てる」
「音楽聞いたり、ライブが好き」「ゲーム大好き。新作プレイしたい」

でも・・・好きなだけやる時間とお金がないorz

めんどくさい仕事やらバイトは楽しくない。どうせやるなら楽しいことでお金を稼ぎたい。

ほんとそれ。なのでそんな自分の好きなことで楽しくお金と時間を手に入れる方法をお届けするよ。

アフィリエイト初心者講座

初心者の頃ブログアフィリエイトで月5000円稼げない理由まとめ

初心者の頃ブログアフィリエイトで月5000円稼げない理由まとめ

ブログアフィリエイトを始めた初心者がまずぶち当たるのが、 ブログ始めてみたけど全然稼げない・・・ 月5000円ですら稼げないんだけどなんでなの? 上手くいかない理由を知りたい! っていうこと。これは過去の北っちも全く同じことを思...
More

ブログアフィリエイト基礎講座

趣味ブログでお金を稼ぐ以外によかったこと、メリット3つ。実体験編。

趣味ブログでお金を稼ぐ以外によかったこと、メリット3つ。実体験編。

今日は趣味ブログをやっていく上で、「お金を稼げるようになる」以外のメリットというのがテーマ。 「はあ?ブログでお金稼げるのが一番なんじゃないの??」 うん、それはそうなんだけど北っちがブログを続けてきて「お金」以外に得られたもの...
More

◇相談・お問い合わせはいつでもどうぞ!

お問い合わせ

Return Top