メニューバー(グローバルナビ)の設定

まずはメニューバーの項目を決めましょう。

リンクする記事も書かなきゃ!ピンク枠がグローバルナビゲーションです。
アメブロTOPのヘッダーサイズは 1120 × 400pxでつくりました。

グローバル設定・管理 ▶︎ 配置設定 で 使用する機能 に フリースペースを入れます。

グローバル設定・管理 ▶︎ フリースペース編集 にhtmlを書きます。

<div class=”nav-menubar”><nav><ul class=”nav-menu”>
<li><a href=”URL” target=””><span>メニュー1</span></a></li>
<li><a href=”URL” target=”””><span>メニュー2</span></a></li>
<li><a href=”URL” target=”””><span>メニュー3</span></a></li>
<li><a href=”URL” target=”””><span>メニュー4</span></a></li>
<li><a href=”URL” target=”””><span>お問合せ</span></a></li>
</ul></nav></div>

これで保存するとサイドエリアに箇条書きで表示されます。
CSSを入れます。いちばん下にプラスして書いてくださいね。

デザインの設定 ▶︎ CSS編集用デザイン[ CSSの編集 ] 

/* ▼▼▼ここからメニューバーの設定▼▼▼*/
.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: #f8b500; /* メニューバーの背景色 */
font-weight:bold; /*太字 */
}
.nav-menu li a {
width: 222px; /* メニューバー1つの横幅 */
line-height: 54px; /* メニューバーの高さ */
margin:0; /*メニューの隙間*/
border:1px solid #ffffff;/*線の太さ 種類 色を指定[1px 直線 ]*/
color: #ffffff; /* 文字の色 [白]*/
}
.skin-bgHeader {
padding-bottom: 67px; /* メニューバーの表示場所確保 */
}
.nav-menubar {
top: -180px; /* メニューバーの上下位置調整 */
}
/* メニューバーのデザイン(マウスを重ねた時) */
.nav-menu li a:hover{ /*カーソルが乗った時という意味*/
color:#ffffff; /*文字色(白)*/
font-weight:bold; /*太字 */
text-decoration:underline;/*下線(あり)*/
background-color:#d3381c; /*背景色(薄いピンク)*/
}

色を変えたい場合は色辞典を参考にすると便利です。 こちら ↓ を参考にしてボタンを好きな色に変えてください。

HTMLカラーコード WEB色見本 原色大辞典