アメブロ用メニューバー（グローバルメニュー）の作り方解説【新CSS対応】

アメブロにメニューバーを設置するカスタマイズを紹介します。

CSSをコピペして、ちょっと編集したHTMLをフリースペースに追加するだけです。

ブログ内の回遊性のアップや、サロンのホームページ・予約フォーム、Instagramなどに促すこともできるので試してみてください。

この記事の内容

アメブロにメニューバーを設置する方法
簡単なカスタマイズ方法

参考になれば幸いです。

【アメブロカスタマイズまとめ】CSSコピペでできるおしゃれアレンジアメブロカスタマイズ記事をまとめていきます。コピペするだけでできるものがほとんどなので「Webとか全然わかんない！」という方も簡...

この記事の目次

アメブロ用メニューバー完成イメージ
アメブロにメニューバーを設置する方法

手順①：デザイン用CSSをコピペする
手順②：フリースペースにHTMLを追加する

メニューバーのデザインを調整する方法（簡易）
他にもアメブロカスタマイズあります

アメブロ用メニューバー完成イメージ

メニューバー？何それ？これのことです。

メニューバーのほか、グローバルメニュー、グローバルナビと読んだりもします。

「この記事良い」「このブログ良い」「他の記事も見てみたい」とブログやあなたに興味を持ってくれたユーザーに対して、わかりやすいナビゲーションを設置することによって迷わせることなく回遊してもらうことができます。

サロンのホームページやInstagram、予約フォームへのリンクも設置可能。

アメブロにメニューバーを設置する方法

アメブロにメニューバーを設置するには次の2つの作業を行います。

メニューバー設置手順

デザイン用CSSをコピペする
フリースペースにHTMLを追加する

手順①：デザイン用CSSをコピペする

メニューバー用デザインを記述したCSSを追加する必要があります。

サンプルデザインのCSSを用意したので、アメブロのデザイン設定「編集用CSS」にコピペします。

カスタマイズには「CSS編集用デザイン」の使用が必須。
標準デザイン・簡単カスタマイズ用デザインを使用している方は「CSS編集用デザイン」に変更する必要があります。

参考

アメブロのデザインをカスタマイズする方法

コピペするCSS

/* ---グローバルメニュー用CSSここから--- */
.nav-wrap {
	position: absolute;
	margin: 0;
	padding: 0;
}
.skin-blogSubA, .skin-blogSubB {
	position: relative;
}
.skin-columnB .skin-blogSubA .nav-wrap,
.skin-columnC .skin-blogSubA .nav-wrap,
.skin-columnE .skin-blogSubA .nav-wrap,
.skin-columnD .skin-blogSubB .nav-wrap {
	left: auto;
	right: 0;
}
.skin-columnA .skin-blogSubA .nav-wrap,
.skin-columnD .skin-blogSubA .nav-wrap,
.skin-columnC .skin-blogSubB .nav-wrap {
	left: 0;
	right: auto;
}
.skin-columnE .skin-blogSubB .nav-wrap {
	left: auto;
	right: -360px;
}
.nav-body {
	margin: 0;
	padding: 0;
}
.nav-body:after {
	display: block;
	clear: both;
	content: ".";
	height: 0;
	visibility: hidden;
}
.nav-body>br {
	display: none;
}
.nav-body li {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	text-align: center;
	border-left: 1px solid #E5E5E5;
	width: 223px;
	line-height: 60px;
}
.nav-body li:last-of-type{
	width:222px;
	border-right: 1px solid #E5E5E5;
}
.nav-body li a {
	display: block;
	text-decoration: none;
}
.nav-body {
	width: 1120px;
	background: #FFFFFF;/* 背景色 */
}
.nav-body li a {
	color: #999999;/* 文字色 */
	transition:color .4s ease,background .4s ease,transform .4s ease,opacity .4s ease,border .4s ease,padding .4s ease,left .4s ease,box-shadow .4s ease;
}
.nav-body li a:hover{
	transform: translateY(3px);
	-webkit-transform: translateY(3px);
}
.skin-bgHeader {
	padding-bottom: 60px;
}
.nav-wrap {
	top: -175px;
}
/* ---グローバルメニュー用CSSここまで--- */

右上「Copy」ボタンで簡単コピー

【参考】コピペ手順

「ブログ管理」→「デザインの設定」→「CSSの編集」と進み「編集用CSS」に上記CSSをコピーします。

CSSをコピペするだけではメニューバーは表示されません。
コピペミスなどにより、これまでのデザインが崩れてないかを確認しましょう。

手順②：フリースペースにHTMLを追加する

つづいてメニューバーとして表示する項目を設定します。

「ブログ管理」→「設定・管理」と進み「サイドバーの設定」内の「フリースペース編集」を選択します。

下記のHTMLを編集したものをコピペします。

編集元HTML

<div class="nav-wrap"><nav><ul class="nav-body">
<li><a href="【URL1】"><span>【メニュー1】</span></a></li>
<li><a href="【URL2】"><span>【メニュー2】</span></a></li>
<li><a href="【URL3】"><span>【メニュー3】</span></a></li>
<li><a href="【URL4】"><span>【メニュー4】</span></a></li>
<li><a href="【URL5】"><span>【メニュー5】</span></a></li>
</ul></nav></div>

右上「Copy」ボタンで簡単コピー