fbpx
【2ヶ月無料】サマーキャンペーン開催中! >>

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

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

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

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

 

アメブロで圧倒的な集客力を手に入れる

日本No.1のブログサイトであるアメブロから圧倒的な集客力と知名度を手に入れることができるのが「アメブロアクセスupサービス」です。このサービスは自動的にあなたのブログのアクセス数を増やし、有名にすることが目的です。一部上場企業や芸能人も多数利用している実績と安心あるサービスになっています。

✔︎アメブロアクセスupサービスの詳細を見る

 

アメブロのメニューバーを入れ方(2ステップ)

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

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

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

 

基本的にはこの2つのステップでブログをメニューバーで制御することができる仕組みを整えることができ、閲覧者にとって効果的なブログ表示を行うことができるようになります。

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

 

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

基本的にメニューの構成は非常にシンプルなものとなっていることが多く、そのサンプルコードが下記で提供しますので、これを利用することで最も簡単に作成が可能です。

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

 

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

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

 

<注意事項>

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

<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でメニューバーの形にする【2ステップ】

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

 

【CSSでメニューバーを表示する方法】

  1. サイドバーのフリースペースを移動
  2. CSSコードを所定の箇所に貼り付ける
  3. プレビューで確認して完了

 

フリースペースを移動

アメブロへログインし、「設定・管理」をクリックします。その後、「配置設定」を表示します。

使用しない機能に「フリースペース」がありますので、使用する機能の上段へ移動してください。

 

移動後には下記のような形となります。これでフリースペースの移動が完了しました。

 

 

CSSコードを所定の箇所に貼り付ける

次にグローバルメニューを表示するためにブログデザインCSSへ下記のコードを貼り付けます。

 

【コードをブログデザインCSSへ貼り付ける方法】

  1. アメブロの管理トップへアクセス
  2. デザインの設定をクリック
  3. デザインの変更にて編集可能なブログデザインへ変更
  4. 適応中のデザインより「CSSの編集」をクリック
  5. 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: #FFFFFF; /* メニューバー全体の背景色 */
}
.nav-body li a {
width: 224px; /* ボタンの横幅 */
line-height: 50px; /* ボタンの高さ */
color: #ffffff; /* 文字の色 */
background: #505050; /* ボタンの色 */
}
/* 標準ナビの上にグローバルメニューを表示 */
.skin-bgHeader {
padding-bottom: 90px; /* メニューバーの表示場所確保 */
}
.nav-wrap {
top: -165px; /* メニューバーの上下位置調整 */
}

 

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

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

 

メニューバーの活用方法

最近では自社商品の販売やアフィリエイトなどで効果的なブログを作成することが求められるようになっており、そのために様々な機能を盛り込むケースが増えてきました。

メニューバーは閲覧者が自分の希望の記事を迅速に見つけることができるために非常に効果的なものとなっており、さらにブログ発信者がが訴えたい様々な内容をメニューバーに集約することで、閲覧者の興味を惹きつけることが可能です。

 

スムーズに閲覧者が利用できるブログにすると、閲覧効果を高めることができることも事実であるため、これを効果的に利用することで様々な効果を生み出す事になります。

メニューバーを効果的に利用すると、様々なSEO効果をもたらすこともあるため、この点も踏まえて活用することが大切です。

 

まとめ

集客効果抜群!アメブロのメニューバーを入れる方法を解説をお伝えしてきましたが、いかがでしたか?

メニューバーを入れる方法はとても簡単ですので、自社サービスを扱っている方は入れておくことをおすすめします。スマホの方が閲覧数は多いとはいえ、パソコンから見ていただいているユーザーも一定数いますので、その方々のための小さな施策も重要と言えます。