初めてのホームページ作成で見る動画

 

便利な無料ソフトと便利サイト一覧サイト作成ソフトシリウス、最短HPテンプレートの使い方解説お店、企業用ホームページの作り方ホームページで集客し、売り上げを延ばす方法グーグルの無料サービス一覧
HP作成 超初心者、高齢者講座サイト作成のFAQ記事一覧SEO対策実践編SEO対策基本編トップバナー用無料下地画像素材集

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

リンク画像を変化させる

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

 

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

 

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

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

 

 

※ 画像をへこませるカスタマイズ
このスタイルシートの記述は、前回の動画「シリウスカスタマイズ-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%が元の色調でパーセンテージが小さくなるほど透明になります。

 

 

 

 

 

TOPへ