コーポレートサイトのおすすめのWordPressテーマ!!詳細はこちら▶▶

アメブロにグローバルメニュー(メニューバー)を設置するカスタマイズ

アメブロカスタマイズの今回はグローバルメニュー(ナビゲーションバー)編です。初めてアメブロカスタマイズをされる方は↓の導入編の記事もご参照下さい。 アメブロカスタマイズ 導入編 カスタム用のスキンとレイアウトの設定

グローバルメニューのHTML

アメブロではヘッダー下やフッターなどをHTMLで編集・追加することができません。また2017年3月のHTTPS化に伴いJavaScriptがの使用が禁止され、ヘッダー下にメニューをJSで挿入するという方法も取れなくなりました。 そこでアメブロでグローバルメニューを表示するときは、サイドバーのフリースペースにメニューのHTMLを置き、CSSでヘッダー下に表示させるという方法をとっています。 アメブロ管理画面>設定・管理>フリースペースの編集に以下のHTMLを貼り付けます。このHTMLは新デザイン・旧デザインで共通です。

サブメニューあり(ドロップダウンメニュー)

ドロップダウンメニューにしたいときはsecond-contentを使って下さい。
HTML
<nav class="menu"><ul class="menu-container"><!-- <br> 
--><li class="menu1"><a href="メニュー1URL">Menu1</a></li><!-- <br> 
--><li class="menu2"><a href="メニュー2URL">Menu2</a></li><!-- <br> 
--><li class="menu3"><a href="メニュー3URL">Menu3</a></li><!-- <br> 
--><li class="menu4"><a href="メニュー4URL">Menu4</a></li><!-- <br> 
--><li class="menu5"><a href="メニュー5URL">Menu5</a><!-- <br> 
--><ul class="second-content"><!-- <br>
--><li><a href="サブメニュー1URL">SubMenu1</a></li><!-- <br> 
--><li><a href="サブメニュー2URL">subMenu2</a></li></ul><!-- <br> 
--></li><!-- <br> 
--><li class="menu6"><a href="メニュー1URL">Menu6</a></li></ul><!-- <br> 
--></nav>
注意
Menu1やメニュー1URLはそれぞれ書き換えてください。項目の幅は自動で調整されますが、5,6項目までにして下さい。

サブメニューなし

こちらはドロップダウンメニューなしです。
HTML
<nav class="menu"><ul class="menu-container"><!-- <br> 
--><li class="menu1"><a href="メニュー1URL">Menu1</a></li><!-- <br> 
--><li class="menu2"><a href="メニュー2URL">Menu2</a></li><!-- <br> 
--><li class="menu3"><a href="メニュー3URL">Menu3</a></li><!-- <br> 
--><li class="menu4"><a href="メニュー4URL">Menu4</a></li><!-- <br> 
--><li class="menu5"><a href="メニュー5URL">Menu5</a></li><!-- <br> 
--><li class="menu6"><a href="メニュー6URL">Menu6</a></li></ul><!-- <br> 
--></nav>

グローバルメニューのCSS

新デザインと旧デザインでCSSがちょっと違います。お使いのデザインに合せてください。

新デザイン用グローバルメニューCSS

こんな感じになります。実装は以下のテストブログでご確認下さい。

新デザインテストブログ

以下のCSSを編集したCSSの最後に追加して下さい
CSS
注意
色や高さは適宜調整してください。

旧デザイン用グローバルメニューCSS

旧デザインテストブログ

同様に以下のCSSを編集したCSSの最後に追加して下さい。
CSS
以上アメブロにグローバルメニューを設置するカスタマイズのご紹介でした。次はグローバルメニューに画像で装飾する方法をご紹介したいと思います。 アメブロカスタマイズ講座: アメブロカスタマイズ 導入編 カスタム用のスキンとレイアウトの設定 アメブロでヘッダー画像を設置する方法 アメブロに画像を使ったグローバルメニューを設置する アメブロのサイドバーに画像を使ったデザインを適用する アメブロのメッセージボードをカスタマイズする