[STEP3-7] アメーバブログのグローバルメニュー設定のやり方

Pocket

んにちは、YUです。

今回もアメブロの見栄えを良くする、大事なことをお話していきますね。

ここではグローバルメニューを設置していきます。

 

グローバルメニューとは

グローバルメニューとは、ヘッダー画像の下にある重要なページへ飛ぶボタンです。

こんなやつですね。

 

このボタンがあると、訪問してきた人は自分の欲しい情報を見つけやすいですし、あなたが誘導したいページに誘導しやすくすることができます。

 

このグローバルメニューを設置していくのですが、この方法も2つあります。

・アメブロの便利な多機能ツールを使って簡単に設置する方法

・手動で少し手間をかけて設置する方法

 

やはりツールは有料なのですが、今後のアメブロの運用を考えると導入したほうがいいです。

「1日3分でアメブロのアクセスを大量に集める方法」という記事で、簡単に設置するツールについて説明しています。

 

この記事では、手動で設置する方法を書きますね。

まず、まだアメブロのデザインをcss編集にしていない方はcss編集にしておいてくださいね。

 

グローバルメニューの設置手順

アメブロのマイページ → 設定 → フリースペース編集をクリックします。

 

スペース内に以下のタグを書き込みます。

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

書き込むときは、改行を消してください。

上のタグで、#のところは表示したいページのurlを入れ、メニューのところは表示したい文字に書き換えます。

また、グローバルメニューを4つにしたい場合はメニュー5の段を削除してください。

 

どんなメニューを入れるかですが、ホーム(トップ画面)、プロフィールは必須で、あとは読者登録ボタンやtwitter、facebook、instagramなどを入れておきましょう。

後々メルマガやLINE@、Wordpressブログを作ったら、このメニューに入れておきましょう。

WordPressについてはSTEP5、LINE@やメルマガはSTEP6でお話します。

 

続いて、ブログ管理トップ → デザインの変更 → css編集で、cssタグの最後に以下のタグをコピペします。

 

/*グローバルメニュー*/
/*▼▼▼ 変更しない ▼▼▼*/

.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;
}

/*▲▲▲ 変更しない ▲▲▲*/

/*▼▼▼ サイズ・位置など ▼▼▼*/

.skinContentsArea{
padding-top:60px; /* ボタン設置用スペース */
}
#headerMenu{
top:0px; /* 上下位置調整 */
left:0px; /* 左右位置調整 */
width:1120px; /* メニュー全体の幅 */
}
#headerMenu ul.menu li a{
width:224px; /* ボタンの幅 */
line-height:30px; /* ボタンの高さ */
font-size:13px; /* ボタンの文字サイズ */
}
/*▲▲▲ サイズ・位置など ▲▲▲*/
/*▼▼▼ ボタンの色・文字装飾・背景など ▼▼▼*/
#headerMenu ul.menu li a{ /* 通常時 */
color:#000000; /* 文字色(白) */
font-weight:bold; /* 太字(なし) */
text-decoration:none; /* 下線(なし) */
background-color:#cc99ff; /* 背景色 */
background-image:url(★); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
color:#000000; /* 文字色(白) */
font-weight:bold; /* 太字(なし) */
text-decoration:none; /* 下線(あり) */
background-color:#cc66ff; /* 背景色 */
background-image:url(★); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
/*▲▲▲ ボタンの色・背景など ▲▲▲*

 

青字になっているボタン幅は、メニューが4つの方は280pxに変えてください。

また赤字のところは、色や文字の太さを変えるところです。

色の番号原色大辞典を参考にしてくださいね。

このページから好きな色を選んで、色の番号を設定します。

 

これでようやくグローバルメニューの設置ができました。

アメブロの設定はこれで終わりになります。お疲れ様でした。

 

それでは、また次の記事でお会いしましょう。

次記事:[STEP3-8] アメブロに記事を投稿してみる

Pocket

コメントを残す

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