こんにちは、ふみです。みなさんはHTMLのボタン要素に画像を表示させたいと思ったことはありますか？
今回はHTML5 (Hyper Text Markup Language version5) でボタン要素を画像にする方法を紹介します。
CONTENTS
ボタンを作成する
まずはボタンを作成します。作成方法は次のとおりです。
<button type="button">ボタン名</button>
WordPress（ワードプレス）では、このコードを「カスタムHTML」に貼り付けるとボタンが表示されます。
下のボタンは記事内に挿入したカスタムHTMLに上記コードを貼り付けたものです。
WordPressではテーマのCSSの影響を受けるので、テーマによってボタンの形が異なります。
フォーム内のボタン要素に「type=”button”」を入れない場合、フォームの内容がリセットされてしまうことに注意しましょう。
ボタンを押した時にフォームの入力したデータが全てクリアになってしまった場合、ボタン要素に「type=”button”」を入れ忘れている可能性が高いです。
ボタンの表示を画像にする
次に画像が表示されるボタンを作成します。作成方法は次のとおりです。
<button type="button" style="height: 50px;"> <img src="（画像のパス名）" alt="Button Image" style="height: 100%;"> </button>
「ボタンを作成する」で紹介したコードの「ボタン名」の部分をimg要素に置き換えています。
大きさを指定せずに使用すると、元の画像の大きさのボタンになってしまうので、ボタンの高さを「50px」、画像の高さを親要素（ここではbutton要素）の100%で指定しています。
下のボタンは記事内に挿入したカスタムHTMLに上記コードに、このページのアイキャッチ画像のパスを設定して貼り付けたものです。
同じ画像のボタンを複数作成する
同じ画像のボタンを作成するときは画像のパスをCSSで記述のが便利です。作成方法は次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像のボタン</title>
<style>
button.gazo {
height: 50px;
}
button.gazo img {
content: url("（画像のパス名）");
display: inline-block;
height: 100%;
}
</style>
</head>
<body>
<button type="button" class="gazo">
<img alt="Button1 Image">
</button>
<button type="button" class="gazo">
<img alt="Button2 Image">
</button>
</body>
</html>
この例ではbutton要素にgazoというクラスを追加し、styleタグ内でスタイルを設定しています。
contentプロパティで画像のパスを指定すると、画像のパスの記述は1回のみでOKです。
上記コードはメモ帳等のテキストエディタにコピー＆ペーストして、「（画像のパス名）」に画像ファイルのパスを設定した後、拡張子「.html」で保存後、ブラウザから開くと確認できます。
下のボタンは記事内に挿入したカスタムHTMLに上記コードに、このページのアイキャッチ画像のパスを設定して貼り付けたものです。
CSSでcontentプロパティに画像のパスを記述してボタンに使用する場合、img要素のスタイルを「display: inline-block;」で指定しないと、画像のサイズの指定が無視されて、元のサイズのまま（ボタンのサイズからはみ出して）表示されます。
画像のボタンが反応しないとき
画像のボタンが一部反応しない記述例
画像のボタンは押す場所によって反応しないことがあります。
まずは画像の上下に余白があるボタンを作成します。コードの記述は次のとおりです。
<button type="button" style="height: 100px;">
<img src="（画像のパス名）" alt="Button Image" style="height: 50%;" onclick="alert('ボタンが押されました');">
</button>「ボタンの表示を画像にする」で紹介したコードのボタンの高さを「100px」、img要素の高さを50%に変更し、ボタンが押された時にアラートウィンドウが表示されるように「onclick~」の記述を追加しています。
下のボタンは記事内に挿入したカスタムHTMLに上記コードに、このページのアイキャッチ画像のパスを設定して貼り付けたものです。
上のボタンの、画像の部分と、余白の部分を押しくらべてみてください。
画像を押したときは「ボタンが押されました」というアラートウィンドウが表示されますが、画像が入っていない部分を押したときは何も表示されません。
これは、本来、button要素に「onclick~」の記述しなければいけないところ、img要素に「onclick~」を記述している為、余白部分を押しても反応しない状態になっています。
画像のボタンの余白を押しても反応する記述例
今度はさきほどの画像の上下に余白があるボタンを作成した後、button要素に「onclick~」の記述をします。コードの記述は次のとおりです。
<button type="button" style="height: 100px;" onclick="alert('ボタンが押されました');">
<img src="（画像のパス名）" alt="Button Image" style="height: 50%;">
</button>下のボタンは記事内に挿入したカスタムHTMLに上記コードに、このページのアイキャッチ画像のパスを設定して貼り付けたものです。
画像が入っていない部分を押しても反応するようになりました。
画像が入っていない部分を押した時に反応しない場合、「onclick~」を記述した場所（要素）が間違っている可能性があるので、見直してみましょう。
まとめ
- フォーム内のボタン要素に「type=”button”」を入れない場合、フォームの内容がリセットされるので注意する
- ボタン要素を画像にするにはimg要素を使う
- 同じ画像のボタンを複数作成するには、CSSにパスを記述すると1回でできる
- CSSでcontentプロパティに画像のパスを記述してボタンに使用する場合、img要素のスタイルを「display: inline-block;」で指定しないと画像のサイズ指定が反映されない
- 画像のボタンは余白部分を押しても反応しない時は「onclick~」を記述した場所（要素）が間違っている可能性がある。
ありがとうございました。
コメント