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

無料ツールソフトの使い方ホームページの作り方Hpで集客する方法グーグルサービス
 
初めてのHP作成の動画SEO実践編高齢者のホームページの作り方よくある質問
 

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

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

 

このようにしておくと、画像のクリック率があがり、リンク先に誘導するのに効果的です。このカスタマイズはカーソルをリンク画像の上に置いたときその画像を下、右にずらしたり、透明度を指示する事で表示させます。今回はこの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%が元の色調でパーセンテージが小さくなるほど透明になります。

シリウスカスタマイズ|リンク画像を変化させる方法の関連ページ

リンク文字をへこませる
シリウスのカスタマイズでリンクテキストがへこんだように見える方法をご紹介します。カーソルを置いたときに、そのリンクテキストを下、右、に「ずらす」事で表示させます。スタイルシートにソースをコピペ、貼りつけるだけで簡単にできますので挑戦して下さい。
ライトボックスの設置
世界で一番簡単!シリススにライトボックスを設置する方法!5っの手順で速攻作業。サムネイルをクリックすると別画面が開き、指定した画像が表示され、そのグループ内の画像がクリックで次々に拡大表示できるライトボックス!その設置方法を動画でわかりやすく説明します。
アイフォン、スマホ電話番号簡単発信リンク
iphone,スマホなど携帯端末の画面で電話番号をタップすると発信画面に番号がコピーされる機能があります。サイトで電話番号を最適表示させるためのテクニックについて解説します。初心者さんでも簡単に設置可能なスクリプトとHTMLの記述!

トップページ ソフトの概要 Hp公開の方法 SEO対策基本編 アクセス解析 特典のご案内 購入者メルマガ お問い合せ