グローバルメニューの色のパターンをいくつかご用意しました。

こちらを参考にしてください。

 

ブルー系

ブルー系のグローバルメニュー例

上記のデザインにする場合は、以下の枠内の文字列をコピーしてください。

/* ▼▼▼ここからメニューバーの設定▼▼▼*/
/* メニューバー基本 */
.nav-menubar {
position: absolute;
margin: 0;
padding: 0;
}
.skin-blogSubA, .skin-blogSubB {
position: relative;
}
.skin-columnB .skin-blogSubA .nav-menubar,
.skin-columnC .skin-blogSubA .nav-menubar,
.skin-columnE .skin-blogSubA .nav-menubar,
.skin-columnD .skin-blogSubB .nav-menubar {
left: auto;
right: 0;
}
.skin-columnA .skin-blogSubA .nav-menubar,
.skin-columnD .skin-blogSubA .nav-menubar,
.skin-columnC .skin-blogSubB .nav-menubar {
left: 0;
right: auto;
}
.skin-columnE .skin-blogSubB .nav-menubar {
left: auto;
right: -360px;
}
.nav-menu {
margin: 0;
padding: 0;
}
.nav-menu:after {
display: block;
clear: both;
content: “_”;
height: 0;
visibility: hidden;
}.nav-menu li {
display: block;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.nav-menu li a {
display: block;
text-decoration: none;
}
.nav-menu {
width: 1120px; /* メニューバーの横幅 */
background: #add8e6; /* メニューバーの背景色(★lightblue★) */
font-weight:bold; /*太字 */
}
.nav-menu li a {
width: 222px; /* メニューバー1つの横幅 */
line-height: 60px; /* メニューバーの高さ */
margin:0; /*メニューの隙間*/
border:1px solid #ffffff;/*線の太さ 種類 色を指定[1px 直線 ]*/
color: #7f7fff; /* 文字の色 [★ブルー★]*/
}
.skin-bgHeader {
padding-bottom: 67px; /* メニューバーの表示場所確保 */
}
.nav-menubar {
top: -180px; /* メニューバーの上下位置調整 */
}/* メニューバーのデザイン(マウスオーバー時) */
.nav-menu li a:hover{ /*カーソルが乗った時という意味*/
color:#ffffff; /*文字色(白)*/
font-weight:bold; /*太字 */
text-decoration:underline;/*下線(あり)*/
background-color:#1e90ff; /*背景色(★ブルー(deepskyblue)★)*/
}
/* ▲▲▲ここまでメニューバーの設定▲▲▲*/

 

ピンク系

ピンク系のグローバルメニュー例

上記のデザインにする場合は、以下の枠内の文字列をコピーしてください。

/* ▼▼▼ここからメニューバーの設定▼▼▼*/
/* メニューバー基本 */
.nav-menubar {
position: absolute;
margin: 0;
padding: 0;
}
.skin-blogSubA, .skin-blogSubB {
position: relative;
}
.skin-columnB .skin-blogSubA .nav-menubar,
.skin-columnC .skin-blogSubA .nav-menubar,
.skin-columnE .skin-blogSubA .nav-menubar,
.skin-columnD .skin-blogSubB .nav-menubar {
left: auto;
right: 0;
}
.skin-columnA .skin-blogSubA .nav-menubar,
.skin-columnD .skin-blogSubA .nav-menubar,
.skin-columnC .skin-blogSubB .nav-menubar {
left: 0;
right: auto;
}
.skin-columnE .skin-blogSubB .nav-menubar {
left: auto;
right: -360px;
}
.nav-menu {
margin: 0;
padding: 0;
}
.nav-menu:after {
display: block;
clear: both;
content: “_”;
height: 0;
visibility: hidden;
}.nav-menu li {
display: block;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.nav-menu li a {
display: block;
text-decoration: none;
}
.nav-menu {
width: 1120px; /* メニューバーの横幅 */
background: #ffd6ff; /* メニューバーの背景色(★薄いピンク★) */
font-weight:bold; /*太字 */
}
.nav-menu li a {
width: 222px; /* メニューバー1つの横幅 */
line-height: 60px; /* メニューバーの高さ */
margin:0; /*メニューの隙間*/
border:1px solid #ffffff;/*線の太さ 種類 色を指定[1px 直線 ]*/
color: #e4007f; /* 文字の色 [★マゼンダ★]*/
}
.skin-bgHeader {
padding-bottom: 67px; /* メニューバーの表示場所確保 */
}
.nav-menubar {
top: -180px; /* メニューバーの上下位置調整 */
}/* メニューバーのデザイン(マウスオーバー時) */
.nav-menu li a:hover{ /*カーソルが乗った時という意味*/
color:#ffffff; /*文字色(白)*/
font-weight:bold; /*太字 */
text-decoration:underline;/*下線(あり)*/
background-color:#ff7fff; /*背景色(★濃いピンク★)*/
}
/* ▲▲▲ここまでメニューバーの設定▲▲▲*/

グリーン系

グリーン系 グローバルメニュー例

上記のデザインにする場合は、以下の枠内の文字列をコピーしてください。

/* ▼▼▼ここからメニューバーの設定▼▼▼*/
/* メニューバー基本 */
.nav-menubar {
position: absolute;
margin: 0;
padding: 0;
}
.skin-blogSubA, .skin-blogSubB {
position: relative;
}
.skin-columnB .skin-blogSubA .nav-menubar,
.skin-columnC .skin-blogSubA .nav-menubar,
.skin-columnE .skin-blogSubA .nav-menubar,
.skin-columnD .skin-blogSubB .nav-menubar {
left: auto;
right: 0;
}
.skin-columnA .skin-blogSubA .nav-menubar,
.skin-columnD .skin-blogSubA .nav-menubar,
.skin-columnC .skin-blogSubB .nav-menubar {
left: 0;
right: auto;
}
.skin-columnE .skin-blogSubB .nav-menubar {
left: auto;
right: -360px;
}
.nav-menu {
margin: 0;
padding: 0;
}
.nav-menu:after {
display: block;
clear: both;
content: “_”;
height: 0;
visibility: hidden;
}.nav-menu li {
display: block;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.nav-menu li a {
display: block;
text-decoration: none;
}
.nav-menu {
width: 1120px; /* メニューバーの横幅 */
background: #d1ffd1; /* メニューバーの背景色(★薄いグリーン★) */
font-weight:bold; /*太字 */
}
.nav-menu li a {
width: 222px; /* メニューバー1つの横幅 */
line-height: 60px; /* メニューバーの高さ */
margin:0; /*メニューの隙間*/
border:1px solid #ffffff;/*線の太さ 種類 色を指定[1px 直線 ]*/
color: #009933; /* 文字の色 [★グリーン★]*/
}
.skin-bgHeader {
padding-bottom: 67px; /* メニューバーの表示場所確保 */
}
.nav-menubar {
top: -180px; /* メニューバーの上下位置調整 */
}/* メニューバーのデザイン(マウスオーバー時) */
.nav-menu li a:hover{ /*カーソルが乗った時という意味*/
color:#ffffff; /*文字色(白)*/
font-weight:bold; /*太字 */
text-decoration:underline;/*下線(あり)*/
background-color:#00cc33; /*背景色(★濃いグリーン★)*/
}
/* ▲▲▲ここまでメニューバーの設定▲▲▲*/

 

イエロー系

イエロー系 グローバルメニュー例

上記のデザインにする場合は、以下の枠内の文字列をコピーしてください。

/* ▼▼▼ここからメニューバーの設定▼▼▼*/
/* メニューバー基本 */
.nav-menubar {
position: absolute;
margin: 0;
padding: 0;
}
.skin-blogSubA, .skin-blogSubB {
position: relative;
}
.skin-columnB .skin-blogSubA .nav-menubar,
.skin-columnC .skin-blogSubA .nav-menubar,
.skin-columnE .skin-blogSubA .nav-menubar,
.skin-columnD .skin-blogSubB .nav-menubar {
left: auto;
right: 0;
}
.skin-columnA .skin-blogSubA .nav-menubar,
.skin-columnD .skin-blogSubA .nav-menubar,
.skin-columnC .skin-blogSubB .nav-menubar {
left: 0;
right: auto;
}
.skin-columnE .skin-blogSubB .nav-menubar {
left: auto;
right: -360px;
}
.nav-menu {
margin: 0;
padding: 0;
}
.nav-menu:after {
display: block;
clear: both;
content: “_”;
height: 0;
visibility: hidden;
}.nav-menu li {
display: block;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.nav-menu li a {
display: block;
text-decoration: none;
}
.nav-menu {
width: 1120px; /* メニューバーの横幅 */
background: #ffff7f; /* メニューバーの背景色(★イエロー★) */
font-weight:bold; /*太字 */
}
.nav-menu li a {
width: 222px; /* メニューバー1つの横幅 */
line-height: 60px; /* メニューバーの高さ */
margin:0; /*メニューの隙間*/
border:1px solid #ffffff;/*線の太さ 種類 色を指定[1px 直線 ]*/
color: #808080; /* 文字の色 [★グレー★]*/
}
.skin-bgHeader {
padding-bottom: 67px; /* メニューバーの表示場所確保 */
}
.nav-menubar {
top: -180px; /* メニューバーの上下位置調整 */
}/* メニューバーのデザイン(マウスオーバー時) */
.nav-menu li a:hover{ /*カーソルが乗った時という意味*/
color:#ffffff; /*文字色(白)*/
font-weight:bold; /*太字 */
text-decoration:underline;/*下線(あり)*/
background-color:#ffbf7f; /*背景色(★オレンジ★)*/
}
/* ▲▲▲ここまでメニューバーの設定▲▲▲*/

 

ブラック系

ブラック系 グローバルメニュー例

上記のデザインにする場合は、以下の枠内の文字列をコピーしてください。

/* ▼▼▼ここからメニューバーの設定▼▼▼*/
/* メニューバー基本 */
.nav-menubar {
position: absolute;
margin: 0;
padding: 0;
}
.skin-blogSubA, .skin-blogSubB {
position: relative;
}
.skin-columnB .skin-blogSubA .nav-menubar,
.skin-columnC .skin-blogSubA .nav-menubar,
.skin-columnE .skin-blogSubA .nav-menubar,
.skin-columnD .skin-blogSubB .nav-menubar {
left: auto;
right: 0;
}
.skin-columnA .skin-blogSubA .nav-menubar,
.skin-columnD .skin-blogSubA .nav-menubar,
.skin-columnC .skin-blogSubB .nav-menubar {
left: 0;
right: auto;
}
.skin-columnE .skin-blogSubB .nav-menubar {
left: auto;
right: -360px;
}
.nav-menu {
margin: 0;
padding: 0;
}
.nav-menu:after {
display: block;
clear: both;
content: “_”;
height: 0;
visibility: hidden;
}.nav-menu li {
display: block;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.nav-menu li a {
display: block;
text-decoration: none;
}
.nav-menu {
width: 1120px; /* メニューバーの横幅 */
background: #dcdcdc; /* メニューバーの背景色(★薄いグレー★) */
font-weight:bold; /*太字 */
}
.nav-menu li a {
width: 222px; /* メニューバー1つの横幅 */
line-height: 60px; /* メニューバーの高さ */
margin:0; /*メニューの隙間*/
border:1px solid #ffffff;/*線の太さ 種類 色を指定[1px 直線 ]*/
color: #000000; /* 文字の色 [★黒★]*/
}
.skin-bgHeader {
padding-bottom: 67px; /* メニューバーの表示場所確保 */
}
.nav-menubar {
top: -180px; /* メニューバーの上下位置調整 */
}/* メニューバーのデザイン(マウスオーバー時) */
.nav-menu li a:hover{ /*カーソルが乗った時という意味*/
color:#ffffff; /*文字色(白)*/
font-weight:bold; /*太字 */
text-decoration:underline;/*下線(あり)*/
background-color:#000000; /*背景色(★黒★)*/
}
/* ▲▲▲ここまでメニューバーの設定▲▲▲*/

 

その他の色を使いたい場合

色の情報は、こちらのサイトを参考にしてください。

こちらのサイトの赤枠部分のメニューで色々なパターンの色を確認できます。

色は、

#000000

という形で、「#」と6桁の英数字で表現されています。

このルールを知っておくことで、自分の使いたい色を使っていくことができます。

 

色を指定する部分は、4か所のみです。

詳しくは、PDFファイルにてご確認ください。

 

 

 

 

PAGE TOP