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

Pocket

アメブロのグローバルメニューを設置して見やすくしよう

んにちは、YUです。

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

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

 

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

こんなやつです。

 

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

 

このグローバルメニューの設置方法も2つあります。

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

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

 

やはりツールは有料なのですが、今後のアメブロの運用を考えると導入するのもアリだと思います。

超便利なアメブロ用多機能ツールを使って簡単に設置する方法はこちら

 

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

まず、まだアメブロのデザインを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の段を削除してください。

 

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

 

 

続いて、ブログ管理トップ → デザインの変更 → 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] 稼ぐ・成功のための各SNSの役割と特徴へ進む

 

友だち追加

Pocket

コメントを残す

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