1、Head内に次のように書き込む
<![CDATA[
<Style Type="text/css">
<!--
a.botan:link
{font-size:14px;
color: white;
width:200;
background-color:green;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
border-style:outset;
text-decoration:none;
}
a.botan:visited
{font-size:14px;
color: white;
width:200;
background-color:green;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
border-style:outset;
text-decoration:none;
}
a.botan:hover
{font-size: 14px;
color: white;
width:200;
background-color: #000066;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
border-style:inset;
text-decoration:none;
}
-->
</Style>
]]>
本文内にリンクを設定する
<![CDATA[例<Br>
<A Href="botan.html" class="botan">
このページのトップへ
</A><Br>
<A Href="botan.html#nanten" class="botan">
画像ファイルでの難点
</A><Br>
<A Href="botan.html#ougi" class="botan">
奥義「牡丹」（ぼたん）
</A><Br>
]]>
|
各設定の内容
<![CDATA[
a.botan:link・・・通常のリンクの設定
a.botan:visited・・・すでに見たことのあるリンクの設定
a.botan:hover・・・リンクの上にマウスポインタが来たときの設定
最初にこの３つを設定し、さらに詳細部の設定を行う
]]>
詳細設定<![CDATA[
font-size: 14px;・・・文字の大きさ：14ピクセル
color: white;・・・文字の色：白
width:200;・・・ボタンの幅：200ピクセル
background-color:green;・・・ボタンの色：緑
padding-・・・文字とボタンの間の幅。
「top」が上、「right」が右、「bottom」が下、「left」が左。
幅はそれぞれ5ピクセル。
border-style:outset;・・・盛り上がったボタンのような効果をつける
border-style:inset;・・・へこんだボタンのような効果をつける
text-decoration:none;・・・リンクの下線を消す
]]>
本文中での設定
<![CDATA[
class="botan"
<A>タグの中でこれが書かれているもののみボタンの効果が適用になる
]]>
実行結果
例
このページのトップへ
画像ファイルでの難点
奥義「牡丹」（ぼたん）
注意点
実際に自分のページで使うときには詳細設定の部分を変えることになるが、
このボタンの設定は１つのページに１種類しか設定できない。
また、うまくボタンの効果を使うのであれば、
「a.botan:link」と「a.botan:visited」の背景色は明るい色＋文字色を黒、
「a.botan:hover」の背景色は暗い色＋文字色を白にするとよい。
色の指定方法についてはタグ大全の「カラー見本」を参照してほしい。
|