アメブロで集客をしているお店は、少なく無いと思います。

 

商用利用禁止とはいえ、できるだけホームページに近づけたい・・と

思っているオーナーさんもいると思います。

 

今回は、アメブロのヘッダーにナビゲーションを追加するシンプルな方法をお伝えします。

この方法であれば、アメブロのテーマを使っている人でも、

テーマに関わらず、メニューを追加できます。

※ただし、対応していないテーマもあるかも・・

 

こんなテーマでも

スクリーンショット 2015-02-19 19.47.01

 

こんなテーマでも、メニューは出ます

スクリーンショット 2015-02-19 19.47.32

 

修正方法は、いたってシンプル。

  1. フリースペースに、ナビゲーションの内容を追加する
  2. フリープラグインに、スタイルを追加する

の2つの工程で実装が可能です。

 

フリースペースへのナビゲーション内容追加

スクリーンショット 2015-02-19 20.09.48

設定・管理 > フリースペース編集

から、フリースペースの中身を修正します。

追加するものは、以下の内容。

<div id="headerMenu"><!--
--><ul class="menu"><!--
--><li><a href="リンクしたいアドレス1">見出し1</a></li><!--
--><li><a href="リンクしたいアドレス2">見出し2</a></li><!--
--><li><a href="リンクしたいアドレス3">見出し3</a></li><!--
--><li><a href="リンクしたいアドレス4">見出し4</a></li><!--
--><li><a href="リンクしたいアドレス5">見出し5</a></li><!--
--></ul><!--
--></div>

この中の

「リンクしたいアドレス」は、ホームページURLや、ブログの記事のURLを書きます。

「見出し1」〜「見出し5」までは、表示したいタイトルを書きます。

 

ちなみに、フリースペースは改行が自動的に反映されてしまうため、

<!– –> これを追加してコメントアウトし、改行を無効にしています。

スクリーンショット 2015-02-19 20.12.55

 

外部サイトに飛ばしたい場合は、ターゲットブランクを追加する

ちなみに、リンクをアメブロの記事以外にしたい場合は、

クリックすると同じ画面で切り替わってしまい、ブログに戻って来れなくなります。

 

それを防ぐためにも、外部に移動させる場合は、リンクに「外部サイトですよ」という設定を追加します。

<a href="リンクしたいアドレス" target="_blank">

こんな感じに。

アンダーバー と、 blank です。

これで、別窓や別タブが立ち上がり、表示されるようになります。

 

 

フリープラグインに、スタイルを追加する

すると、サイドの部分にこんな感じで表示されると思います。

スクリーンショット 2015-02-19 20.13.32

ここからは、この見出しにスタイルを設定して、ヘッダーに持って行きます。

 

アメブロのテーマは、デザインファイルを修正できない

カスタマイズ可能なテンプレートを使っていれば、
CSSというデザインファイルを修正することができますが、

テーマを使っている場合、それを修正することができません。

そんなときは、「フリープラグイン」を活用します。

スクリーンショット 2015-02-19 20.15.38

 

フリープラグインのほうを、必ず選択します

スクリーンショット 2015-02-19 20.16.08

 

この中に、以下のデザインファイルを入れます

<style type="text/css">

	/* 位置・サイズ調整 */
	#wrap,.skinContentsArea{
		padding-top:50px;             /* メニュー設置用スペース */
	}

	#headerMenu{
		top:0px;
		left:0px;
		width:980px;
		margin-bottom: 15px;
	}

	#headerMenu ul.menu li a{
		width:196px;/* メニューの幅 */
		line-height:45px; /* 高さ */
		font-size:14px;/* 文字サイズ */
		font-weight: bold;
	}

	/* 色・文字装飾・背景など */
	#headerMenu ul.menu li a{
		color: #6A4D4D; /* 文字色 */
		text-decoration:none;
		background-repeat:repeat;
	}
	#headerMenu ul.menu li a:hover{
		color: #443131;/* マウスオーバー時の文字色(白) */
		text-decoration: underline;
		background-repeat: repeat;
	}

	#headerMenu ul.menu>li{
	  height:45px;
	  background-color:#ffffff;/* IE7対応 */
	}

	#wrap,.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;
	}

	#headerMenu ul.menu>li:hover{
	  height:auto;
	}
</style>

 

これを、貼付けるだけ。

スクリーンショット 2015-02-19 20.28.34

保存をすれば、ヘッダー部分にメニューが表示されます。

スクリーンショット 2015-02-19 20.28.59

 

テーマによっては、文字の色や見た目の調整が必要になってくると思いますが、

先ほどのスタイルに追記をしていけば、実現できるはずです。

文字の色を変える時は

#headerMenu ul.menu li a{
color: #000;
}

とか、このあたりを修正すればOK。

ちなみに、#000は、「黒」を意味しています。

こういった便利なサイトもあるので、好みの色に変えてみてもいいかもしれません。

http://www.benricho.org/colors/color_picker/

 

まとめ

よく、アメブロのナビゲーションを画像で設置している方がいます。

もちろん、画像にしたほうが表現の幅は広がるし、見た目もキレイにできるんですが、

なんせ、修正が難しい。

 

デザイナーに画像を依頼し直して、修正をする必要があります。

 

ナビゲーションは、スマートフォンなどでは表示されない部分。

シンプルにさくっと、テキストだけでつくるというのも、僕は良いと思います。

 

もちろん、ナビゲーションをおしゃれに見せたり、

ヘッダー画像との兼ね合いなどで、デザインを調整する必要はあると思いますが、

まずは、ヘッダーにメニューを出すのは意外と簡単ということがお伝えできたら嬉しいです。