【アメブロカスタマイズ】ヘッダー下のメニューバーの入れ方

内藤です。

アメブロのヘッダー下にメニューバーを入れる方法を紹介します。

こういうのですね。

メニューバーに設置すべき項目は

・商品やサービスの特徴(導入記事)
・メニュー・料金表
・お客様の声(実績)
・お店までの道のり 地図
・お問合せ お申込み
・よくある質問
・プロフィール

などです。
5、6個に抑えられた方がいいです。

リンク先の記事は、予め投稿しておきます。
過去の日付で投稿しても構いません。

記事のURLは、記事タイトルをクリックして、個別ページで画面上部のアドレスバーに表示されます。

ヘッダー下のメニューバーの入れ方

メニューバーは、

1、フリースペースへ メニューバーの HTML コードを設定
2、CSS の追加

の2段階の作業があります。

今回は5項目にする場合の方法です。

※サイドバーのプロフィール画像が丸になる「CSS編集用デザイン」の場合です

「フリースペース」に入れるメニューバー用HTML タグ

まずは「フリースペース」に元となるHTMLを入れます。

<div id="headermenu"><!--
--><ul><!--
--><li><a href="リンク URL" class="menu1">メニュー1</a></li><!--
--><li><a href="リンク URL" class="menu2">メニュー2</a></li><!--
--><li><a href="リンク URL" class="menu3">メニュー3</a></li><!--
--><li><a href="リンク URL" class="menu4">メニュー4</a></li><!--
--><li><a href="リンク URL" class="menu5">メニュー5</a></li><!--
--></ul><!--
--></div>

5 項目のメニューを作るパターンです。

1、上記 HTML タグを、メモ帳などで開き“メニュー 1”などの部分を『料金表』や『お客様の声』などの項目の名前に変更します。

2、上記 HTML タグの ”リンクURL” を飛ばしたいリンク先のURLに変更します。

外部サイトへリンクをはるのは、出口になってしまします。
ホームページなど活用できていれば良いですが、通常はブログ内の記事にリンクしましょう。
リンク先の記事は、過去記事で(日付を古くして)予め用意しておきます。

3、書き換えが終わりましたら、HTML タグを コピーします

例)

<div id="headermenu"><!—
--><ul><!--
--><li><a href="http://ameblo.jp/isaonaito/○○" class="menu1">サービスについて</a></li><!--
--><li><a href="http://ameblo.jp/isaonaito/○○" class="menu2">メニュー 料金・</a></li><!̶
--><li><a href="http://ameblo.jp/isaonaito/○○" class="menu3">アクセス</a></li><!--
--><li><a href="http://ameblo.jp/isaonaito/○○" class="menu4">お客様の声</a></li><!--
--><li><a href="http://ameblo.jp/isaonaito/○○" class="menu5">メルマガ</a></li><!--
--></ul><!--
--></div>

※URLは例です。

4、変更したタグをコピーし、フリースペースの最後に貼り付けます。

フリーペースには、メニューバーのコード以外のものも書くことができます。

フリースペースへ追加したらフリースペースは左側に配置してください。

まだこの段階では、フリースペース内にリンクが挿入されているだけです。
メニューバーの形にはなっていません

CSSで、メニューバーの形にする

5、CSS でメニューとなる項目がヘッダー下に来るように調整します。

以下のコードを CSS に追加します。

/*メニューエリア*/
#headermenu{
position:absolute;
width:1120px;
margin-left:-30px;
padding:0;
top: -115px;
}

/*メニューリスト*/
#headermenu li {
float:left;
width:224px; /*メニュー 1 項目の幅*/
}

/*メニューリストリンク*/
#headermenu li a{
font-size:15px;
font-weight:normal;
color:#ffffff; /*文字色*/
background-color:#4267b2; /*背景色*/
display:block;
text-decoration:none; /*項目の文字装飾*/
text-align:center; /*項目の文字寄せ位置*/
line-height:74px;
}

/*メニューリストリンク マウスオーバー時*/
#headermenu li a:hover{
color:#4267b2; /*文字色*/
background-color:#ffffff; /*背景色*/
}

※背景色、文字色ともに変更できます。

メニューバーの位置をずらしたい場合は

/*メニューエリア*/
#headermenu{
position:absolute;
width:1120px;
margin-left:-30px;
padding:0;
top: -115px;
}

の topの数値を変えて、メニューバーの位置を調整します。

これでメニューバーが設置されました。

 

ヘッダー下のメニューバーの入れ方(旧デザイン)

※サイドバーのプロフィール画像が丸になる「CSS編集用デザイン」の場合です

同様に

1、フリースペースへ メニューバーの HTML コードを設定
2、CSS の追加

の2段階の作業があります。

「フリースペース」に入れるメニューバー用HTML タグ

まずは「フリースペース」に元となるHTMLを入れます。

<div id="headermenu"><!--
--><ul><!--
--><li><a href="リンク URL" class="menu1">メニュー1</a></li><!--
--><li><a href="リンク URL" class="menu2">メニュー2</a></li><!--
--><li><a href="リンク URL" class="menu3">メニュー3</a></li><!--
--><li><a href="リンク URL" class="menu4">メニュー4</a></li><!--
--><li><a href="リンク URL" class="menu5">メニュー5</a></li><!--
--></ul><!--
--></div>

5 項目のメニューを作るパターンです。

1、上記 HTML タグを、メモ帳などで開き“メニュー 1”などの部分を『料金表』や『お客様の声』などの項目の名前に変更します。

2、上記 HTML タグの ”リンクURL” を飛ばしたいリンク先のURLに変更します。

外部サイトへリンクをはるのは、出口になってしまします。
ホームページなど活用できていれば良いですが、通常はブログ内の記事にリンクしましょう。
リンク先の記事は、過去記事で(日付を古くして)予め用意しておきます。

3、書き換えが終わりましたら、HTML タグを コピーします

例)

<div id="headermenu"><!—
--><ul><!--
--><li><a href="http://ameblo.jp/isaonaito/○○" class="menu1">サービスについて</a></li><!--
--><li><a href="http://ameblo.jp/isaonaito/○○" class="menu2">メニュー 料金・</a></li><!̶
--><li><a href="http://ameblo.jp/isaonaito/○○" class="menu3">アクセス</a></li><!--
--><li><a href="http://ameblo.jp/isaonaito/○○" class="menu4">お客様の声</a></li><!--
--><li><a href="http://ameblo.jp/isaonaito/○○" class="menu5">メルマガ</a></li><!--
--></ul><!--
--></div>

※URLは例です。

4、変更したタグをコピーし、フリースペースの最後に貼り付けます。

フリーペースには、メニューバーのコード以外のものも書くことができます。

フリースペースへ追加したらフリースペースは左側に配置してください。

まだこの段階では、フリースペース内にリンクが挿入されているだけです。
メニューバーの形にはなっていません

CSSで、メニューバーの形にする

5、CSS でメニューとなる項目がヘッダー下に来るように調整します。

以下のコードを CSS に追加します。

/*メニューエリア*/
#headermenu{
position:absolute;
width:980px;
margin:0;
padding:0;
height:40px; /*メニューエリアの高さ*/
top:330px; /*●画面上からの位置*/
}

/*メニューリスト*/
#headermenu ul li {
float:left;
width:196px; /*●メニュー 1 項目の幅*/
height:40px;
}

/*メニューリストリンク*/
#headermenu ul li a{
font-size:15px;
font-weight:normal;
color:#000000; /*●文字色*/
background-color:#dddddd; /*●背景色*/
display:block;
text-decoration:none; /*項目の文字装飾*/
text-align:center; /*項目の文字寄せ位置*/
line-height:40px;
}

/*メニューリストリンク マウスオーバー時*/
#headermenu ul li a:hover{
color:#000000; /*●文字色*/
background-color:#FFFFFF; /*●背景色*/
display:block;
text-decoration:none; /*項目の文字装飾*/
text-align:center; /*項目の文字寄せ位置*/
}

/*基準調整*/
.skinFrame{
position:relative;
}

/*メニュー下の位置下げ*/
.skinContentsArea{
padding-top:50px!important;
}

※背景色、文字色ともに変更できます。

メニューバーの位置をずらしたい場合は

/*メニューエリア*/
#headermenu{
position:absolute;
width:980px;
margin:0;
padding:0;
height:40px; /*メニューエリアの高さ*/
top:330px; /*●画面上からの位置*/
}

の topの数値を変えて、メニューバーの位置を調整します。

これでメニューバーが設置されました。

 

パソコン(ブラウザ)で見た場合でしか表示されませんが、目立たせたい項目はおいておくといいです。

試してみてくださいね。

 

初心者にもできるアメブロカスタマイズのマニュアル
アメブロカスタマイズ〜読まれるブログの作り方〜

アメブロカスタマイズ記事まとめに戻る