メニューバーの設置 | ameblo

 

人気のアメブロのヘッダー下にメニューバーを設置する方法を、わざめーばさんの作成されたプラグインで、

すっきり設置する方法を紹介します。

 

画像を使ったメニューが見た目はかっこいいですが、CSSの編集など、初心者にはとっつきにくいだけに、

今回は、コードをコピペするだけでメニューバーが出来るというすぐれものです。

(画像を使ったメニューは、次回に!)

それではさっそく アメブロにログインして ブログ管理画面を開き->プラグインの追加をクリック して

 

次のコードを貼り付けてみよう。

 

<script src="http://www.google.com/jsapi"></script>

<script>google.load('jquery','1')</script>

<script>(function(j){j(function(){$=jQuery=j})})($)</script>

<script src="http://p.wazameba.com/njs/eznavi.js"></script>

 

 

 

 

 

▶ トップメニュー  ▶ プロフィール  ▶ なう  ▶ メッセージ  ▶ 読者登録  ▶ アメンバー申請

 

なんと6個のメニューが出来上がっています。

 

 

 

 

 

それでは出来上がったメニューの内容を変更してみましょう。

フリープラグインに次のコードを追加します。

 

<div id="eznavi_data" style="display:none" data-colors="#909090,#ffffff,#ffffff,#3161fd,#333,#adc0fe">

<a href="link先アドレス" >メニュー1</a>

<a href="link先アドレス" >メニュー2</a>

<a href="link先アドレス" >メニュー3</a>

<a href="link先アドレス" >メニュー4</a>

<a href="link先アドレス" >メニュー5</a>

<a href="link先アドレス" >メニュー6</a></div>

 

赤字の部分を、お好みのリンク先とそのタイトルに書き換えて貼り付けてください。

data-collor は、 ボタン外枠の色(色1)、ボタン外枠と内側の隙間の色(色2)、ボタン文字の色(色3)、ボタン内側背景の色(色4)、

オンマウス時のボタン文字の色(色5)、オンマウス時のボタン内側背景の色(色6)となっています。

 

初めてプラグインを追加した場合は、サイドバー -> 配置設定 から フリープラグインを使用する機能にドラッグしてください。

 

 

 

 

これだけでヘッダー下に、メニューバーが表示されます。

 

サンプルはこちらから