アメブロにグローバルメニューを設置する方法

アメブロ
code
追記：2017/08/16
常時SSL化を順次実施していくお知らせを告知しておりましたが、2017年8月22日（火）午後より随時、全てのブログを対象に実施させていただくこととなりました。
常時SSL化実施のお知らせ｜スタッフブログ

SSLになると「ユーザーが作成したjavascript」がアメブロでは動作しないようです。
実際、この記事のjavascriptも動作しませんでした。

参考：アメブロのSSL化（https）対応について【2017/08/22午後】 – ブログ運営のためのブログカスタマイズ

ameblo-menu01.png

※CSS編集用デザインで動作確認しています。

手法としては、旧テンプレートと同じ方法でやっています。

1.フリースペースにグローバルメニューのHTMLタグを追加する
2.ブログデザインCSSにメニュー用のCSSを追加
3.フリープラグインに、メニュー配置用のスクリプトを追加

1.フリースペースにグローバルメニューのHTMLタグを追加する

<div class="menu-main-container">
<ul class="nav-menu-ex">
<li><a href="">観光</a></li>
<li><a href="http://ameblo.jp/">食べ物</a></li>
<li><a href="http://ameblo.jp/">本</a></li>
<li><a href="http://ameblo.jp/">雑記</a></li>
<li><a href="http://ameblo.jp/">お問合せ</a></li>
</ul>
</div>


上記のタグをフリースペースに追加します。
フリースペースは、サイドバーに配置してください。

URLやメニューの文字は後から置き換えてくださいね。

2.ブログデザインCSSにメニュー用のCSSを追加

/* グローバルメニュー
--------------------------------------------*/
.nav-menu-ex{
  background-color: #000; /*背景色*/
}
.nav-menu-ex{
  display: table;
  table-layout: fixed;
  text-align: center;
  width: 100%;
  -webkit-padding-start: 0px;
}
.nav-menu-ex li{
  display: table-cell;
  vertical-align: middle;
}

.nav-menu-ex li a{
  color: #fff;     /*文字色*/
  font-size: 12px; /*文字サイズ*/
  text-decoration: none;
  padding: 10px 0;
  display: block;
}

.nav-menu-ex a:hover{
  color: #111;     /*選択時の文字色*/
  background: #ddd; /*選択時の背景色*/
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.menu-main-container br{
  display: none;
}

ブログデザインのCSSの編集のところで、一番下あたりに追記します。

標準のメニューを消す場合

.skin-blogHeaderNavMenu, .skin-blogSearch{
  display: none;
}

さらにこれを追加すると、標準の「ブログトップ|記事一覧|画像一覧」と検索ボックスを消すことができます。

3.フリープラグインに、メニュー配置用のスクリプトを追加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){$(".menu-main-container").prependTo(".skin-blogHeaderNavInner");});
</script>
※1行目はjqueryの読みこみで、すでに読みこみ済みの場合は必要ありません。

サイドバーから、タイトル下あたりに移動させるためのスクリプトです。

menu-main-container　＝＞グローバルメニューのclass名
skin-blogHeaderNavInner　＝＞移動先のclass名

グローバルメニューを既存のものを使いたい場合は、class名の部分だけ変更すればOKかと思います。

※「.menu-main-container」のように「.」をお忘れなく!!

スポンサーリンク

関連記事