ホームページ用素材無料配布
ホームページ作成用素材ボタンNo.012
メニューなどに使えるボタンです。ラフな感じにしました。サイズは170×40ピクセルです。透過処理していますので、背景に何をもってきてもよいでしょ う。いくつか文字を入れて作成していますが、自分のサイトに必要なメニュー項目がない場合、文字の書かれていない画像をご自身で加工してご利用ください。 ご利用になる場合は画像を右クリックして「名前をつけて保存」し、ご利用ください。また、ご利用規約もよく読んでください。
ホームページ素材無料ダウンロード
直リンクは絶対にやめてください!!
スタイルシート（CSS）を使ってメニューを作成
上の素材に自分のサイトに必要な文字がなく「いちいち作ってられんワイ!!」とか、「そんなソフト持っておらんぞ!!」という方は、スタイルシートを使いましょう。スタイルシートを使えば、メニューボタンの画像を作成する必要もありませんし、将来コンテンツが増え、メニューを増やしたときもHTMLを編集するだけですみますから楽チンです。
ただ、文字の表示は普通のテキストになりますからフォントにこだわることは出来ません。
どうやって作るかというと
スタイルシートで以下のように書きます。
a.menu:link , a.menu:visited {
font-weight: bold; /*文字の太さ*/
text-decoration: none; /*テキストの下に下線を引くかどうか*/
background-image: url(no.gif); /*背景イメージへのリンク*/
background-repeat: no-repeat; /*背景画像は繰り返さない*/
display: block; /*ブロックで表示*/
margin: 0px; /*マージン*/
width: 140px; /*幅*/
padding-top: 15px; /*上余白*/
padding-right: 15px; /*右余白*/
padding-bottom: 14px; /*下余白*/
padding-left: 15px; /*左余白*/
line-height: normal; /*ライン高*/
font-size: small; /*文字の大きさ*/
color: #663300; /*文字の色*/
font-family: "Courier New", Courier, mono; /*フォントの種類*/
}
a.menu:hover {
color: #FF3300; /*マウスが乗ったときの文字の色*/
}
そしてHTMLは以下のように書きます。
<div><a href="リンク先アドレス" class="menu">TOP PAGE </a></div>
<div><a href="リンク先アドレス" class="menu">WHAT'S NEW </a></div>
<div><a href="リンク先アドレス" class="menu">SHOPPING</a></div>
<div><a href="リンク先アドレス" class="menu">INFORMATION</a></div>
<div><a href="リンク先アドレス" class="menu">CONTACT US </a></div>
実際にメニューの部分だけ作ったページを作成してあります。
ご覧ください。また、そのセットをダウンロードもできます。
メニューで表示する文字が日本語の場合フォントの種類の設定を変えてみましょう。たとえば
font-family: "ＭＳ ゴシック", "Osaka－等幅"; /*フォントの種類*/
のようにすると表示は、このようになります。
