こんにちは、ぜんです。
ブログを見ていると、リンク付きの画像にマウスカーソルを置いた時に
画像が白く光ってるように見えることありませんか？
実はあのカスタマイズはCSSを使えば簡単にできちゃうんです。
「自分も同じように画像を白く光らせたい！」と思った方のために、
今回は、ブログ上でリンク付きの画像にマウスカーソルを置いた時に、
画像を白く光らせるCSSのカスタマイズ方法についてお話していきたいと思います。
画像を白く光らせる方法はロールオーバーと呼ぶ
画像を白く光らせるってどういうこと？ってことについてですが、
まずは実例を見たほうが早いと思うので、
試しに下の猫の画像にカーソルを乗せてみてください。
※画像はうちの猫の小さい頃のものです。
すると、こんな感じに白く光りませんでしたか？
この設定をしておけば、リンク付きの画像がひと目でわかるので、
訪問者からしたら非常にわかりやすいですよね。
そしてデザイン的にもクオリティの高いブログに一歩近づきます。
このようにカーソルを置いた時に画像を変化させる(白く光らせる)方法のことを、
「ロールオーバー」と呼びます。
カーソルを乗せた時だけ画像の形が変わったりするのもそうですね。
ロールオーバーをCSSでカスタマイズする方法
さて、それでは実際にCCSをカスタマイズしてロールオーバーの設定を行っていきましょう。
CSSでロールオーバーの設定を一度しておけば、
そのブログ内でリンク付きの画像にカーソルを乗せた時に、
すべて同じように白く光る設定にすることも可能です。
かなり簡単なカスタマイズで設定可能なので、これを機会にぜひ設定してみてください。
カーソルを置いた時に画像を白く光らせるカスタマイズ方法としては、
下のコードをCSSに追加するだけです。
（ワードプレスの場合、「テーマの編集」→「スタイルシート(style.css)」に追加して記述）
opacity: 0.7;
filter: alpha(opacity=80);
}
「opacity:0.7;」の部分は画像の透明度を表しています。
この0.7という値は、0～1の間で設定できます。
0に近づくほど透明になり、1に近づくほど不透明になります。
0.7よりももっと白く光らせたかったら0.5とか0.4とかにしてもいいですし、
0.7は光らせすぎだ！ということであれば0.8とかにしてみてもいいです。
その人の好みによるところもあると思うので、この辺はお好みで微調整してください。
特にこだわりがなければ上のコードをそのまま使えばOKだと思います。
「白く光る」と表現していますが、正確には画像を透明にしているだけなんですよね。
ちなみに、
「filter: alpha(opacity=80);」はIEに対応するための項目です。
更に言うと、
という項目をさっきのコードに加えると、
画像が白く光るまでの速度を調整することが可能です。
つまり上のコードは、「0.6秒かけて白く光らせる」という意味です。
こちらも必要であればお好みで設定してみてください。
今回の記事のまとめ
いかがだったでしょうか。
紹介したコードをCSS(スタイルシート)上に追加で記述するだけなので、
さして難しい設定は必要ありません。
最初はなんとなく専門的な設定が必要そう・・・なんて僕も思っていましたが、
やってみると意外に簡単に設定できるものです。
ロールオーバーに限ったことではなく、
ブログのカスタマイズってそんなに難しいことでもないので、
どんどんカスタマイズして自分好みのブログを作り上げていってくださいね。
