![[SIRIUS2] 当サイト動画解説レビューページ！](../img/link-card.jpg)
シリウスのカスタマイズでリンクテキストがへこんだように見える方法をご紹介します。カーソルを置いたときに、そのリンクテキストを下、右、に「ずらす」事で表示させます。スタイルシートにソースをコピペ、貼りつけるだけで簡単にできますので挑戦して下さい。
シリウスカスタマイズ｜リンク画像をへこませる方法
リンク画像を変化させる
リンク画像の上にカーソルを置いたときに、その画像をずらす事でへこんだように見せたり、画像を半透明にするカスタマイズです。2っのカスタマイズをミックスさせる事も可能で、「画像がリンクである事」を認識しやすくなります。
このような表現は、画像のクリック率があがり、リンク先に誘導するのに効果的です。このカスタマイズはカーソルをリンク画像の上に置いたときその画像を「下、右」にずらしたり、「透明度を指示」する事で表示させます。
[この動画は7分です]
Please click
チャンネル登録をして頂きますとホームページ作成に役に立つ最新動画のアップロードをお知らせします。
画像をへこませるカスタマイズ
このスタイルシートの記述は、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%が元の色調でパーセンテージが小さくなるほど透明になります。
関連ページ
-
![リンク文字をへこませる]()
-
![ユーザー指定スタイルCSS]()
スタイルシートの利用でホームページ作成スピードが上がり、表示も軽くなります。また作成画面もシンプルになります！シリウスVersion1.5からスタイルシートにユーザー指定スタイルが追加されていますので活用の方法を解説します。 -
![アイフォン/スマホ対応！電話番号タップで簡単発信リンク]()
iphone,スマホなど携帯端末の画面で電話番号をタップすると発信画面に番号がコピーされる機能があります。サイトで電話番号を最適表示させるためのテクニックについて解説します。初心者さんでも簡単に設置可能なスクリプトとHTMLの記述！
SIRIUS2 OFFICIAL PAGE
リンク先公式サイトからのご購入でシリウス2を快適に始めるための
ユーチューブ動画アクセス権 [全4本-計67分] を特典としてプレゼント！
さらに電話、メールサポートや画像集、Wordテンプレートもお渡ししています。
また、特典ユーザーズページではシリウス2に必要なSEOに関連する記事を閲覧できます。
ユーチューブ動画アクセス権 [全4本-計67分] を特典としてプレゼント！
さらに電話、メールサポートや画像集、Wordテンプレートもお渡ししています。
また、特典ユーザーズページではシリウス2に必要なSEOに関連する記事を閲覧できます。