アメブロのグローバルメニューを初心者でも3分で設置する手順

ame-hed6
こんにちわ 須賀です^^

今回は、アメブロのグローバルメニューを初心者の方でも、
簡単に設置する方法を解説していきます。

グローバルメニューまたはグローバルナビゲーションとも言いますが、
上記画像の赤枠の部分がグローバルメニューと呼ばれています。

グローバルメニューを設置する理由

自分で作ったサイトでしたら、
記事の内容やコンテンツは把握されていると思います。

しかし、初めてあなたのサイトに訪れた訪問者様はどうでしょう?

あなたと違って、訪問者はサイト内にどこに何があるのか全くわかりません。

そりゃそうですよね。

初めて訪れたサイトなのですからわかる訳がありません。

だから、訪問者様があなたのサイト内で迷子にならないよう、
工夫をしてあげるべきですよね?

道しるべ的なメニューを表示してあげれば、訪問者様がストレスなく、
サイトを閲覧してくれるでしょう。

その道しるべの一つがグローバルメニューです。

グローバルメニュー設置の理由は、

訪問者があなたのサイトをストレスなく閲覧してもらう為に必要な気配り

だと僕は考えます。

だけど、アメブロでグローバルメニューを設置する場合は、
cssを編集しなければなりません。

「cssなんてわからないから無理です!」

と思い、設置したいけど設置方法がわからない方も多いのではないでしょうか?

そんなあなたの為に、アメブロのグローバルメニュー設置方法を
画像を使いながらわかりやすく解説していきますね。

アメブロのグローバルメニュー設置の仕方

まずはフリースペースの位置を変更します。

マイページ⇒アメブロ⇒フリースペース編集をクリックして下さい。

ame-hed1

 

次に画面右寄りにある「フリースペースの配置設定はこちら」をクリックします。

WS000008

「フリースペース」を一番上に移動します。

 

次に「フリースペース」の編集をしていきます。

下記のHTMLコードをすべてコピー&ペーストして、保存します。

<div id=”headerMenu”><!–
–><ul class=”menu”><!–
–><li><a href=”#” target=”_blank”>メニュー1</a></li><!–
–><li><a href=”#” target=”_blank”>メニュー2</a></li><!–
–><li><a href=”#” target=”_blank”>メニュー3</a></li><!–
–><li><a href=”#” target=”_blank”>メニュー4</a></li><!–
–><li><a href=”#” target=”_blank”>メニュー5</a></li><!–
–></ul><!–
–></div>

メニュー1~5は、それぞれリンク付けをしたいメニューに
文字を入れ替えてください。
( 例:記事一覧、目次 など )

「#」マークのが、メニューのリンク先です。
「#」を、リンク先のアドレスに変更して下さい。

メニュー、リンク先をコピペしてら、保存します。

保存しましたら、自分のブログを確認して下さい。

メニューがこのような状態になっていると思います。

ame-hed2

メニュー1~5までが、縦に表示されました。

これをヘッダー画像の下に横長の状態で表示させるために
CSSの編集をしていきます。

デザインの変更⇒cssの編集をクリックします。

下記CSSコードをコピーし、CSS編集画面の一番下にペーストします。

/* メニューバー*/
#wrap,.skinContentsArea{
position:relative;
}
#headerMenu{
position:absolute;
margin:0;
padding:0;
}
#headerMenu ul.menu{
margin:0;
padding:0;
list-style: none;
}
#headerMenu ul.menu li{
display:inline;
}
#headerMenu ul.menu li a{
display:block;
float:left;
margin:0;
padding:0;
white-space:nowrap;
overflow:hidden;
text-align:center;
}

つづいて、下記コードもコピー&ペーストします。

/* ▼▼ 位置とサイズ ▼▼*/
#wrap,.skinContentsArea{
padding-top:40px;
}
#headerMenu{
top:0px;
left:0px;
width:980px;
}
#headerMenu ul.menu li a{
width:196px;
line-height:40px;
font-size:14px;
/*▲▲ 位置とサイズ ▲▲*/
/*▼▼ 文字・カラー ▼▼*/
#headerMenu ul.menu li a{
color:#ffffff;
font-weight:normal;
text-decoration:none;
background-color:#c0c0c0; /* 背景色(グレー) */
background-repeat:repeat;
}
#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
color:#ffffff;
font-weight:normal;
text-decoration:underline;
background-color:#808080; /* 背景色(濃グレー) */
background-repeat:repeat;
}/
*▲▲ 文字・カラー ▲▲*/

お好みに合わせてカラーコードを編集して下さい。

保存したらブログを開いて下さい。

メニューバーが設置されているかどうか確認しましょう!

ame-hed3

もしも変更されていなければ、画面の再読み込みをしてみて下さい。

変更されているはずです。

どうもお疲れ様でした!

 

この記事を読まれた方は以下の記事もよく読まれています。

⇒アメブロのヘッダーをオリジナル画像に編集する方法

僕が副業アフィリで毎月50万円以上稼いでいるヒミツを

無料メール読者さん限定で公開しています。

なぜ、時間がない副業アフィリエイターでも
毎月50万円以上を稼ぐことが出来るのか?


僕が200万円以上投資して得たスキルと実践で得たテクニックを
超初心者の方でもすぐに実践出来るよう噛み砕いて解説しています。

 

メール講座では、パソコンド素人だった僕が


・ゼロから抜け出した方法


・3ヶ月後に10万円稼いだ方法


そして毎月継続して50万円以上稼ぎ続けているテクニック

を惜しみなく解説しています。

 

さらに

・わずか10記事で累計100万円以上稼ぐブログ運営法


・自分で1記事も書かずに毎月安定して10万円以上稼ぐ外注戦略

も期間限定で公開します。

 

かなり、再現性が高い手法ので今すぐ実践して下さいね。

 


*登録後の解除もワンクリックで簡単に出来るので気軽にご登録お願いします♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA