【リファインSNOW2】マウスオーバーで画像やリンクをぴょこぴょこ動かす方法

  • このエントリーをはてなブックマークに追加
  • Pocket

マウスオーバーした際に画像やリンクがぴょこぴょこ動く記事やサイトってよく見かけますよね。

僕も最初は気にしていなかったのですが、ただ単にあのようにしているのでは無く、実はクリック率を上げるためのものなんですね。

例えばこの2つの画像にカーソルを合わせてみて下さい。

マウスオーバーテスト マウスオーバーテスト

 

どうでしょうか?

おそらく右のぴょこぴょこ動く画像の方がクリックしたくなったかと思います。そして単純にクリックしたくなると言う事も言えるのですが、動かないと画像にリンクが挿入されている事に気付かない場合もあります。

ちなみにリンク(アンカーテキスト)の場合はこうなります⇒テスト

と言う事で、今回はリファインSNOW2で簡単に画像やリンクを動くようにする方法を紹介します。

 

マウスオーバー

 

リファインSNOW2での設定方法

 

まずはダッシュボードから「外観」⇒「テーマ編集」と進みます。

マウスオーバー①

 

続いて「custom.php」をクリックします。

マウスオーバー②

 

このような編集画面になるので、以下のコードを赤枠の箇所にコピペして下さい。

マウスオーバー③

【コピペ用コード】

 ※ top(縦への動き)とleft(横への動き)の◯pxの◯部分の数字を変えれば動きの大きさを変更する事ができます。

 

最後に「ファイルを更新」をクリックして完了です。なお、設定が反映されない場合は以下のショートカットキーでページを最新の状態にしてみて下さい。

Windows 「F5」
Mac 「⌘command+R」

 

マウスオーバーで画像を光らせる方法もオススメです。

 

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメントを残す

*