無地のボタン画像に文字を重ねて表示させる方法

それでは、具体的な記述方法をご紹介致しましょう。

準備

無地のボタン画像 まず、無地のボタン画像を用意して下さい。ここでは、右のような画像を用意しました。 画像はフリー素材集などから好きなものを見つけてくると良いでしょう。
そして、正確な縦横のサイズ(ピクセル数)をメモしておきます。ここでは、横幅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ページを用意しました。

それでは、次のページへ! →