集客効果抜群！アメブロのメニューバーを入れる方法を解説

この記事では「集客効果抜群！アメブロのメニューバーを入れる方法を解説」をお伝えしていきます。

アメブロのメニューバーはトップページのヘッダー下に最大５つまで作成が可能なメニューです。これはパソコンでのみしか表示することができませんが、設置しておくと見せたいページへユーザーを誘導させることが可能です。集客効果も抜群に上がっていきます。

自社でサービスなどを販売している場合にはサービス内容や料金プラン等を掲載することが可能ですので、特にビジネスブログとしてアメブロを活用している方は設置しておくことをおすすめします。

1 アメブロのメニューバーを入れ方（２ステップ）
2 フリースペースへHTMLタグを入れる【１ステップ】
3 CSSでメニューバーの形にする【２ステップ】
- 3.1 フリースペースを移動
- 3.2 CSSコードを所定の箇所に貼り付ける
4 メニューバーの活用方法
5 まとめ

アメブロのメニューバーを入れ方（２ステップ）

アメブロにメニューバーを入れる際には、基本的には2つのステップを実現することが可能です。

フリースペースに専用のコードを入れること
メニューの動作を設定するCSSコードを本体に埋め込む

前者は既存のHTMLのコードサンプルを利用し、自らのブログの内容に合わせることで比較的簡単に作成することが可能です。後者についても色やボタンの形等を決めるCSSで簡単に作成することが可能です。

基本的にはこの2つのステップでアメブロトップページへメニューバーを設置する事ができ、ユーザーにとって見やすいブログを作成することができます。

ブログにメニューバーが存在することで、ユーザーは自分の希望する内容をすぐに表示することができるため、使いやすいと言う印象を持ちコンバージョンの向上につながります。

関連記事アメブロで囲み枠を利用する３つのメリットを解説

2022.03.21

フリースペースへHTMLタグを入れる【１ステップ】

基本的にメニューの構成は非常にシンプルなものとなっていることが多くなっています。具体的なサンプルコードは下記にて記載しますので、これを指定箇所にコピペしてください。

文字の大きさや表示の幅などをパラメーターで調整し入れ替えることで、簡単にメニューを作成することができるようになっているため、これを利用して自分のブログの表示に合わせたものを作成するのが良いでしょう。

【フリースペースへHTMLタグを入れる方法】

アメブロへログイン
「設定・管理」をクリック
フリースペースをクリック
下記のHTMLコードをコピー
フリースペースへ貼り付け

＜注意事項＞

【URL1〜５】はリンク先のURLとなります。
【ボタンの文字1〜５】は表示するボタンのテキストです。

<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>

上記のHTMLタグをフリースペースへ貼り付けます。

CSSでメニューバーの形にする【２ステップ】

専用のコードが作成できたら、ブログ本体にこのコードを埋め込む作業を行います。基本的にはCSSを利用して所定の場所にメニューバーを作成する形となります。

【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;
}
.nav-body li a {
display: block;
text-decoration: none;
}
.nav-body {
width: 1120px; /* メニューバー横幅 */
background: #FFF; /* メニューバー全体の背景色 */
}
.nav-body li a {
width: 224px; /* ボタンの横幅 */
line-height: 50px; /* ボタンの高さ */
color: #fff; /* 文字の色 */
background: #505050; /* ボタンの色 */
}
/* 標準ナビの上にグローバルメニューを表示 */
.skin-bgHeader {
padding-bottom: 90px; /* メニューバーの表示場所確保 */
}
.nav-wrap {
top: -165px; /* メニューバーの上下位置調整 */
}

CSSの中ではブログ画面に対する表示位置や表示の大きさ、また色などを指定することができるため、パラメータを書き換えていくことで実際に表示を変えることができます。

様々なパラメータを試して行うのが非常に良い方法となっており、画面全体のバランスを考慮しながらメニューバーを作り込むとより効果的なものとなります。