リンク色々2

リンク色々2♪


今日は、リンクにちょっと手を加えてみましょう☆彡(^^)v

*リンクの下線を消す
*リンクの紹介を出す
*ポインターを変える


*** リンクの下線を消す ***

ココで使うタグはこれ↓

<a href="リンク先のURL" style="text-decoration:none" >★ココが表示 ★</a>

通常のリンクタグに、上の『 style="text-decoration:none" 』を入れるだけで、
リンク時の下線が消えます♪

どう言う事かというと…

通常のリンク 下線を消したリンク

…とこうなる訳で、どちらも このページにリンクを張っています。何かの役に立つかな?(笑)


*** リンクの説明を表示させる ***

ココで使うタグはこれ↓

<a href="リンク先のURL" style="text-decoration:none;" title="★ココに文字★" >
☆ココが表示される文字 ☆</a>

赤文字の所は、先程の『下線を消す』タグですが、
その後に『 title="★ここに文字★" 』を入れると、
リンクにマウスが重なった時、リンク先の紹介等を表示させる事が出来ます。
※『 ★ここに文字★ 』の所が 表示される文字なので  変えて下さいネ♪
下のリンクにマウスを重ねてみて下さい。。。

▲top

…と こんな感じになります♪v(=∩_∩=)


*** ポインターを変える ***

リンクにマウスが重なった時に、ポインターを変えてみましょう♪ココで使うタグはこれ↓

<a href="リンク先のURL" style="cursor:★">top</a>

上記の『★』の所に、下のタグを入れて 種類を指定します。

n-resize 矢印(上下)
crosshair クロス形
text アイビーム
sw-resize 矢印(斜め)

どんな形かは、下のリンクにマウスを重ねて見て下さいネ♪

リンク色々2 リンク色々2 リンク色々2 リンク色々2

…とまぁ 役に立ちそうもない例でした。。。(笑)

以上のタグをすべて合わせてみると…

<a href="URL" target="_brank" style=" text-decoration:none ; cursor:crosshair " title="紹介文" >
リンク色々2</a>

target="_brank" 以前に紹介した、別ウィンドウで開くタグ
text-decoration:none 下線を取るタグ
cursor:crosshair クロスポインター
title="紹介文" 紹介文を入れるタグ

こんな感じになります。

ここで気をつけてもらうのが、『style="****"』の中で 違うタグを繋げる時は、
必ず『 ;(セミコロン) 』で繋げる事!
これを忘れると、エラーが出ます×××

わからなければ、掲示板の方へ’☆,。:*:・゜
(〃⌒ー⌒〃)∫゛゛



© Rakuten Group, Inc.
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: