アメブロカスタマイズ メニューバー
・丸みがあるものは優しい雰囲気
・角がキリっとしているものはきちんとした感じ
・角に丸みがある中間的な印象
メニューバーボタンの数
・５つのもの
・６つのもの
メニューバーボタンの色
・各５色用意しました
・コードの1カ所を変更すれば、色の変更が可能です
・カラーコードを見て変更してみてください。
アメブロメニューバー ５つ／角 タイプ
メニューバー① ゴールド調／５つ／角
[su_box title="このコードをコピー＆ペーストして使う" box_color="#d5d5d5" title_color="#8d8d8d" radius="2"]
<div id="navi"><ul><li><a target="_blank" href="URL１"><span>メニュー１</span></a></li><li><a target="_blank" href="URL２"><span>メニュー２</span></a></li><li><a target="_blank" href="URL３"><span>メニュー３</span></a></li><li><a target="_blank" href="URL４"><span>メニュー４</span></a></li><li><a target="_blank" href="URL５"><span>メニュー５</span></a></li></ul></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:16px !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 0px;display:block;text-align:center;text-decoration:none;background:#bfa469;color:#ffffff !important;border-radius:0px;box-shadow:2px 2px 2px#cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:1px 1px 1px #cccccc;}</style>
[/su_box]
メニューバー② ターコイズ／５つ／角
[su_box title="このコードをコピー＆ペーストして使う" box_color="#d5d5d5" title_color="#8d8d8d" radius="2"]
<div id="navi"><ul><li><a target="_blank" href="URL１"><span>メニュー１</span></a></li><li><a target="_blank" href="URL２"><span>メニュー２</span></a></li><li><a target="_blank" href="URL３"><span>メニュー３</span></a></li><li><a target="_blank" href="URL４"><span>メニュー４</span></a></li><li><a target="_blank" href="URL５"><span>メニュー５</span></a></li></ul></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:16px !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 0px;display:block;text-align:center;text-decoration:none;background:#57d0c6;color:#ffffff !important;border-radius:0px;box-shadow:2px 2px 2px#cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:1px 1px 1px #cccccc;}</style>
[/su_box]
メニューバー① サーモンピンク／５つ／角
[su_box title="このコードをコピー＆ペーストして使う" box_color="#d5d5d5" title_color="#8d8d8d" radius="2"]
<div id="navi"><ul><li><a target="_blank" href="URL１"><span>メニュー１</span></a></li><li><a target="_blank" href="URL２"><span>メニュー２</span></a></li><li><a target="_blank" href="URL３"><span>メニュー３</span></a></li><li><a target="_blank" href="URL４"><span>メニュー４</span></a></li><li><a target="_blank" href="URL５"><span>メニュー５</span></a></li></ul></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:16px !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 0px;display:block;text-align:center;text-decoration:none;background:#fa8072;color:#ffffff !important;border-radius:0px;box-shadow:2px 2px 2px#cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:1px 1px 1px #cccccc;}</style>
[/su_box]
メニューバー④ レモンイエロー ／５つ／角
[su_box title="このコードをコピー＆ペーストして使う" box_color="#d5d5d5" title_color="#8d8d8d" radius="2"]
<div id="navi"><ul><li><a target="_blank" href="URL１"><span>メニュー１</span></a></li><li><a target="_blank" href="URL２"><span>メニュー２</span></a></li><li><a target="_blank" href="URL３"><span>メニュー３</span></a></li><li><a target="_blank" href="URL４"><span>メニュー４</span></a></li><li><a target="_blank" href="URL５"><span>メニュー５</span></a></li></ul></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:16px !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 0px;display:block;text-align:center;text-decoration:none;background:#e6ee07;color:#ffffff !important;border-radius:0px;box-shadow:2px 2px 2px#cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:1px 1px 1px #cccccc;}</style>
[/su_box]
メニューバー⑤ ヒアシンスブルー ／５つ／角
[su_box title="このコードをコピー＆ペーストして使う" box_color="#d5d5d5" title_color="#8d8d8d" radius="2"]
<div id="navi"><ul><li><a target="_blank" href="URL１"><span>メニュー１</span></a></li><li><a target="_blank" href="URL２"><span>メニュー２</span></a></li><li><a target="_blank" href="URL３"><span>メニュー３</span></a></li><li><a target="_blank" href="URL４"><span>メニュー４</span></a></li><li><a target="_blank" href="URL５"><span>メニュー５</span></a></li></ul></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:16px !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 0px;display:block;text-align:center;text-decoration:none;background:#7a99cf;color:#ffffff !important;border-radius:0px;box-shadow:2px 2px 2px#cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:1px 1px 1px #cccccc;}</style>
[/su_box]
アメブロメニューバー ６つ／角 タイプ
メニューバー⑥ ゴールド調 ／６つ／角
[su_box title="このコードをコピー＆ペーストして使う" box_color="#d5d5d5" title_color="#8d8d8d" radius="2"]
<div id="navi"><ul><li><a target="_self" href="ＵＲＬ１"><span>メニュー１</span></a></li><li><a target="_self" href="ＵＲＬ２"><span>メニュー２</span></a></li><li><a target="_self" href="ＵＲＬ３"><span>メニュー３</span></a></li><li><a target="_self" href="ＵＲＬ４"><span>メニュー４</span></a></li><li><a target="_self" href="ＵＲＬ５"><span>メニュー５</span></a></li><li><a target="_self" href="ＵＲＬ６"><span>メニュー６</span></a></li></ul></div><style>.skinContentsArea2{position:relative;width:980px;padding-top:70px;} .skinContentsArea2 #navi{position:absolute;top:1px;left:4px;width:980px;font-size:14px !important;font-weight:bold;}.skin-blogHeaderNav{margin-bottom:30px;padding-top:50px;border:none;}.skin-blogBodyInner{margin-top:0;padding-top:0;}.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:16.6%;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:#bfa469;color:#ffffff !important;border-radius:0px;box-shadow:2px 2px 2px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:1px 1px 1px #cccccc;}</style>
[/su_box]
メニューバー⑦ ターコイズ ／６つ／角
[su_box title="このコードをコピー＆ペーストして使う" box_color="#d5d5d5" title_color="#8d8d8d" radius="2"]
<div id="navi"><ul><li><a target="_self" href="ＵＲＬ１"><span>メニュー１</span></a></li><li><a target="_self" href="ＵＲＬ２"><span>メニュー２</span></a></li><li><a target="_self" href="ＵＲＬ３"><span>メニュー３</span></a></li><li><a target="_self" href="ＵＲＬ４"><span>メニュー４</span></a></li><li><a target="_self" href="ＵＲＬ５"><span>メニュー５</span></a></li><li><a target="_self" href="ＵＲＬ６"><span>メニュー６</span></a></li></ul></div><style>.skinContentsArea2{position:relative;width:980px;padding-top:70px;} .skinContentsArea2 #navi{position:absolute;top:1px;left:4px;width:980px;font-size:14px !important;font-weight:bold;}.skin-blogHeaderNav{margin-bottom:30px;padding-top:50px;border:none;}.skin-blogBodyInner{margin-top:0;padding-top:0;}.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:16.6%;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:#57d0c6;color:#ffffff !important;border-radius:0px;box-shadow:2px 2px 2px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:1px 1px 1px #cccccc;}</style>
[/su_box]
メニューバー⑧ サーモンピンク ／６つ／角
[su_box title="このコードをコピー＆ペーストして使う" box_color="#d5d5d5" title_color="#8d8d8d" radius="2"]
<div id="navi"><ul><li><a target="_self" href="ＵＲＬ１"><span>メニュー１</span></a></li><li><a target="_self" href="ＵＲＬ２"><span>メニュー２</span></a></li><li><a target="_self" href="ＵＲＬ３"><span>メニュー３</span></a></li><li><a target="_self" href="ＵＲＬ４"><span>メニュー４</span></a></li><li><a target="_self" href="ＵＲＬ５"><span>メニュー５</span></a></li><li><a target="_self" href="ＵＲＬ６"><span>メニュー６</span></a></li></ul></div><style>.skinContentsArea2{position:relative;width:980px;padding-top:70px;} .skinContentsArea2 #navi{position:absolute;top:1px;left:4px;width:980px;font-size:14px !important;font-weight:bold;}.skin-blogHeaderNav{margin-bottom:30px;padding-top:50px;border:none;}.skin-blogBodyInner{margin-top:0;padding-top:0;}.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:16.6%;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:#fa8072;color:#ffffff !important;border-radius:0px;box-shadow:2px 2px 2px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:1px 1px 1px #cccccc;}</style>
[/su_box]
メニューバー⑨ レモンイエロー ／６つ／角
[su_box title="このコードをコピー＆ペーストして使う" box_color="#d5d5d5" title_color="#8d8d8d" radius="2"]
<div id="navi"><ul><li><a target="_self" href="ＵＲＬ１"><span>メニュー１</span></a></li><li><a target="_self" href="ＵＲＬ２"><span>メニュー２</span></a></li><li><a target="_self" href="ＵＲＬ３"><span>メニュー３</span></a></li><li><a target="_self" href="ＵＲＬ４"><span>メニュー４</span></a></li><li><a target="_self" href="ＵＲＬ５"><span>メニュー５</span></a></li><li><a target="_self" href="ＵＲＬ６"><span>メニュー６</span></a></li></ul></div><style>.skinContentsArea2{position:relative;width:980px;padding-top:70px;} .skinContentsArea2 #navi{position:absolute;top:1px;left:4px;width:980px;font-size:14px !important;font-weight:bold;}.skin-blogHeaderNav{margin-bottom:30px;padding-top:50px;border:none;}.skin-blogBodyInner{margin-top:0;padding-top:0;}.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:16.6%;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:#e6ee07;color:#ffffff !important;border-radius:0px;box-shadow:2px 2px 2px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:1px 1px 1px #cccccc;}</style>
[/su_box]
メニューバー⑩ ヒアシンスブルー ／６つ／角
[su_box title="このコードをコピー＆ペーストして使う" box_color="#d5d5d5" title_color="#8d8d8d" radius="2"]
<div id="navi"><ul><li><a target="_self" href="ＵＲＬ１"><span>メニュー１</span></a></li><li><a target="_self" href="ＵＲＬ２"><span>メニュー２</span></a></li><li><a target="_self" href="ＵＲＬ３"><span>メニュー３</span></a></li><li><a target="_self" href="ＵＲＬ４"><span>メニュー４</span></a></li><li><a target="_self" href="ＵＲＬ５"><span>メニュー５</span></a></li><li><a target="_self" href="ＵＲＬ６"><span>メニュー６</span></a></li></ul></div><style>.skinContentsArea2{position:relative;width:980px;padding-top:70px;} .skinContentsArea2 #navi{position:absolute;top:1px;left:4px;width:980px;font-size:14px !important;font-weight:bold;}.skin-blogHeaderNav{margin-bottom:30px;padding-top:50px;border:none;}.skin-blogBodyInner{margin-top:0;padding-top:0;}.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:16.6%;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:#7a99cf ;color:#ffffff !important;border-radius:0px;box-shadow:2px 2px 2px #cccccc;}#navi ul li a:hover{margin:1px 5px 5px 1px;box-shadow:1px 1px 1px #cccccc;}</style>
[/su_box]