ページTOPへ

SIRIUSでトップメニューのカスタマイズ方法

SIRIUSでトップメニューのカスタマイズ方法

 

シリウス(SIRIUS)では設定画面より簡単に、トップメニューのデザインを変えていくことが可能です。

 

今回はCSSで、トップメニューの設定する方法を紹介します。

 

 

CSSで、トップメニューを編集する

 

トップメニューに適応されているCSSについて簡単に説明していきます。（ID名はテンプレートによって異なる場合もありますが書き込むタグ自体は変わりません）

 

このサイトのテンプレートの場合、以下の3つのIDによって装飾が指定されています。

 

  • #topmenu
  • #topmenu span a
  • #topmenu span a:hover

 

 

#topmenu

 

 

#topmenuというIDは、トップメニューの外側の大きなくくりとしてのボックスの部分になります。

 

トップメニューの高さや、どの位置にメニューを配置するのかというような大まかな装飾を指定していくことができます。

 

#topmenu span a

 

 

#topmenu span aというのはメニューバーの中に入っているspanで指定されている要素のことです。

 

#topmenu span a:hover

 

#topmenu span a:hoverというのは、上記の#topmenu span aの部分のマウスオーバー時の装飾を指定している要素です。

 

例えば、#topmenu span a:hoverの背景色を#topmenu span aとは違う色の背景色を指定することで、カーソルを置くと背景の色が変わるという演出をすることができます。

 

実際に見てみましょう。

 

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

 

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

 

 

  1. /* グローバルメニュー */
  3. #topmenu {
  4. background-repeat: repeat-x;
  5. height: 48px;　　/*←メニューそのものの高さを指定*/
  6. line-height: 42px;　　/*←メニュー内のテキストの行の高さを指定*/
  7. width: 900px;　　　　　　/*←全体の横幅を変更できる*/
  8. position: absolute;
  9. <% topMenuPlace(0) %>
  10. margin: 0px;
  11. padding: 0px;
  12. background-image: url(img/topmenu.jpg);
  13. background-position: left top;
  14. font-size: 13px;　　　 　/*←文字サイズ変更できる*/
  15. }
  17. #topmenu span a {
  18. overflow: hidden;
  19. width: 20%;
  20. _width:19.6%;
  21. <% topMenuWidth %>
  22. text-align: center;　/*←メニュー内の文字の並びを中央揃えに指定*/
  23. color: #FFFFFF;　　　　　 /*←文字の色*/
  24. font-weight: bold;
  25. text-decoration: none;
  26. float: left;　　　　　　　 /*←ボタンの位置*/
  27. height: 45px;
  28. _height:47px;
  29. background-image: url(img/menu_item.jpg);
  30. background-repeat: repeat-x;
  31. margin: 0px;
  32. padding: 0px;
  33. padding-bottom:3px;
  34. display: block;
  35. }
  38. #topmenu span a:hover {
  39. background-image: url(img/menu_item_hover.jpg);/*←背景画像を指定してマウスオーバー時のみ表示*/
  40. background-position: right top;　　/*←背景画像の位置を指定*/
  41. color: #FFFFFF;　 /*←マウスオーバー時文字色*/
  42. }

 

関連ページ

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


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