アメブロカスタマイズその3 メニューバーを設置する方法

アメブロのヘッダー画像をオリジナルに変更したら、次はヘッダーにメニューバーを付けてみましょう！メニューバーを設置することで、ブログを訪れた方を、自分のプロフィールやサービスページに誘導しやすくなります。

難しいと思われるかもしれませんが、説明通りに行えば簡単にメニューバーを設置することができます。まるで自分のホームページのように、アメブロをオリジナル仕様にカスタマイズしてみましょう！

アメブロのメニューバーとは？

アメブロには、ブログ以外にも自分のホームページやYouTube、instagramなどSNSページへのリンクなどを自由自在にヘッダーメニューとして付けることができます。それがアメブロのメニューバー。カスタマイズしないと標準では表示されないので、ぜひカスタマイズして自分だけのメニューバーを付けてみましょう！

ユメカナウのアメブロの場合、上部にピンク色のメニューがあります。こちらがアメブロのメニューバー。このメニューの色は自分の好きな色を指定することができます。

一番右の「お問合せ」だけ色が変わっていますが、これはマウスオーバーをした時の色。これも指定できますよ！

アメブロメニューバー設置方法

それでは、アメブロにメニューバーを設置する方法をご紹介致します。

まず、アメブロのブログ管理画面左側のメニューより、「設定・管理」をクリック。

続いて、下の方にある「サイドバーの設定」から「配置設定」をクリック。

サイドバーをドラッグ＆ドロップで位置変更できますので、「フリースペース」を使用する機能の方にドラッグ&ドロップして下さい。そして、保存ボタンをクリックして下さい。

次に左側のメニューより、「設定・管理」をクリック。下の方にある「サイドバー設定」から「フリースペース編集」をクリック。

このフリースペースに、メニューバーに入れるメニューやリンク先を入力します。

私が入れているメニューを例にしてみましょう。ご自身のフリースペースに入れる時は、タイトルやリンク先、カラーを変更して下さいね。下記のコードをそのままコピーしてフリースペースにペーストした後に、urlとテキスト部分を修正して下さい。

<div class=”nav-menubar”><nav> <ul class=”nav-menu”> <li><a href=”https://yumekanau.life/” target=”_blank” rel=”noopener”>ユメカナウ</a></li> <li><a href=”https://yumekanau.life/?page_id=414″ target=”_blank” rel=”noopener”>WEBライター養成通信講座</a></li> <li><a href=”https://yumekanau.life/?page_id=588″ target=”_blank” rel=”noopener”>生徒様の声</a></li> <li><a href=”https://yumekanau.life/?page_id=166″ target=”_blank” rel=”noopener”>プロフィール</a></li> <li><a href=”https://yumekanau.life/?page_id=152L” target=”_blank” rel=”noopener”>お問い合わせ</a></li> </ul> </nav></div>

続いて、ブログ管理左メニューから、「デザインの設定」をクリック。

「適用中のデザイン」の下にある「CSSの編集」をクリック。

「現在使用中のブログデザインCSS」の部分にコードを追加します。

すでにコードが入っていますので、このコードは変更したり削除しないように気を付けて下さいね。アメブロのデザインが崩れてしまいます！

CSSの編集画面の1番下までスクロールして、下記のコードをコピー＆ペーストで貼り付けて下さい。

/* ▼▼▼ここからメニューバーの設定▼▼▼* /

/*メニューバー基本 */
.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: #ff1493; /*メニューバーの背景色*/

font-weight:bold; /*太字 */

}

.nav-menu li a {

width: 222px; /*メニューバー1つの横幅 /*

line-height: 60px; /* メニューバーの高さ */

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:#ff69b4; /*背景色(薄いピンク)*/
}
/*▲▲▲ここまでメニューバーの設定▲▲▲*/

「表示を確認する」をクリックするとプレビュー画面が開きますので、正しく設置ができているか確認しましょう。問題なければ「保存」ボタンをクリック。

自分のブログを確認して、ヘッダーメニューが設置されていて、リンク先も問題なければOKです！

※キャッシュが残っていると前の画像が表示されてしまう場合があります。ヘッダー部分が変わらない時は、ブラウザーの更新ボタンをクリックして再度確認してみて下さい。