シリウスでマウスオーバーしたら画像の色が薄くなる方法
シリウスでマウスオーバーしたら、リンク付きの画像の色が薄くなる方法をお伝えします。
マウスオーバーとは？
ネット上の画像などにマウスのポインターを重ねること
マウスオーバーを設定するにはスタイルシートを少しだけいじります。
style.cssを選択し、下記のコードを探します。
a img {
border: none;
text-decoration: none;
}
このコードの下に下記のコードを追加します。
a img:hover {
opacity: 0.7;
filter: alpha(opacity=70);
}
このコードの意味ですが
「リンクの付いた画像にマウスオンした際には
透明度を10（完全不透明）から0.7（30%だけ透明になる）に変更する」という意味です。
もし、透明度を40%にしたい時は0.7を0.6に、70を60に変更します。
追加した状態がこんな感じです↓
これで【保存】をクリックします。
たったこれだけです。
試しに下記の画像にマウスポインターを合わせてみてください↓
少し白っぽくなるのがわかりますか？
これでもいいのですが、もう少しゆっくりめにほわっと変わるように設定してみたいと思います。
先程の
a img {
border: none;
text-decoration: none;
}
の中に下記のコードを追記します。
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
この意味は 0.2秒かけて色を変化させるという意味です。
もっとゆっくりにしたい時は0.2の部分をを全て0.5などに数字を大きくして変えていきます。
最終的には下記のような記述になります↓
a img {
border: none;
text-decoration: none;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
a img:hover {
opacity: 0.7;
filter: alpha(opacity=70);
}
実際のスタイルシートはこんな感じです↓
これでリンクの付いた画像には全て適用されます。
あくまでリンク付きの画像のみです。リンクが付いていない画像には適用されませんのでご注意を
この色が薄くなるだけでクリック率を上げることができます。
アフィリリンクなどに使うと有効ですよ＾＾
めいこのおすすめアフィリエイト教材＆ツールのご案内
めいこのブログでは、シリウス以外にも
アフィリエイトで役立つツールや教材をレビューしています。
年間５０以上ものの教材を見ながら
本当によかったものだけを選りすぐりでブログで紹介しています。
いつでもお気軽に覗きに来てください＾＾
