スポンサーリンク
外観→テーマの編集→style.cssを選択し、下の方にある下記部分を編集します。デフォルトでは下記になります。
/*--------------------- ナビゲーション --------------------- */ #navi-in li { position: relative; float: left; font-size: 13px; padding-left: 10px; display: inline; padding-right: 10px; border-left-width: 1px; border-left-style: dotted; border-left-color: #CCC; padding-top: 5px; padding-bottom: 5px; } #navi-in li li { float: left; font-size: 13px; padding-left: 10px; display: inline; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; border: none; } #navi-in li a { float: left; color: #333; text-decoration: none; } .menu-navigation-container { overflow: hidden; } #navi-in li a:hover { text-decoration: underline; }
スポンサーリンク
Wel では
Wel ではこのように設定しております。cssの知識があれば、簡単にできると思います。
#navi-in { background-image: url(背景画像リンク先を指定してます); background-repeat: repeat-x; } #navi-in li { color: #ffffff; line-height: 40px; position: relative; float: left; font-size: 15px; padding-left: 0px; display: inline; padding-right: 0px; border-left-width: 0px; padding-top: 0px; padding-bottom: 0px; } #navi-in li li { color: #ffffff; float: left; font-size: 15px; padding-left: 0px; display: inline; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; border: none; } #navi-in li a { color: #ffffff; float: left; text-decoration: none; background-color: #333333; padding-left: 15px; display: inline; padding-right: 15px; } .menu-navigation-container { overflow: hidden; } #navi-in li a:hover { color: #000000; background-color: #f7f7f7; padding-left: 15px; display: inline; padding-right: 15px; text-decoration: none; }
Wel でのコードの説明
#navi-in { background-image: url(背景画像リンク先を指定してます); background-repeat: repeat-x; }
デフォルトではこの部分はないので追加しました。背景画像を用意し、background-repeat: repeat-x;でその画像を繰り返し使用しています。繰り返し使用することにより、用意した画像は10px × 40pxですが、コンテンツのメイン領域全体にナビがいきます。
その他変更箇所は
その他には背景色をbackground-color: #f7f7f7;で設定したり、line-height: 40px;で高さを広げたりしました。いろいろ変更してみると面白いと思います。
ABOUT ME

スポンサーリンク