![[SIRIUS2] 当サイト動画解説レビューページ！](../img/link-card.jpg)
シリウスのカスタマイズで、リンク画像の上にカーソルを置いたときに、その画像がへこんだり、画像が半透明になる方法をご紹介します。このカズタマイズをしておくと、訪問者さんが「画像がリンクである事」を認識しやすくクリック率があがりリンク先に誘導するのに効果的です。
シリウスカスタマイズ｜リンクテキストをへこませる
テキストを変化させる
リンクテキストの上にカーソルを置いたときに、そのテキストが[へこんだように見える]カスタマイズです。カーソルを置いたときに、リンクテキストを下、右、に「ずらす」事で表現します。スタイルシートに貼るだけで簡単にできます。
[この動画は5分で見れます]
Please click
チャンネル登録をして頂きますとホームページ作成に役に立つ最新動画のアップロードをお知らせします。
スタイルシートコピー用ソース
ソースの目印
スタイルシートでアスタリスクとスラッシュで囲まれた文字は、ブラウザの表示に反映されません。後に、何のためのソースなのかが解るように目印として必ず記述しておきます。
ソースの反映条件を書いておく
/* この部分に反映結果を記述する */
/* リンク付き文字をへこませる */
a:hover {
position: relative;
top: 1px;
left: 1px;
text-decoration: none;
}
この命令の日本語訳
a:hover・・・リンク[a]にカーソルが乗った場合[hover]
position:relative;・・・相対位置を、
topから下に1px
leftから右に1px
移動させろ！
text-decoration: none;
プロパティはテキストに装飾を施しません。
※ 通常リンクテキストには下線があるが、
マウスオーバー時に「テキスト装飾」[text-decoration:]を「施すな！」[none;]
つまり「マウスオーバーで下線を消せ」という命令です。
関連ページ
-
![リンク画像を変化させる]()
-
![ユーザー指定スタイルCSS]()
スタイルシートの利用でホームページ作成スピードが上がり、表示も軽くなります。また作成画面もシンプルになります！シリウスVersion1.5からスタイルシートにユーザー指定スタイルが追加されていますので活用の方法を解説します。 -
![アイフォン/スマホ対応！電話番号タップで簡単発信リンク]()
iphone,スマホなど携帯端末の画面で電話番号をタップすると発信画面に番号がコピーされる機能があります。サイトで電話番号を最適表示させるためのテクニックについて解説します。初心者さんでも簡単に設置可能なスクリプトとHTMLの記述！
SIRIUS2 OFFICIAL PAGE
リンク先公式サイトからのご購入でシリウス2を快適に始めるための
ユーチューブ動画アクセス権 [全4本-計67分] を特典としてプレゼント！
さらに電話、メールサポートや画像集、Wordテンプレートもお渡ししています。
また、特典ユーザーズページではシリウス2に必要なSEOに関連する記事を閲覧できます。
ユーチューブ動画アクセス権 [全4本-計67分] を特典としてプレゼント！
さらに電話、メールサポートや画像集、Wordテンプレートもお渡ししています。
また、特典ユーザーズページではシリウス2に必要なSEOに関連する記事を閲覧できます。