画像リンクにマウスオーバーすると透明度が変化するやり方

キャプチャ画像

画像リンクをリンクだとはっきりサイト訪問者にわからせる手段の一つに画像の透明度を変えるというのがあります。

 

通常、リンクのついた画像にマウスを乗せるとカーソルは指マークに変わります。

(※PCのみの機能)

 

しかしそれだけだとリンクだよということがはっきり伝わらずそのままスルーされてしまう場合もあります。

 

これが画像にマウスを乗せたときに指マークだけでなく、画像の透明度が変化したならどうでしょう。

 

指マークだけの時よりは確実に目立つでしょう。

 

クリックしてくれる確率も高まる(?)かもしれません。

 

いや、確実に高まりますよ

 

そのやり方をご紹介します。


設定

このコンテンツ(記事)の機能はカスタムテンプレート【Volar】に搭載済みです。

カスタマイズの際の注意点として、失敗したときには元に戻せるようオリジナルファイルのコピーは必ず作ってください。

 

不安な方はサイトのバックアップを事前に作成しておくとより安心です。

 

下の画像にマウスを乗せてみてください。(※PCのみ)

す~と色が薄くなりますでしょ?

(クリックしても何も起きませんよ)

 

キャプチャ画像

 

やり方はこちら↓。

 

「テンプレート」→「スタイルシート編集」→「ユーザー指定スタイル」を開きます。

 

そこに以下のスタイルを加筆します。

 

コード

a img:hover {
opacity: 0.7;
filter: alpha(opacity=70);
}

 

これの意味は「リンクの付いた画像にマウスオンした際には透明度を10(完全不透明)から0.7(30%だけ透明になる)に変更する」というものです。

透明度を40%にしたい時は0.7を0.6に、70を60に変更します。

 

ここで終了でもいいんですが、このままだとマウスを乗せたときに一気に色が変わってしまうので、ほわ~とゆっくり透明度を変える設定もご紹介します。

 

やり方はこちら↓。

 

コード

a img {
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}

 

これの意味は画像を0.2秒かけて変化させるというものです。

 

もっとゆっくりにしたい時は3ヵ所の0.2を全部0.5などに変えてやります。

 

最終的にはこんな↓感じになります。

 

コード

a img {
-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);
}

 

これでリンクの付いた画像すべてに設定が適用されます。

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

 この記事をシェア 
キャプチャ画像

PC版レイアウトに切替

スマホ版レイアウトに切替