こんにちは、ふじもです。

今回は賢威7のグローバルメニューをカスタマイズしてみましょう。

まず「外観」→「テーマの編集」→「base.css」を開き、下記の部分を探して下さい。

/*——————————————————–
グローバルナビ
——————————————————–*/

.global-nav{
padding: 0;
background: #111111;
}

/*グローバルナビの開閉用ボタン*/
.global-nav-panel{
display: none;
font-size: 12px;
}

.global-nav-panel span{
display: block;
min-height: 20px;
line-height: 20px;
}

.icon-gn-menu{
padding-left: 25px;
background: url(./images/icon/icon-gn-menu.png) left center no-repeat;
}

.icon-gn-close{
padding-left: 25px;
background: url(./images/icon/icon-gn-close.png) left center no-repeat;
}

/*Retina（高解像度）ディスプレイ用*/
@media screen and (-webkit-min-device-pixel-ratio:2),
(min-resolution: 2dppx){
.icon-gn-menu{
background: url(./images/icon/icon-gn-menu@2x.png) left center no-repeat;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
}

.icon-gn-close{
background: url(./images/icon/icon-gn-close@2x.png) left center no-repeat;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
}
}

.global-nav .show-menu,
.global-nav .show-menu li ul{
display: block!important;
}

.global-nav-in ul{
display: table;
width: 100%;
margin: 0;
padding: 0;
border-left: 1px solid #bcbcbc;
table-layout: fixed; /*メニューの幅を均等に*/
}

.global-nav-in li{
display: table-cell;
list-style: none;
position: relative;
vertical-align: middle;
margin: 0;
border-right: 1px solid #bcbcbc;
text-align: center;
}

.global-nav-in li a{
display: block;
min-height: 1.5em; /*メニュー毎に高さが変わるときに調整*/
padding: 1em; /*画像をメニューにする場合は値を0に*/
background-color: #111111;
color: #fff;
text-decoration: none;
}

.global-nav-in li a:hover,
.global-nav-in li a:active,
.global-nav-in li a:focus{
background-color: #eee;
color: #333;
}

見つけられましたら、下記の赤字部分をお好きなようにカスタマイズしてみましょう。

/*——————————————————–
グローバルナビ
——————————————————–*/

.global-nav{
padding: 0;
background: #0095ff;（グローバルメニューの背景色を指定できます）
font-size: 20px;（グローバルメニューのフォントサイズを指定できます）
font-weight: bold;（グローバルメニューのフォントサイズを太字にできます）
font-family: “メイリオ”;（グローバルメニューのフォントを指定できます）
}

/*グローバルナビの開閉用ボタン*/
.global-nav-panel{
display: none;
font-size: 12px;
}

.global-nav-panel span{
display: block;
min-height: 20px;
line-height: 20px;
}

.icon-gn-menu{
padding-left: 25px;
background: url(./images/icon/icon-gn-menu.png) left center no-repeat;
}

.icon-gn-close{
padding-left: 25px;
background: url(./images/icon/icon-gn-close.png) left center no-repeat;
}

/*Retina（高解像度）ディスプレイ用*/
@media screen and (-webkit-min-device-pixel-ratio:2),
(min-resolution: 2dppx){
.icon-gn-menu{
background: url(./images/icon/icon-gn-menu@2x.png) left center no-repeat;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
}

.icon-gn-close{
background: url(./images/icon/icon-gn-close@2x.png) left center no-repeat;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
}
}

.global-nav .show-menu,
.global-nav .show-menu li ul{
display: block!important;
}

.global-nav-in ul{
display: table;
width: 100%;
margin: 0;
padding: 0;
border-left: 0px solid #bcbcbc;
table-layout: fixed; /*メニューの幅を均等に*/
}

.global-nav-in li{
display: table-cell;
list-style: none;
position: relative;
vertical-align: middle;
margin: 0;
border-right: 0px solid #bcbcbc;
text-align: center;
}

.global-nav-in li a{
display: block;
min-height: 1.5em; /*メニュー毎に高さが変わるときに調整*/
padding: 1em; /*画像をメニューにする場合は値を0に*/
background-color: #0095ff;（項目の背景色を指定できます）
color: #000;（項目の文字色を指定できます）
text-decoration: none;
}

.global-nav-in li a:hover,
.global-nav-in li a:active,
.global-nav-in li a:focus{
background-color: #13c;（項目にカーソルを合わせた時の背景色を指定できます）
color: #fff;（項目にカーソルを合わせた時の文字色を指定できます）
}

以上で賢威7のグローバルメニューをカスタマイズできます、ご参考にしていただければ幸いです。

ここまでお読みいただき、ありがとうございました。