ホームページ用素材無料配布
ホームページ作成用素材ボタンNo.007
メニューなどに使えるボタンです。サイズは160×30ピクセルです。いくつか文字を入れて作成していますが、自分のサイトに必要なメニュー項目がない場合、文字の書かれていない画像をご自身で加工してご利用ください。ご利用になる場合は画像を右クリックして「名前をつけて保存」し、ご利用ください。また、ご利用規約もよく読んでください。
ホームページ素材無料ダウンロード
直リンクは絶対にやめてください!!
スタイルシート（CSS）を使ってメニューを作成
上の素材に必要な文字がなく「いちいち作ってられんワイ!!」という方は、スタイルシートを使いましょう。文字の表示は普通のテキストになります。
どうやって作るかというと
スタイルシートで以下のように書きます。
a.menu:link , a.menu:visited {
font-weight: normal; /*文字の太さ*/
text-decoration: none; /*テキストの下に下線を引くかどうか*/
background-image: url(no.gif); /*背景イメージへのリンク*/
background-repeat: no-repeat; /*背景画像は繰り返さない*/
display: block; /*ブロックで表示*/
margin: 0px; /*マージン*/
width: 125px; /*幅*/
padding-top: 7px; /*上余白*/
padding-right: 15px; /*右余白*/
padding-bottom: 12px; /*下余白*/
padding-left: 20px; /*左余白*/
line-height: normal; /*ライン高*/
font-size: small; /*文字の大きさ*/
color: #FFFFFF; /*文字の色*/
font-family: "Courier New", Courier, mono; /*フォントの種類*/
}
a.menu:hover {
color: #FFCC33; /*マウスが乗ったときの文字の色*/
}
そして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>
実際にメニューの部分だけ作ったページを作成してあります。
ご覧ください。また、そのセットをダウンロードもできます。
メニューで表示する文字が日本語の場合フォントの種類の設定を変えてみましょう。たとえば
a.menu1:link , a.menu1:visited {
font-weight: normal; /*文字の太さ*/
text-decoration: none; /*テキストの下に下線を引くかどうか*/
background-image: url(no.gif); /*背景イメージへのリンク*/
background-repeat: no-repeat; /*背景画像は繰り返さない*/
display: block; /*ブロックで表示*/
margin: 0px; /*マージン*/
width: 125px; /*幅*/
padding-top: 7px; /*上余白*/
padding-right: 15px; /*右余白*/
padding-bottom: 12px; /*下余白*/
padding-left: 20px; /*左余白*/
line-height: normal; /*ライン高*/
font-size: small; /*文字の大きさ*/
color: #000033; /*文字の色*/
font-family: "ＭＳ ゴシック", "Osaka－等幅"; /*フォントの種類*/
}
a.menu1:hover {
color: #FF99CC; /*マウスが乗ったときの文字の色*/
}
のようにすると表示は、このようになります。赤い文字の部分が変更した部分です。カラーチャートを参考にあなたのサイトにあった色に変更していきましょう。
