【超初心者向け】アメブロテンプレート別メニューバーの色が変更できます。今使ってる素敵なテンプレートにそのままコピペでOk

2024.05.15

こんにちは

ケイト

1人でアメブロのカスタマイズと戦っているあなたのお手伝い、
講師の杏純(アンジュ)・ケイトです。

手軽に始められて
たくさんの人に知ってもらえるツール。

ﾊｯﾋﾟｰちゃん

それが「アメブロ」

また、いろんなテンプレートがあったり
きれいなブログが簡単に出来るんだけど

他の人のアメブロみたいに
ちょっと変えてみたいけどどうしたらいいの？

というあなたのお悩みにお答えします。

せっかくメニューバーを作ったけど、テンプレートに合わないから色を変更したい
基本の使い方
ピンク系のメニューバー
ブルー系のメニューバー
紫系のメニューバー
グリーン系のメニューバー
1. テンプレート名：ベルフラワー(カテゴリ：かわいい)
2. 他の緑を探したいならこちら
黄色系のメニューバー
1. テンプレート名：スイカサマー(カテゴリ：季節・イベント)
2. 他の黄色を探したいならこちら
ゴールド系のメニューバー
1. テンプレート名：Christmas Town(カテゴリ：カラフル)
2. 他の茶を探したいならこちら
【おまけ】自分で好きな色の枠を作りたい方へ
【おまけ】うまくいかない！そんな時は？

せっかくメニューバーを作ったけど、テンプレートに合わないから色を変更したい

ケイト

アメブロメニューバーの色を変更するのは
ここを変えたらいいんですよ

と言ってみましたが

いじったら変な事になってしまった

というアメブロのブロガーさんが。

あなたの本業はサロンをやっていくこと！

アメブロカスタマイズで時間を浪費してはいけません！

ということで、
実際のアメブロテンプレートと
色を合わせたメニューバーを気が向いた時に追加することにしました。

ﾊｯﾋﾟｰちゃん

実際の貼り付け方は、「貼り付け編」をご覧くださいね。

基本の使い方

例えばテンプレートを変更して、こんなピンクにしたい時

(メニューバーをすでに作っていて、色だけ変更したい人)

色だけを変更したい場合、この<style>～</style>だけをコピペします。

もし、コードを自分で書き換えられる方はピンク色の文字のみ変更してもオッケーです。

ﾊｯﾋﾟｰちゃん

どちらが楽かはお好みで。

<style>.skinContentsArea2,#contentsArea{position:relative;width:980px;padding-top:70px;} .skinContentsArea2 #navi,#contentsArea #navi{position:absolute;top:1px;left:4px;width:980px;font-size:14px !important;font-weight:bold;}#contentsArea #rightArea{width:660px !important;}#wideContentsArea #header{width:980px;}.profDetailWrap #navi,#ucsMainContent #navi{display:none;}.skin-blogHeaderNav{padding-top:50px;border:none;}.skin-blogBodyInner{padding-top:30px;}.skin-blogSubA,.skin-blogSubB{position:relative;}.skin-blogSubA #navi,.skin-blogSubB #navi{position:absolute;top:-150px;width:1110px;font-weight:bold;font-size:16px !important;}[data-uranus-layout="columnA"] #navi,[data-uranus-layout="columnC"] .skin-blogSubB #navi,[data-uranus-layout="columnD"] .skin-blogSubA #navi{left:5px;}[data-uranus-layout="columnB"] #navi,[data-uranus-layout="columnC"] .skin-blogSubA #navi,[data-uranus-layout="columnD"] .skin-blogSubB #navi,[data-uranus-layout="columnE"] .skin-blogSubA #navi{right:5px;}[data-uranus-layout="columnE"] .skin-blogSubB #navi{left:-495px;} #navi ul li{margin:0;padding:0;display:inline;width:20%;line-height:3.0;float:left;overflow:hidden;white-space:nowrap;}#navi ul li a{margin:0px 6px 6px 0;display:block;text-align:center;text-decoration:none;background:#ff8080;color:#ffffff !important;border-radius:0px;box-shadow:2px 2px 2px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:2px 2px 2px #cccccc;background-color: #ffffff!important;color: #7B746B !important;}</style>

ﾊｯﾋﾟｰちゃん

はりつけ場所はこの
<div id="navi">～</div>って書いてある所のあとに

ﾊｯﾋﾟｰちゃん

この<div id="navi">～</div>って書いてある所はメニュー部分のリンクなんです。

<div id="navi"><ul><li class="left"><a href="#">プロフィール</a></li><li><a href="#">教室メニュー</a></li><li><a href="#">実績一覧</a></li><li><a href="#">教室ポリシー</a></li><li><a href="#">お問い合わせ</a></li></ul></div>

メニュー部分を上書きすると、メニューのリンクまで書き直しになるので色だけを変更したい場合、この<style>～</style>だけをコピペしてね

では、基本がわかったところで早速コピペしましょう。

気に入ったメニューバーの色が見つかるといいですね。

基本がわからない方はこちらを参考に

【超初心者向け】アメブロでもメニューバーを作りたい！今使ってる素敵なテンプレートにそのままコピペで、お仕事サイトっぽいメニューバー作れます♡

(2020年4月更新)アメブロが商用OKとなり、小さなサロンのオーナー様や個人事業主の方もますます使いやすくなった「アメブロ」。きれいなテンプレートもたくさんあって使いやすい♡でも、やっぱりお仕事に使うならトップに欲しいですよね。「メニューバー」。なんと、今お使いのテンプレートにそのまま「コピペ」するだけで、お客様にも使いやすいあの「メニューバー」が作れちゃうんですよ。

ピンク系のメニューバー

まずはよく使うピンク系

テンプレート名:カーネーション(カテゴリ:写真)

こんな色で合わせてみました。

使用色：#ff8080

この<style>～</style>だけを
<div id="navi">～</div>の後にコピペ

コピペはここをクリック

テンプレート名:Fresh Table(カテゴリ:ナチュラル)

実はメニューバーの色は上と同じ色です。わかりますか？

使用色：#ff8080

この<style>～</style>だけを
<div id="navi">～</div>の後にコピペ

コピペはここをクリック

テンプレート名:あじさい(カテゴリ:季節・イベント)

ピンクのボタンの文字に色を付けました。

使用色：#f8c7df

この<style>～</style>だけを
<div id="navi">～</div>の後にコピペ

コピペはここをクリック

<style>.skinContentsArea2,#contentsArea{position:relative;width:980px;padding-top:70px;} .skinContentsArea2 #navi,#contentsArea #navi{position:absolute;top:1px;left:4px;width:980px;font-size:14px !important;font-weight:bold;}#contentsArea #rightArea{width:660px !important;}#wideContentsArea #header{width:980px;}.profDetailWrap #navi,#ucsMainContent #navi{display:none;}.skin-blogHeaderNav{padding-top:50px;border:none;}.skin-blogBodyInner{padding-top:30px;}.skin-blogSubA,.skin-blogSubB{position:relative;}.skin-blogSubA #navi,.skin-blogSubB #navi{position:absolute;top:-150px;width:1110px;font-weight:bold;font-size:16px !important;}[data-uranus-layout="columnA"] #navi,[data-uranus-layout="columnC"] .skin-blogSubB #navi,[data-uranus-layout="columnD"] .skin-blogSubA #navi{left:5px;}[data-uranus-layout="columnB"] #navi,[data-uranus-layout="columnC"] .skin-blogSubA #navi,[data-uranus-layout="columnD"] .skin-blogSubB #navi,[data-uranus-layout="columnE"] .skin-blogSubA #navi{right:5px;}[data-uranus-layout="columnE"] .skin-blogSubB #navi{left:-495px;} #navi ul li{margin:0;padding:0;display:inline;width:20%;line-height:3.0;float:left;overflow:hidden;white-space:nowrap;}#navi ul li a{margin:0px 6px 6px 0;display:block;text-align:center;text-decoration:none;background:#f8c7df;color:#7B746B !important;border-radius:0px;box-shadow:2px 2px 2px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:2px 2px 2px #cccccc;background-color: #ffffff!important;color: #7B746B !important;}</style>

テンプレート名:フラワーギター(カテゴリ:パステル)

テンプレートのボタンと同じ色にしました。

使用色：#cf9fcf

この<style>～</style>だけを
<div id="navi">～</div>の後にコピペ

コピペはここをクリック

他のピンク色を探したいならこちら

【ピンク系】実際に見てコピペできる色コレクション♡お気に入りの色があったら、アメブロの囲み枠やメニューバーの色に使ってみてね。

【ピンク色系統だけ集めた色コレクション】色付きの囲み枠などで自分で好きな色を使いたい。囲み枠や塗りつぶしの実際イメージが一目でわかる「アメブロブログスタンプの色コレクション」。アメブロ以外でももちろん使えるコピペできる囲み枠サンプル付き。

ブルー系のメニューバー

ブルー系もキレイですね

テンプレート名：スター＆ムーン(カテゴリ：かわいい)

こんな色で合わせてみました。

使用色：#2ca9e1　天色あまいろ

この<style>～</style>だけを
<div id="navi">～</div>の後にコピペ

コピペはここをクリック

<style>.skinContentsArea2,#contentsArea{position:relative;width:980px;padding-top:70px;} .skinContentsArea2 #navi,#contentsArea #navi{position:absolute;top:1px;left:4px;width:980px;font-size:14px !important;font-weight:bold;}#contentsArea #rightArea{width:660px !important;}#wideContentsArea #header{width:980px;}.profDetailWrap #navi,#ucsMainContent #navi{display:none;}.skin-blogHeaderNav{padding-top:50px;border:none;}.skin-blogBodyInner{padding-top:30px;}.skin-blogSubA,.skin-blogSubB{position:relative;}.skin-blogSubA #navi,.skin-blogSubB #navi{position:absolute;top:-150px;width:1110px;font-weight:bold;font-size:16px !important;}[data-uranus-layout="columnA"] #navi,[data-uranus-layout="columnC"] .skin-blogSubB #navi,[data-uranus-layout="columnD"] .skin-blogSubA #navi{left:5px;}[data-uranus-layout="columnB"] #navi,[data-uranus-layout="columnC"] .skin-blogSubA #navi,[data-uranus-layout="columnD"] .skin-blogSubB #navi,[data-uranus-layout="columnE"] .skin-blogSubA #navi{right:5px;}[data-uranus-layout="columnE"] .skin-blogSubB #navi{left:-495px;} #navi ul li{margin:0;padding:0;display:inline;width:20%;line-height:3.0;float:left;overflow:hidden;white-space:nowrap;}#navi ul li a{margin:0px 6px 6px 0;display:block;text-align:center;text-decoration:none;background:#2ca9e1;color:#ffffff !important;border-radius:0px;box-shadow:2px 2px 2px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:2px 2px 2px #cccccc;background-color: #ffffff!important;color: #7B746B !important;}</style>

テンプレート名：スイカサマー(カテゴリ：季節・イベント)

テンプレートの外側の水色で合わせてみました。

使用色：#c4edef　※文字にも色を付けました。

この<style>～</style>だけを
<div id="navi">～</div>の後にコピペ

コピペはここをクリック

<style>.skinContentsArea2,#contentsArea{position:relative;width:980px;padding-top:70px;} .skinContentsArea2 #navi,#contentsArea #navi{position:absolute;top:1px;left:4px;width:980px;font-size:14px !important;font-weight:bold;}#contentsArea #rightArea{width:660px !important;}#wideContentsArea #header{width:980px;}.profDetailWrap #navi,#ucsMainContent #navi{display:none;}.skin-blogHeaderNav{padding-top:50px;border:none;}.skin-blogBodyInner{padding-top:30px;}.skin-blogSubA,.skin-blogSubB{position:relative;}.skin-blogSubA #navi,.skin-blogSubB #navi{position:absolute;top:-150px;width:1110px;font-weight:bold;font-size:16px !important;}[data-uranus-layout="columnA"] #navi,[data-uranus-layout="columnC"] .skin-blogSubB #navi,[data-uranus-layout="columnD"] .skin-blogSubA #navi{left:5px;}[data-uranus-layout="columnB"] #navi,[data-uranus-layout="columnC"] .skin-blogSubA #navi,[data-uranus-layout="columnD"] .skin-blogSubB #navi,[data-uranus-layout="columnE"] .skin-blogSubA #navi{right:5px;}[data-uranus-layout="columnE"] .skin-blogSubB #navi{left:-495px;} #navi ul li{margin:0;padding:0;display:inline;width:20%;line-height:3.0;float:left;overflow:hidden;white-space:nowrap;}#navi ul li a{margin:0px 6px 6px 0;display:block;text-align:center;text-decoration:none;background:#c4edef;color:#7B746B !important;border-radius:0px;box-shadow:2px 2px 2px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:2px 2px 2px #cccccc;background-color: #ffffff!important;color: #7B746B !important;}</style>

他のブルーを探したいならこちら

【青系】実際に見てコピペできる色コレクション♡お気に入りの色があったら、アメブロの囲み枠やメニューバーの色に使ってみてね

【青色系統だけ集めた色コレクション】色付きの囲み枠などで自分で好きな色を使いたい。囲み枠や塗りつぶしの実際イメージが一目でわかる「アメブロブログスタンプの色コレクション」。アメブロ以外でももちろん使えるコピペできる囲み枠サンプル付き。

紫系のメニューバー

ちょっとくすんだ紫系

テンプレート名：朝顔と金魚(カテゴリ：季節・イベント系)

文章が入る部分の紫色と合わせました。

使用色：#b6a5c5

この<style>～</style>だけを
<div id="navi">～</div>の後にコピペ

コピペはここをクリック

<style>.skinContentsArea2,#contentsArea{position:relative;width:980px;padding-top:70px;} .skinContentsArea2 #navi,#contentsArea #navi{position:absolute;top:1px;left:4px;width:980px;font-size:14px !important;font-weight:bold;}#contentsArea #rightArea{width:660px !important;}#wideContentsArea #header{width:980px;}.profDetailWrap #navi,#ucsMainContent #navi{display:none;}.skin-blogHeaderNav{padding-top:50px;border:none;}.skin-blogBodyInner{padding-top:30px;}.skin-blogSubA,.skin-blogSubB{position:relative;}.skin-blogSubA #navi,.skin-blogSubB #navi{position:absolute;top:-150px;width:1110px;font-weight:bold;font-size:16px !important;}[data-uranus-layout="columnA"] #navi,[data-uranus-layout="columnC"] .skin-blogSubB #navi,[data-uranus-layout="columnD"] .skin-blogSubA #navi{left:5px;}[data-uranus-layout="columnB"] #navi,[data-uranus-layout="columnC"] .skin-blogSubA #navi,[data-uranus-layout="columnD"] .skin-blogSubB #navi,[data-uranus-layout="columnE"] .skin-blogSubA #navi{right:5px;}[data-uranus-layout="columnE"] .skin-blogSubB #navi{left:-495px;} #navi ul li{margin:0;padding:0;display:inline;width:20%;line-height:3.0;float:left;overflow:hidden;white-space:nowrap;}#navi ul li a{margin:0px 6px 6px 0;display:block;text-align:center;text-decoration:none;background:#b6a5c5;color:#ffffff !important;border-radius:0px;box-shadow:2px 2px 2px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:2px 2px 2px #cccccc;background-color: #ffffff!important;color: #7B746B !important;}</style>

テンプレート名：朝顔と金魚(カテゴリ：季節・イベント系)

テンプレートのボタンの色と合わせました。

感じが変わりますね。お好みで。

使用色：#8096b5

この<style>～</style>だけを
<div id="navi">～</div>の後にコピペ

コピペはここをクリック

<style>.skinContentsArea2,#contentsArea{position:relative;width:980px;padding-top:70px;} .skinContentsArea2 #navi,#contentsArea #navi{position:absolute;top:1px;left:4px;width:980px;font-size:14px !important;font-weight:bold;}#contentsArea #rightArea{width:660px !important;}#wideContentsArea #header{width:980px;}.profDetailWrap #navi,#ucsMainContent #navi{display:none;}.skin-blogHeaderNav{padding-top:50px;border:none;}.skin-blogBodyInner{padding-top:30px;}.skin-blogSubA,.skin-blogSubB{position:relative;}.skin-blogSubA #navi,.skin-blogSubB #navi{position:absolute;top:-150px;width:1110px;font-weight:bold;font-size:16px !important;}[data-uranus-layout="columnA"] #navi,[data-uranus-layout="columnC"] .skin-blogSubB #navi,[data-uranus-layout="columnD"] .skin-blogSubA #navi{left:5px;}[data-uranus-layout="columnB"] #navi,[data-uranus-layout="columnC"] .skin-blogSubA #navi,[data-uranus-layout="columnD"] .skin-blogSubB #navi,[data-uranus-layout="columnE"] .skin-blogSubA #navi{right:5px;}[data-uranus-layout="columnE"] .skin-blogSubB #navi{left:-495px;} #navi ul li{margin:0;padding:0;display:inline;width:20%;line-height:3.0;float:left;overflow:hidden;white-space:nowrap;}#navi ul li a{margin:0px 6px 6px 0;display:block;text-align:center;text-decoration:none;background:#8096b5;color:#ffffff !important;border-radius:0px;box-shadow:2px 2px 2px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:2px 2px 2px #cccccc;background-color: #ffffff!important;color: #7B746B !important;}</style>

他の紫を探したいならこちら

【紫系】実際に見てコピペできる色コレクション♡お気に入りの色があったら、アメブロの囲み枠やメニューバーの色に使ってみてね

【紫色系統だけ集めた色コレクション】色付きの囲み枠などで自分で好きな色を使いたい。囲み枠や塗りつぶしの実際イメージが一目でわかる「アメブロブログスタンプの色コレクション」。アメブロ以外でももちろん使えるコピペできる囲み枠サンプル付き。

グリーン系のメニューバー

ちょっとくすんだグリーン系

テンプレート名：ベルフラワー(カテゴリ：かわいい)

こんな色で合わせてみました。

使用色：#77aba4

この<style>～</style>だけを
<div id="navi">～</div>の後にコピペ

コピペはここをクリック

<style>.skinContentsArea2,#contentsArea{position:relative;width:980px;padding-top:70px;} .skinContentsArea2 #navi,#contentsArea #navi{position:absolute;top:1px;left:4px;width:980px;font-size:14px !important;font-weight:bold;}#contentsArea #rightArea{width:660px !important;}#wideContentsArea #header{width:980px;}.profDetailWrap #navi,#ucsMainContent #navi{display:none;}.skin-blogHeaderNav{padding-top:50px;border:none;}.skin-blogBodyInner{padding-top:30px;}.skin-blogSubA,.skin-blogSubB{position:relative;}.skin-blogSubA #navi,.skin-blogSubB #navi{position:absolute;top:-150px;width:1110px;font-weight:bold;font-size:16px !important;}[data-uranus-layout="columnA"] #navi,[data-uranus-layout="columnC"] .skin-blogSubB #navi,[data-uranus-layout="columnD"] .skin-blogSubA #navi{left:5px;}[data-uranus-layout="columnB"] #navi,[data-uranus-layout="columnC"] .skin-blogSubA #navi,[data-uranus-layout="columnD"] .skin-blogSubB #navi,[data-uranus-layout="columnE"] .skin-blogSubA #navi{right:5px;}[data-uranus-layout="columnE"] .skin-blogSubB #navi{left:-495px;} #navi ul li{margin:0;padding:0;display:inline;width:20%;line-height:3.0;float:left;overflow:hidden;white-space:nowrap;}#navi ul li a{margin:0px 6px 6px 0;display:block;text-align:center;text-decoration:none;background:#77aba4;color:#ffffff !important;border-radius:0px;box-shadow:2px 2px 2px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:2px 2px 2px #cccccc;background-color: #ffffff!important;color: #7B746B !important;}</style>

他の緑を探したいならこちら

【緑系】実際に見てコピペできる色コレクション♡お気に入りの色があったら、アメブロの囲み枠やメニューバーの色に使ってみてね。

【緑色系統だけ集めた色コレクション】色付きの囲み枠などで自分で好きな色を使いたい。囲み枠や塗りつぶしの実際イメージが一目でわかる「アメブロブログスタンプの色コレクション」。アメブロ以外でももちろん使えるコピペできる囲み枠サンプル付き。

黄色系のメニューバー

黄色系のメニューバーを集めてみました。

テンプレート名：スイカサマー(カテゴリ：季節・イベント)

黄色のスイカの色で合わせてみました。

使用色：#fff0ba　※文字にも色を付けました。

この<style>～</style>だけを
<div id="navi">～</div>の後にコピペ

コピペはここをクリック

<style>.skinContentsArea2,#contentsArea{position:relative;width:980px;padding-top:70px;} .skinContentsArea2 #navi,#contentsArea #navi{position:absolute;top:1px;left:4px;width:980px;font-size:14px !important;font-weight:bold;}#contentsArea #rightArea{width:660px !important;}#wideContentsArea #header{width:980px;}.profDetailWrap #navi,#ucsMainContent #navi{display:none;}.skin-blogHeaderNav{padding-top:50px;border:none;}.skin-blogBodyInner{padding-top:30px;}.skin-blogSubA,.skin-blogSubB{position:relative;}.skin-blogSubA #navi,.skin-blogSubB #navi{position:absolute;top:-150px;width:1110px;font-weight:bold;font-size:16px !important;}[data-uranus-layout="columnA"] #navi,[data-uranus-layout="columnC"] .skin-blogSubB #navi,[data-uranus-layout="columnD"] .skin-blogSubA #navi{left:5px;}[data-uranus-layout="columnB"] #navi,[data-uranus-layout="columnC"] .skin-blogSubA #navi,[data-uranus-layout="columnD"] .skin-blogSubB #navi,[data-uranus-layout="columnE"] .skin-blogSubA #navi{right:5px;}[data-uranus-layout="columnE"] .skin-blogSubB #navi{left:-495px;} #navi ul li{margin:0;padding:0;display:inline;width:20%;line-height:3.0;float:left;overflow:hidden;white-space:nowrap;}#navi ul li a{margin:0px 6px 6px 0;display:block;text-align:center;text-decoration:none;background:#fff0ba;color:#7B746B !important;border-radius:0px;box-shadow:2px 2px 2px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:2px 2px 2px #cccccc;background-color: #ffffff!important;color: #7B746B !important;}</style>

他の黄色を探したいならこちら

【黄系】実際に見てコピペできる色コレクション♡お気に入りの色があったら、アメブロの囲み枠やメニューバーの色に使ってみてね

【黄色系統だけ集めた色コレクション】色付きの囲み枠などで自分で好きな色を使いたい。囲み枠や塗りつぶしの実際イメージが一目でわかる「アメブロブログスタンプの色コレクション」。アメブロ以外でももちろん使えるコピペできる囲み枠サンプル付き。

ゴールド系のメニューバー

ゴールド？と思われるかもしれませんが、れっきとしたゴールドの名前がついてます。

テンプレート名：Christmas Town(カテゴリ：カラフル)

こんな色で合わせてみました。

使用色：#c1ab05　アンティックゴールド antique gold

この<style>～</style>だけを
<div id="navi">～</div>の後にコピペ

コピペはここをクリック

<style>.skinContentsArea2,#contentsArea{position:relative;width:980px;padding-top:70px;} .skinContentsArea2 #navi,#contentsArea #navi{position:absolute;top:1px;left:4px;width:980px;font-size:14px !important;font-weight:bold;}#contentsArea #rightArea{width:660px !important;}#wideContentsArea #header{width:980px;}.profDetailWrap #navi,#ucsMainContent #navi{display:none;}.skin-blogHeaderNav{padding-top:50px;border:none;}.skin-blogBodyInner{padding-top:30px;}.skin-blogSubA,.skin-blogSubB{position:relative;}.skin-blogSubA #navi,.skin-blogSubB #navi{position:absolute;top:-150px;width:1110px;font-weight:bold;font-size:16px !important;}[data-uranus-layout="columnA"] #navi,[data-uranus-layout="columnC"] .skin-blogSubB #navi,[data-uranus-layout="columnD"] .skin-blogSubA #navi{left:5px;}[data-uranus-layout="columnB"] #navi,[data-uranus-layout="columnC"] .skin-blogSubA #navi,[data-uranus-layout="columnD"] .skin-blogSubB #navi,[data-uranus-layout="columnE"] .skin-blogSubA #navi{right:5px;}[data-uranus-layout="columnE"] .skin-blogSubB #navi{left:-495px;} #navi ul li{margin:0;padding:0;display:inline;width:20%;line-height:3.0;float:left;overflow:hidden;white-space:nowrap;}#navi ul li a{margin:0px 6px 6px 0;display:block;text-align:center;text-decoration:none;background:#c1ab05;color:#ffffff !important;border-radius:0px;box-shadow:2px 2px 2px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:2px 2px 2px #cccccc;background-color: #ffffff!important;color: #7B746B !important;}</style>