シリウスカスタマイズ｜リンク画像を変化させる方法

シリウスカスタマイズ｜リンク画像をへこませる方法

リンク画像の上にカーソルを置いたときに、その画像をずらす事でへこんだように見えたり、画像を半透明にするカスタマイズです。2っのカスタマイズをミックスさせる事も可能で、訪問者さんが「画像がリンクである事」を認識しやすくなります。

このような表現は、画像のクリック率があがり、リンク先に誘導するのに効果的です。このカスタマイズはカーソルをリンク画像の上に置いたときその画像を「下、右」にずらしたり、透明度を指示する事で表示させます。今回はこの2っのソースをまとめて解説します。

シリウスカスタマイズ-2

リンク画像を変化させる方法
[この動画は7分で見れます]

Please click

チャンネル登録をして頂きますとホームページ作成に役に立つ最新動画のアップロードをお知らせします。

※ 画像をへこませるカスタマイズ
このスタイルシートの記述は、前回の動画「シリウスカスタマイズ-1」の書き方と全く同じで、a:hoverの後にimgを記述する事により、リンク画像に対しての指示になります。

コピペで使ってください。

/* リンク画像をへこませる */
a:hover img{
position : relative;
top : 1pt;
left : 1pt;
}

この命令の日本語訳

a:hover img・・・リンク画像[a-img]にカーソルが乗った場合[hover]
position:relative;・・・相対位置を、
topから下に1pt
leftから右に1pt
移動させろ！

※ 画像を半透明にするカスタマイズ
よくホームページで見かる手法ですが、リンク画像の色合いが変わるとインパクトがありますよね！画像の場合このカスタマイズはリンク先に誘導するのにかなり有効だと思います。

コピペで使ってください。

/* リンク画像を半透明化 */
a:hover img{
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity:0.6;
}

この命令の日本語訳

a:hover img・・・リンク画像[a-img]にカーソルが乗った場合[hover]
opacityで画像の透明度を指定します。

opacity: 0.6;・・・透明度[opacity]が60%
filter: alpha ( opacity=60 ) ; ・・・IE100が100％
-moz-opacity: 0.6 ; ・・・FireFox1が100％

100%が元の色調でパーセンテージが小さくなるほど透明になります。