無地のボタン画像に文字を重ねて表示させる方法
それでは、具体的な記述方法をご紹介致しましょう。
■準備
まず、無地のボタン画像を用意して下さい。ここでは、右のような画像を用意しました。 画像はフリー素材集などから好きなものを見つけてくると良いでしょう。
そして、正確な縦横のサイズ（ピクセル数）をメモしておきます。ここでは、横幅100px、高さ31pxです。
■概要
どういう構成になっているのか、先にお見せ致しましょう。
TABLEタグを使って、上記のような枠を作っているだけです。 そして、枠の背景画像にボタン画像を指定しています。
上記の右側は、背景画像が表示されなかった場合の見え方です。
※上記では分かりやすいように、枠線を表示させていますが、実際には枠線は消します。
■記述 STEP1 :
まずは、単純に「枠を表示して背景画像を指定し、文字を入れる」だけをご紹介致します。
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td background="ButtonBase.gif" align="center"> <a href="(URL)">自己紹介</a> </td> </tr> </table>
※赤色強調部分が、背景画像（ボタン画像）の指定。 黒色強調部分が、リンク（と表示文字）の記述です。
これでは、困りますね。次のSTEPへ進みましょう。
■記述 STEP2 :
先ほどの記述でうまく表示されなかったのは、ボタン画像のサイズを指定していなかったからです。ここでの「ボタン画像のサイズ」とは、「枠のサイズ」と同じことですので、枠のサイズを指定しましょう。
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td background="ButtonBase.gif" width="100" height="31" align="center"> <a href="(URL)">自己紹介</a> </td> </tr> </table>
※「width=」の部分が、横幅の指定。「height=」の部分が、高さの指定です。単位は「ピクセル」です。
とりあえず、ボタンに見えるようになりましたね。これで完成としても構わないのですが、ちょっと装飾を行ってみましょう。
■記述 STEP3 :
上記のままでは、色や形態が通常のリンク文字のままで、あまり「ボタン」という感じがしません。 そこで、文字に装飾を加えて、よりボタンらしく見えるようにしてみましょう。
装飾にはスタイルシートを使います。通常、ボタンは複数個表示させるでしょうから、スタイルの定義は、HTML中の <head>～</head> 内に記述しておく方が、記述量が少なくて済み、ソースも見やすくなります。
というわけで、まずは、<head>～</head> 内に記述するソースからご紹介致しましょう。
<STYLE TYPE="text/css"><!--
A.btn {
text-decoration: none;
color: #550000;
font-weight: bold;
font-size: 11pt;
}
A.btn:hover {
color: #ffff55;
font-size: 12pt;
}
--></STYLE>
2～7行目は、
※text-decoration部分が、リンクの下線を消す指定。
※color部分が、文字色。
※font-weight部分が、太字（ボールド）の指定。
※font-size部分が、文字サイズの指定です。単位を付けて指定します。ここでは「11pt」ですので「11ポイント」となります。
8～11行目は、
※color部分が、マウスが文字の上に乗ったときの文字色の指定。
※font-size部分が、マウスが文字の上に乗ったときの文字サイズの指定です。
以上の記述を<head>～</head> 内に記述しておいた上で、ボタン部分の記述を次のように書き換えます。
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td background="ButtonBase.gif" width="100" height="31" align="center"> <a href="(URL)" class="btn">自己紹介</a> </td> </tr> </table>
※赤色部分が、「ここにスタイルを適用しますよ」という意味の記述です。
これで完成です。
装飾部分（スタイルシート部分）は、自由に書き換えて、望みのデザインを行って下さい。
※リンクの上にマウスが乗った際に色などが変わるスタイルは、一部のブラウザ（特に古いブラウザ）では有効になりません。 また、アクセス者がスタイルシートをOFFに設定している場合も、有効にはなりません。
結局 どう書けばいいのか
STEPごとに細かくご紹介してきたので、「結局、どう書けば良いのかイマイチよく分からなかった」という方もいらっしゃるかも知れませんね。
というわけで、最後にサンプルHTMLページを用意しました。
