【超初心者のWordPress】
画像にカーソルをあわせたときに色を変えたい編
HOME < DESIGN WORK < WordPress
リンクを貼った文字は色が変わるから、リンク貼ってある感がわかりやすい。
でも、リンクを貼った画像は、何も変化がないから、なんだか分かりにくい･･･
他のサイトでもよく見る
「画像にカーソルをあてると、画像がちょっと明るくなる」みたいなことをやりたい！
ということで、
素人の私が大好きな「追加CSS」で、簡単に解決します！
※ちなみに、WordPressの『Lightning』という無料のテーマを使用しています。
このCSSを追加でOK！
外観 → カスタム → 追加CSS のところに下記のコードをいれるだけ！
a:hover img{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: “alpha( opacity=80 )”;
}ちなみに「a」はリンク要素、
「hover」はカーソルが上に乗ったとき(同じ位置にずっと飛んでるホバリングのイメージです)。
なので、「リンク付きの画像の上にカーソルが乗ったとき」という意味ですね。
「opacity」は不透明度のことで1～0まであります。
1で完全な不透明なので0.8だと8割の不透明度ってことですね。
コードが3行ありますが、いろいろなブラウザに対応したもののようです。
(私の見ているブラウザでは〈opacity：0.8；〉だけで効果がありました)
まぁ、全部いれておいて間違いなしですね。
これで、リンクを貼った画像にカーソルをあてると画像が明るくなるので
この画像を押してね～感が伝わりますね！
(スマホやタブレットで見たときは関係ないですが･･･)
めでたしめでたし◎
････････････････････････････････････････････
⇒こちらの記事もおすすめ！
