マウス3
ではでは次に行きましょう♪ (=^▽^=)
ここでは マウスを重ねて『枠』を表示させてみます｡｡｡枠の種類を変える事で、ボタンのような物も作れますヨｖ
*-*-* マウスを重ねて枠を表示
*-*-*
ここで使う 基本のタグはコレ↓
<a href="http://～" style="color: ■
;font-size: □
;text-decoration:none;"
onMouseOver=style.border=" △ " onMouseOut=style.border=" ▲ " target="_blank">
ここに文字
</a>
onMouseOver=style.border=" △ " onMouseOut=style.border=" ▲ " target="_blank">
ここに文字
</a>
| ■ | 文字の色 |
| □ | 文字の大きさ |
| △ | マウスを重ねた時の枠の種類 |
| ▲ | マウスを重ねた後の枠の種類（有無） |
では 文字の色（ ■ ）を『#ff69b4』・文字の大きさ（ □ ）を『15』
マウスを重ねた時の枠の種類（ △ ）を『dotted』
重ねた後の枠の種類（ ▲ ）を『0』にして見てみましょう。
※マウスを重ねた時だけ 枠を表示させる時は、 ▲ の設定を『0』にします。
枠の種類はココを見てね♪
こんな感じになります。
*-*-* マウスを重ねて枠を表示（背景色付き）
*-*-*
次は 文字の背景に色を付けてみましょう｡｡｡
↓ここで使うタグはコレ
<a href="http://～" style=" background-color:●
;color:■;font-size:□;text-decoration:none;"
onMouseOver=style.border="△" onMouseOut=style.border="▲" target="_blank">
ここに文字
</a>
onMouseOver=style.border="△" onMouseOut=style.border="▲" target="_blank">
ここに文字
</a>
上記の基本タグに『 background-color:● 』を追加しました。
『 ● 』に白（#FFFFFF）を入れて見てみると…
枠の種類はココを見てね♪
こんな感じになります♪ (^ー^* )
*-*-* マウスを重ねて枠を表示（背景画像付き）
*-*-*
次は、背景に画像を持ってきたいと思います。
表示される部分が少ないので、なるべく小さな画像が良いですね★
大きくても切れてしまいますので… (^_^;)
↓ここで使うタグはコレ
<a href="http://～" style=" background:url( ●
)
;color:■;font-size:□;text-decoration:none;"
onMouseOver=style.border="△" onMouseOut=style.border="▲" target="_blank">
ここに文字
</a>
onMouseOver=style.border="△" onMouseOut=style.border="▲" target="_blank">
ここに文字
</a>
同じように、基本のタグに『 background:url( ● ) 』を入れました。
● の所に、背景にする画像を指定します。
画像の倉庫から『img src="http～***"』のみをコピー＆ペーストします。
ここで気を付ける事は、 ● 以外は消さない事！
前後の（ ）を消すと、読み込みが出来ませんｘｘｘｘ
それでは見てみましょう♪
枠の種類はココを見てね♪
元の画像→
本館から持ってきた物ですが、この大きさでも背景にするとこんな感じになります。
ここでもリンクタグ（a）で説明しましたが、リンク先がない場合、
つまり リンクを張らない時には、
『font』・『/font』もしくは『p』・『/p』に変更してもOKです。
© Rakuten Group, Inc.
