アメブロのヘッダーに
メニューボタンをつける手順を
お伝えいたします。
いくつか試した中で
比較的手間がかからなかったものを
ご案内します。
【メニュー設置の手順】
①フリースペースの編集
②CSSコピー＆ペースト
③CSS編集
上記の3ステップです。
詳しく説明していきます。
①フリースペースの編集
まずはTOPページからブログ管理を開きます。
次に、管理・設定から
「フリースペースの編集」を選んでください
下のような画面がでてきます
②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>
<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:#fff;color:#5f74a3 !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: #ffffff!important;color: #7B746B !important;}</style>
③CSS編集
③−１メニューボタンの編集（文字）
上図のようにリンクしたい先のURLを入れて
メニューの部分に表示したい名称を入れます
（例）
a.インスタにリンクさせたい場合
リンク先のURLをインスタのURLを入れ
メニューをInstagramとします。
b.アメブロの特定のカテゴリーを表示させたい場合
リンク先のURLをカテゴリーを選択してそのURLを入れ
メニューをカテゴリー名（例えばお店の情報）とします。
※URLとは、上の窓にでてくるホームページのアドレスのことです
続いて
③−2 メニューボタンの編集（色）
※これはちょっと複雑
この表示のままだとこのアメブロと同じ色になります。
下から3行分が色の設定です。
色番号は、白なら#ffffff（または#fff）です。
色番号は、カラーピッカーで検索すると数のような表示が出ます。
下のカラーの部分メモリを動かすとHEX欄に色番号が表示されます。
「保存」を押すとメニューが表示されます。
※色番号の調べ方については下記のサイトもご参照ください。
色見本から色番号が割り出せます
パレットを選んで色見本をみてください
最後までお読みいただきありがとうございました。
