2014　1231
シリウスグローバルメニューカスタマイズ　　ＣＳＳ指定で背景カラー変更
デフォルトテンプレート対応

シリウスデフォルトのグローバルメニューは画像を呼び込み事で
そのスタイルが確認できます

通常は画像を切り替えることでカラー変更やデザインを変更するのですが
スタイルシートからでも　カラーコード変更で好みに変えることも
可能です

ただし　カラーコードですので陰陽までは表現できません

単体の平面的な画像となりますので　ｃｓｓ記述に
仕切り線を追加しておりますが　不要の場合は削除してください

今回の方法は　通常画像として呼び出すグローバルメニューの背景を
カラーコードに書き換えて表現するというものです

作業箇所は2か所です

スタイルシートを開いてください

/* グローバルメニュー */

#topmenu {
background-repeat: repeat-x;
height: 48px;
line-height: 42px;
width: 900px;
position: absolute;

margin: 0px;
padding: 0px;
background-image: url(img/topmenu.jpg);
background-position: left top;
font-size: 13px;
}

#topmenu span a {
overflow: hidden;
width: 20%;
_width:19.6%;

text-align: center;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
float: left;
height: 45px;
_height:47px;
background-image: url(img/menu_item.jpg);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
padding-bottom:3px;
display: block;
border-left: 1px solid #fff; //ここから下仕切り線指定を追加したもの
overflow: hidden;不要なら削除してください
display: inline;
margin-left: -1px;
height: 36px;

}

#topmenu span a:hover {
background-image: url(img/menu_item_hover.jpg);
background-position: right top;
color: #FFFFFF;
}

改行する箇所

カラーコードを例としてcolor: #FFFFFF;にしてありますが
好みのカラーに書き換えてください
ホバー時のカラーはクリックした際に色変わりとして表示されるものです

初期ディスプレイ記述
background-image: url(img/menu_item.jpg);

以下に変更
background-color: #FFFFFF;

初期ホバーディスプレイ記述
background-image: url(img/menu_item_hover.jpg);

background-color: #FFFFFF;

スポンサーリンク

シリウスグローバルメニューＣＳＳ背景カラー変更カスタマイズ
グローバルメニューのカスタマイズ
シリウスカスタマイズトップ