マウス2

100万ポイント山分け！1日5回検索で1ポイントもらえる

594159

ホーム | 日記 | プロフィール

【フォローする】【ログイン】

***　マウス２　***

では　次は何を書きましょうか…。
そうだ…　よく、リンクに触れるとズレる文字がありますよね？あれを説明していきま～す♪　(^ー^* )フフ

*-*-* リンクに触れるとズレるタグ*-*-*-

↓ココで使うタグはコレ

<a href=" http://～ " style="color: ▲ ;font-size: ★1 ; text-decoration:none ;"
onMouseOver=style.fontSize=" ☆ " onMouseOut=style.fontSize=" ★2 " target="_blank" >
ここに文字
</a>

▲ …表示させる文字の色
★1 …マウスを重ねない時の文字の大きさ（初期状態）
☆ …マウスを重ねた時の文字の大きさ
★2 …マウスを重ねない時の文字の大きさ（重ねた後）

http://～

リンク先のURL

text-decoration:none

下線の有無（ナシ）

target="_blank"

新しいウィンドウで開く

★１と ★２に同じ大きさを入れて見てみましょう。
初期状態は「14」・マウスを重ねると「15」・一度重ねた後は「14」に戻し、
表示させる文字の色（ ▲ ）は『#3366ff』にしてみます。

ここに文字

ズレる幅は、あまり大きな差がない方がいいかと思います｡｡｡(^-^)

*-*-*文字に触れるとズレるタグ*-*-*

では、次に　リンク『a』ではなく　『font』に変えてみますね｡｡｡
ここで使うタグはコレ↓

< font style="color: ▲ ;font-size: ★1 ;"
onMouseOver=style.fontSize=" ☆ " onMouseOut=style.fontSize=" ★2 ">
ここに文字
</a>

▲	表示させる文字の色
★1	始めに表示させる文字の大きさ
☆	マウスを重ねた時の文字の大きさ
★2	マウスを外した時の文字の大きさ

リンクの<a>を<font>に変えただけですが、
リンク先を指定する『 http://～』と下線を取る『 text-decoration:none 』、
別ウィンドウで開く指定の『 target="_blank" 』を取っているのがわかりますか？
これを見てみると…

ここに文字

…このようになります。
ココでは、マウスが重なっていない時の大きさを『14』（★１・２）
マウスが重なった時の大きさを『15』にしています。

*-*-*リンク（文字）に触れるとズレるタグ（背景色付き）*-*-*

ではでは　これまでのタグに、背景色を付けてみましょう。

↓リンクで使うタグはコレ

<a href="http://～" style=" background-color:● ;color: ▲ ;font-size: ★１ ; text-decoration:none ;"
onMouseOver=style.fontSize=" ☆ " onMouseOut=style.fontSize=" ★２ " target="_blank" >
ここに文字
</a>

↓文字で使うタグはコレ

<font style=" background-color:● ;color: ▲ ;font-size: ★1 ;"
onMouseOver=style.fontSize=" ☆ " onMouseOut=style.fontSize=" ★2 ">
ここに文字
</a>

どちらも『style』の中に『 background-color:● 』を入れています。
では ● の中に白（#FFFFFF）を入れて見てみると…

TAMA’S HOME

ここに文字

このように、タグを追加する時には、セミコロン『；』で繋いでいるので、
気を付けて下さいネ☆彡　(=^▽^=)ノ゛

***OMAKE***

これに以前紹介した、マウスカーソルの変更を付け加える事も出来ます。
上記と同じように『style』の中に『 cursor:◎ 』を入れ、セミコロン『；』で繋ぎます。
カーソルの種類は『リンク色々２』を見てね♪

<a href="http://～" style=" cursor:crosshair ;background-color:●;color:▲;font-size:★1;text-decoration:none;"
onMouseOver=style.fontSize="☆" onMouseOut=style.fontSize="★2" target="_blank">
ここに文字
</a>

TAMA’S HOME

お昼にします｡｡｡　ヾ(*＾▽゜）

ジャンル別一覧