応援される企業をデザインする
アイエスデザインの岡浩子です。
アメブロカスタマイズの話を
何回かに渡って記事にあげているのですが
メニューボタンについて
代表色のCSSをご用意してみました。
今回のブログは、数字が多くて面白くないです(汗)

(手順)
①設定ページからフリースペースを開く
②【メニューの設定】のCSSをコピー&ペースト
③該当する色の項目のCSSをコピー&ペースト→保存
【メニューの設定】
<div id="navi"><ul><li class="left"><a href="リンク先のURLを入れます">メニュー1</a></li><li><a href="リンク先のURLを入れます">メニュー2</a></li><li><a href="リンク先のURLを入れます">メニュー3</a></li><li><a href="リンク先のURLを入れます">メニュー4</a></li><li><a href="リンク先のURLを入れます">メニュー5</a></li> </ul></div>
↑ここまでをコピー&ペーストしてください
※メニューに表示したい文字を入力&リンク先のURLを入れます
下図をご参照ください。

【黒】

<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:#000000;color:#fff !important;border-radius:0px;box-shadow:0px 0px 0px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:0px 0px 0px #cccccc;background-color: #888888!important;color: #fff !important;}</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:#f086bb;color:#fff !important;border-radius:0px;box-shadow:0px 0px 0px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:0px 0px 0px #cccccc;background-color: #f7c6df!important;color: #4f4a4d!important;}</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:#3f53b5;color:#fff !important;border-radius:0px;box-shadow:0px 0px 0px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:0px 0px 0px #cccccc;background-color: #b3bce6!important;color: #050f3b!important;}</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:#228714;color:#fff !important;border-radius:0px;box-shadow:0px 0px 0px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:0px 0px 0px #cccccc;background-color: #abe3a3!important;color: #113d0b!important;}</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:#f78e0c;color:#fff !important;border-radius:0px;box-shadow:0px 0px 0px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:0px 0px 0px #cccccc;background-color: #ffc987!important;color: #7a5e3b!important;}</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:#5a059c;color:#fff !important;border-radius:0px;box-shadow:0px 0px 0px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:0px 0px 0px #cccccc;background-color: #e8c9ff!important;color: #330952!important;}</style>

誰かのお役に立つと良いのですが。。。
設定は慣れてないと難しいと思います。
GWにでもチャレンジしてみてくださいね。
いつも、お付き合いいただきありがとうございます!
よろしくお願いいたします。