SIRIUSでトップメニューの文字をカスタマイズする

トップページ＞ SIRIUSのカスタマイズ＞ SIRIUSのレイアウト＞ SIRIUSでトップメニューの文字をカスタマイズする

SIRIUSでトップメニューの文字をカスタマイズする

トップメニューはサイトの中で、最もクリックされやすい場所です、

ちょっとしたデザインやキーワードを工夫することで大きくクリック率が変わり、収益率も変わってきます。

ここでは、CSSを編集して、より細かくトップメニューをカスタマイズする方法をご紹介します。

トップメニューの文字の大きさを変える

上部メニューの編集タブからスタイルシートをクリックします。

スタイルシートから『#topmenu』というキーワードを検索して、以下の様な記述を見つけてください。

#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;　　←　pxを増減させることでフォントの大きさを指定できるので、お好みの大きさにしてみてください。
}

トップメニューの文字の色を変える

スタイルシートから『#topmenu span a』というキーワードを検索して、以下の様な記述を見つけてください。

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

トップメニューの文字に影を付ける

フォントに影を付けるCSSのタグは　『text-shadow: 0px 0px 6px 色コード;』です。

スタイルシートから『#topmenu span a』というキーワードを検索して、

以下の記述に『text-shadow: 0px 0px 6px #e7e7eb;』を書き加えることで文字に影を付けることができます。

#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;
text-shadow: 0px 0px 6px #e7e7eb;　←　書き加える
}

『text-shadow: 0px 0px 6px #e7e7eb;』について、

1つ目のpxは影の横のズレ幅を指定します。
2つ目のpxは影の縦のズレ幅を指定します。
3つ目のpxはぼかす範囲を指定します。

影の色を変更したい場合（#○○○）はこちらを参考にしてみてください

⇒CSS色見本