Web標準のテンプレート販売 - ActiveStyle アクティブスタイル

メニューの背景画像の変更方法 - typeB シリーズ

概要

「css」フォルダ内の「images」フォルダ内にメニューボタン用画像として、「menu_background.gif」と「menu_background02.gif」があります。初期状態のメインメニュー背景は前者になっていますが、以下の2通りの方法でメインメニューの背景画像を差し替える事ができます。

メニューボタンの差し替え

ファイルのリネームによる変更

「css」フォルダ内の「images」フォルダ内の、下記ファイルをリネームしてください。

menu_background.gifを
　　　↓
menu_background02.gifに

この方法による画像の差し替えでは、前のファイル（02の付いていないもの）を誤って削除しないようお気をつけください。

CSSのコード書き換えによる変更

「css」フォルダ内の「styles-site.css」内の下記の記述を変更してください。

#mainmenu {
border-top:#BBB solid 1px;
border-bottom:#666 solid 1px;
background: url(images/menu_background.gif) repeat-x;
}

　　　↓

#mainmenu {
border-top:#BBB solid 1px;
border-bottom:#666 solid 1px;
background: url(images/menu_background02.gif) repeat-x;
}

この方法による画像の差し替えには、CSSの定義を変更する必要があります。CSSの知識のある方にはこちらの方法がおすすめです。