CSSで設定したバックグランドをクリッカブルボタンにする - 1/2

SEO対策をすすめていくと、どうしてもメニューボタンを画像ではなく、「HTMLの構造化 - テキストボタン編」で紹介したような、リストタグとCSSレイアウトを使ったデザインをします。

しかし、バックグランドに色を指定するだけでは、どうしてもデザイン単調になり、面白みに欠けてしまいます。

そんな場合に使うテクニックが、「background-image」属性にバックグラウンドになる画像を指定する方法です。
もちろん、ボタンに使う文字は画像ではなく「テキスト」を使用します。

サンプルはこちらです。

CSS BG MENU

バックグランドのイメージを使ったボタンのように見えています。
CSSレイアウトを試したことがある人であれば、よくご存知の「height」「width」と「border」属性を指定してレイアウトです。
この場合、「display: block;」を指定しておくことを忘れないでください。
これを忘れると、「height」「width」で指定したサイズではなく、文字の幅にぴったりしたボタンになってしまいます。

今回指定したCSSのソースはこちらです。

<style type="text/css">
<!--
.bg-menu{
background-image: url(http://jrk.cocolog-nifty.com/2004/images/20060217_bg.gif);
height: 30px;
width: 150px;
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Serif;
font-size: 1em;
background-repeat: no-repeat;
text-align: center;
font-weight: bold;
line-height: 1.8em;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFEBD7;
border-right-color: #FFCC99;
border-bottom-color: #FFCC99;
border-left-color: #FFEBD7;
display: block;
}
-->
</style>

しかし、このサンプルは、見かけ上ボタンの形をしていますが、クリックできる部分は文字だけしかありません。
次回は、この文字だけしかクリックできないボタンをボタン全体をクリッカブルにする方法をご紹介します。

◇この記事が参考になりましたらこちらをクリック ≫ 人気blogランキング

◇「『うぇっぶ』のはなし」へのコメント募集中 ≫ ビジネスブログランキング100選