グローバルメニューはサイトの中でもクリックされやすい場所

 

今回はCSSを編集してより細かくグローバルメニューを

 

設定する方法を紹介します。

 

シリウス(SIRIUS)では設定画面より簡単に、

 

グローバルメニューのキーワードやデザインを

 

変えていくことが可能です。

 

 

 

 

 

また

 

今回はCSSを編集してより細かくグローバルメニューを

 

設定する方法を紹介します。

 

 

 

シリウスでグローバルメニューを編集する方法

 

 

 

メイン画面の『編集』タブより『メニューの編集』ボタンをクリックします。

 

すると『サブメニュー設定』画面にいくので、

 

『トップメニュー』タブを選択し、『新規追加ボタン』をクリックします。

 

 

 

リンクの設定画面になりますので、

 

表示するテキストとリンク先ＵＲＬを設定することで

 

グローバルメニューが設定されていきます。

 

 

 

 

 

 

グローバルメニューカスタマイズ方法（CSS編）

 

CSS

 

 

 

上記設定以外にもＣＳＳを操作することで

 

更に細かい設定を行なうことが出来ます。

 

 

 

 

 

 

設定画面からのCSS編集画面を開く方法は、

 

上部タブメニューの『編集』タブから上の画像で赤枠で

 

囲っている箇所をクリックするか、

 

 

 

 

 

上部メニューバーの『テンプレート』⇒『スタイルシート編集』を

 

クリックすることでCSS編集画面に行きます。

 

 

 

 

 

 

<グローバルメニュー文字CSS設定>

 

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

 

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

 

 

#topmenu span a:hover {
background-image: url(img/menu_item_hover.jpg);
background-position: right top;
color: #FFFFFF;　 /*←マウスオーバー時文字色*/
}

 

 

 

 

上記方法でシリウス（SIRIUS）のグローバルメニューを

 

自在に変更していくことができます。