WordPressのリンク付き画像を簡単にロールオーバーで光らせる方法

 

CSSについてはほとんど独学でやってまして、特に参考書とかを買ったこともありません。

実際に触りながらパズルを解くように覚えてきました。

だからまだまだ知らないことがたくさんあるわけで、今日も1つ便利なものを発見。

 

これまではリンク付き画像のロールオーバーには以下のように画像を2枚用意し、

CSSでロールオーバー時の背景画像を切り替えてました。

ブログランキング

 

でももっと簡単にロールオーバー時に画像が切り替わったように見せる方法を知ってしまいました。

それで作ったリンク付き画像がこちら。(マウスのカーソルを上に持ってきてみてください)

ブログランキング

 

上のボタンは茶色の画像を1枚用意しただけです。

それなのにロールオーバー時にボタンが少し光るような効果があります。

これは以下の方法で実現できます。

wp-content/themes/使用中のテーマ/style.css 内に以下のタグを記述し、アップロードするだけ。

a:hover img {
filter : alpha(opacity=80);
opacity : 0.8 ;
}

css

 

これは別に自動で画像をもう1枚作成してくれるわけではなく、

ロールオーバー時に画像の不透明度を80%にしてくれてるだけなので、

もっと薄くしたい場合は、「50、0.5」のように数字を小さくすればOK。

 

ただしこの方法ではブログ内の全てのリンク付き画像にCSSが適用されます。

また、ブラウザによって対応してないものもあるっぽいし、

画像が少し薄くなるだけで色を変えることはできないから、仕事ではあんまり使えないかも。

人気ブログランキングで今何位?

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

【PR】話題のラインスタンプを自分で作って販売する方法

ブログランキング応援していただけると嬉しいです↓

にほんブログ村 釣りブログ バスフィッシングへ にほんブログ村 釣りブログ 東海釣行記へ にほんブログ村 釣りブログへ

この記事の著者

kazushi釣りと生き物をこよなく愛するWEBデザイナー

釣りと焼酎が好きなWEBデザイナー。夜な夜な真っ暗な部屋で水槽を眺めながら呑んでいます。最近のマイブームはハンドメイドルアー制作。琵琶湖のほとりでひっそりとWEB制作事務所を営んでいます。

この著者の最新の記事

関連記事

カテゴリー

アーカイブ

インスタやってます

ページ上部へ戻る