ページTOPへ

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色見本


関連ページ

SIRIUSシリウスの見出しの余白を調整する方法
SIRIUSシリウスの見出しの余白を調整する方法について説明します。
SIRIUSシリウスの見出しフォントが大きくする方法
SIRIUSシリウスの見出しフォントが大きくする方法について説明します。
SIRIUSシリウスの見出しの背景画像を変える方法
SIRIUSシリウスの見出しの背景画像を変える方法について説明します。
SIRIUSでサイドバーメニューの文字を中央寄せにする
SIRIUSでサイドバーメニュー見出しの文字を中央寄せにする 方法について説明します。
SIRIUSでサイドバーの背景を消す方法
SIRIUSでサイドバーの背景を消す方法について説明します。
SIRIUSでトップメニューのカスタマイズ方法
SIRIUSでトップメニューのカスタマイズ方法について説明します。
SIRIUSシリウスでサイトの行間と段落を広げる方法
SIRIUSシリウスでサイトの行間と段落を広げる方法について説明します。


トップページ SIRIUS機能解説 SIRIUSのカスタマイズ お勧めレンタルサーバー ご購入特典案内