stinge5のメニューをカスタマイズする方法（背景色、下線、大きさ、間隔）

費用：時間：10分

stinger5の規定だと・・・。

メニューが大きさが文字に合わせてくれるし、左揃えだし、色がバックカラーと同じということで便利なんです。

でも、カスタマイズをしたいと考えたなら、メニューの色も変えたいし、大きさも等しくしたい、カラムいっぱいに並んだほうがいいというふうに思う人もいると思います。

ということで、今回は自分のメニューをどうやってつくったかを説明しようと思います（どんどん変わるから今のと違うかもしれないけどね）

説明するコードと同じに書けば、下の画像のようなメニューになるはずです。

では行きましょう。

sponsored link

①stinger5のスタイルシートを開きましょう

wordpress管理画面＞＞外観＞＞テーマの編集＞＞スタイルシート

という順番でスタイルシートを開きましょう。

まず、バックアップを取っておきましょう。メモ帳などのテキストエディタにスタイルシートをコピーしておきましょう。

②コードの書き換え

以下の部分をさがしましょう。

/*--------------------------------
メニュー
---------------------------------*/
nav 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;
}
nav li li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border: none;
}
nav li a {
float: left;
color: #333;
text-decoration: none;
}
.menu-navigation-container {
overflow: hidden;
}
nav li a:hover {
text-decoration: underline;
}
nav li li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border: none;
}
nav li a {
float: left;
color: #333;
text-decoration: none;
}
.menu-navigation-container {
overflow: hidden;
}
nav li a:hover {
text-decoration: underline;
}

この部分が書き換える必要がある部分です。

面倒な場合は上記の部分を削除して下のコード書き換えると、たぶんこのサイトのようになると思われます。ただし少し自分のサイトに合わせて書き換える必要のある部分もありますので気を付けてください。

nav li {
position: relative;
float: left;
font-size: 18px;
padding: 0px;
width: （960÷メニューの数－１）px;　//ここだけ計算してください。この注釈は消してください。
display: inline;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #CCC;
}
.menu-navigation-container {
overflow: hidden;
}
nav li li {
overflow: hidden;
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border: none;
}
nav li a {
text-align: center;
padding: 10px 0;
width: 100%;
float: left;
color: #333;
text-decoration: none;
background: #c0c0c0;　//好きな色を入れてください。この注釈は消してください
box-shadow:rgb(128, 128, 128) 0px 0px 10px 3px;
-webkit-box-shadow:rgb(128, 128, 128) 0px 0px 10px 3px;
-moz-box-shadow:rgb(128, 128, 128) 0px 0px 10px 3px;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
}
.menu-navigation-container {
overflow: hidden;
}
.menu li:hover ul li{
overflow: visible;
height: 30px;
z-index: 1;
}

これをベースとして書き換えていけば自分好みになるかなーっておもいます。

＃以降の部分は大体色の指定をしている部分なのでレビューしながら変更していきましょう。