シリウスカスタマイズ｜リンクテキストをへこませる

シリウスカスタマイズ｜リンクテキストをへこませる

旧シリウスカスタマイズ講座

シリウスカスタマイズ｜リンクテキストをへこませる

テキストを変化させる

リンクテキストの上にカーソルを置いたときに、そのテキストが[へこんだように見える]カスタマイズです。カーソルを置いたときに、そのリンクテキストを下、右、に「ずらす」事で表現します。スタイルシートに貼りつけるだけで簡単にできますので挑戦して下さい。

 

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

テキストリンクをへこませる方法
[この動画は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;]
つまり「マウスオーバーで下線を消せ」っていう命令です！

 

 

 
次のページ⇒画像の変化

 

シリウスカスタマイズカテゴリートップ