グローバルメニューのデザインカスタマイズ

シリウスカスタマイズＴＯＰ＞グローバルメニューのデザインカスタマイズ

グローバルメニューのカスタマイズ解説

グローバルメニュー

グローバルメニューは読者に訴えたい重要な情報

又は　読者が求めるであろう情報をいち早く認識していただくために
メニューとして表示するものです

グローバルメニューはデフォルトでも充分綺麗な見やすい構成なのですが

カスタムするに至り　スタイルシートで変更が必要になることもあります

ここではグローバルメニューのイメージを変えるための

フォント　文字色　大きさ　変更に伴う位置変更を

何処をどうするかを簡単に説明しております

2014　1231更新
シリウスグローバルメニューカスタマイズテーマ　イメージ変更

変更箇所と変更方法

背景カラー変更については　サイドの左メニュー内

カラーテンプレート作成手順内で解説されております

カスタマイズする場合スタイルシートで記述変更します

ご注意　
各ユーザー使用のスタイルシートにより　数字の順位が異なることもあります

スタイルシートを開いてグローバルメニューの欄を見てみましょう

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

#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;

変更説明

文字サイズを変更したり上下幅を小さくしているサイトは
まれに見かけることがございます

縦幅数値を小さくしたら　文字位置も合わせてずらしてください

フォント　文字カラー変更

デフォルトのグローバルメニューフォントカラーは白ですね

白が一番きれいなのですが　何かしらの事情で薄いカラー

グレーの薄いカラー　　または白に近いカラーでグローバルメニューの
背景カラーにした場合は　白文字ですと　認識しずらくなります

やはり見えにくいとなると　読者様も情報収集に迷割れるかもしれません

それなら　見やすいフォントカラーに変更しましょう

color: #FFFFFF;のカラーコードを変えてください

フォント　文字サイズ
font-size: 13px;の数値変更

フォント上下の位置