シリウスでカーソルを置くとリンク画像が動くように設定する方法
よくサイトで、画像にマウスのカーソルを置くと
下にぴょこっと凹むように動く仕様を見たことはありませんか？
例えば、こういうものです↓
↑この画像にマウスのカーソルを持ってくると
「ぴょこっと」凹みます＾＾
画像や文字にマウスのカーソルを合わせることをマウスオーバーと呼びます。
こんなふうに動くとちょっとクリックしたくなりますよね（笑）
マウスオーバーでリンクされた画像が
ぴょこっと動く仕様にする方法についてお伝えします。
画像にマウスオーバーさせると下に凹むように動くように設定する方法
設定にはスタイルシートの設定を少し変えます。
スタイルシートのstyle.cssの一番最後の行に下記のコードを記述します。
/* リンク付き画像をへこませる */
a:hover img{
position : relative;
top : 3pt;
left : 3pt;
}
これだけでリンク付きの画像が凹ませることができます。
ちなみに、CSSに書いた○ptの数字を変えれば凹みの度合いが変わります。
リンク付き画像に凹む仕様にしておくと
読者の興味を惹きやすく、クリック率UPにも繋がりますのでおすすめですよ＾＾
めいこのおすすめアフィリエイト教材＆ツールのご案内
めいこのブログでは、シリウス以外にも
アフィリエイトで役立つツールや教材をレビューしています。
年間５０以上ものの教材を見ながら
本当によかったものだけを選りすぐりでブログで紹介しています。
いつでもお気軽に覗きに来てください＾＾
