アメブロのヘッダー下にあるメニューをカスタマイズする方法



アメブロのヘッダー画像下のメニューは「グローバルメニュー」や「グローバルナビ」と呼ばれていて、自由にカスタマイズする事ができます。

グローバルメニューは5個か6個のメニューボタンが横にならんでいて、どの記事を開いても表示されるように設定されています。

重要な記事へのリンクや申し込みページへのリンクをこのメニューに設定しておく事で見込み客に見てもらいやすくなるのです。

 

ブログの訪問者もサービスメニューがあれば探す手間が省けて助かります。

そういう役割があるので出来るだけ目立つようなカスタマイズが良いとされています。

 

たまに、文字が見えなかったり、正常に表示されていなかったりするのでそんな時は以下で紹介するカスタマイズ方法を参考に調整してみましょう。

スポンサーリンク

 

ヘッダー下のグローバルメニューをカスタマイズする方法

最初に以下の条件を確認しておきましょう。

 

・ここで紹介しているカスタマイズ時のヘッダー画像サイズは980px×300pxを想定しています

・ヘッダー画像のサイズが違う場合、グローバルメニューの位置も調整が必要となります

・2016年以降に追加された新デザインでのCSSとなります

・2016年以前のCSS編集デザインを利用している場合はこちらの記事でカスタマイズ方法を紹介しています

 

 

条件を確認したらCSSのカスタマイズを行います。

グローバルメニューは以下のCSSをコピーして利用して下さい。

 

/* メニュー設置スペース */
.skin-bgHeader {
margin-bottom: 60px;
}

/* メニューエリア */
.skin-headerImage ul.menu{
width:980px;
position:absolute;
margin:0px 0px 0px 0px;
padding:0;
top: -170px;
left: -690px;
}

/* メニューリストのグループ */
.skin-headerImage ul.menu{
margin:0;
padding:0;
list-style: none;
}

/* メニューリスト */
.skin-headerImage ul.menu li{
display:block;
float:left;
margin:0;
padding:0;
text-align:center;
width:196px;
line-height:40px;
}

/* メニューリストのリンク */
.skin-headerImage ul.menu li a{
display:block;
font-size:14px;
color:#0000FF;
font-weight:bold;
background: #E0F0FF;
}

/* メニューリストのリンク(マウスオーバー時) */
.skin-headerImage ul.menu li a:hover{ /*カーソルが乗った時*/
color:#E0F0FF;
background: #0000FF;
}

 

 

CSSの設定が完了したらフリースペースに以下の情報を貼り付けて各項目を調整するとメニューの設置が完了します。

<!– グローバルナビ設定 –>
<div class=”skin-headerImage”><ul class=”menu”><li><a href=”■ここにURLを設定■”>メニュー1</a></li><li><a href=”■ここにURLを設定■”>メニュー2</a></li><li><a href=”■ここにURLを設定■”>メニュー3</a></li><li><a href=”■ここにURLを設定■”>メニュー4</a></li><li><a href=”■ここにURLを設定■”>メニュー5</a></li></ul></div>

これでヘッダー下にグローバルメニューを設置する事ができます。

 


スポンサーリンク