ホームページ制作・SEO対策を通じて集客向上↑売上UP↑ならCyberAccel-Advisors

   投稿日: 2014/05/24    投稿者:webコラム

こんにちは、今回はアメブロの『ヘッダー下にグローバルナビを設置する方法』の紹介です！

　　　　　　　　　　　　

グローバルナビとは、ヘッダー画像の下にある、 他のページへと誘導するメニューになります。

いわばブログの道しるべとなるものです。

上記の画像で明るくしている所がグローバルナビです。

　　　　　　　　　　　　

　　　　　　　　　　　　

ヘッダー下にグローバルナビを設置する方法

　　　　　　　　　　　　

今回ご紹介するのは、文字と背景色のみの、シンプルなタイプの紹介です。

もちろんこれをベースに更にカスタマイズしていくこともできますので、 良かったらやってみてください。

今回のカスタマイズは、フリースペースを利用し、 CSSの編集も行います。

　　　　　　　　　　　　

　　　　　　　　　　　　

フリースペースを編集

　　　　　　　　　　　　

まず、以下のコードをフリースペースに追加します。

苦手な方も多い、HTMLといわれるものです。

ですが、大丈夫です！！

指示通りにやってみてください。

 

 

○手順○

 

 

下記のコードをコピーして、メモ帳に貼り付けてください。

　　　　　　　　　　　　　　　

 

<div id="headerMenu"><!---><ul class="menu"><!---><li><a href="#" target="_blank">メニュー１</a></li><!---><li><a href="#" target="_blank">メニュー２</a></li><!---><li><a href="#" target="_blank">メニュー３</a></li><!---><li><a href="#" target="_blank">メニュー４</a></li><!---><li><a href="#" target="_blank">メニュー５</a></li><!---></ul><!---></div>

 

 

赤文字で書いてある部分の各行が、それぞれ一つのメニューボタンのタグになります。

青文字の『#』の文字の所に、ボタンクリック時にジャンプするページのURLを(#を消して)、

『メニュー１』～『メニュー５』には、そのボタンに表示する文字列を書いて下さい。

一つの赤文字と一つの『#』がセットです。

　　　　　　　　　　

上記コードはボタンが5つの場合の設定ですが

ボタン数は自由に変更できますので、必要なだけ増減してください。　　　　　　　　　　　　　　　　　　　　

そこまで編集できたら、メモ帳をいったん保存してください。

　　　　　　　　　　　

 

次に、アメブロを開き、自分のブログの左上のほうにある

「アメーバのサービス一覧」というところをクリックして

左下のほうにある「フリースペース編集」

というところをクリックし、さきほどメモ帳に保存したものを

コピー＆ペーストをして、「保存」をしてください。

これで終了です。

　　　　　　　　　　　　

　　　　　　　　　　　　

CSSを編集

　　　　　　　　　　　　

次に、CSSの編集です。以下のようなコードをユーザーCSSの最後に追加します。

 

○手順○

 

 

下記をコピーして、メモ帳に貼り付けてください。

 

 

/* ヘッダー下にグローバルナビ(グローバルメニュー)を設置する *//* ▼▼▼ 変更しない */#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;}/* ▲▲▲ 変更しない *//* ▼▼▼ 位置・サイズ調整 */#wrap,.skinContentsArea{ padding-top:40px; /* メニュー設置用スペース */}#headerMenu{ top:0px; /* 上下位置調整 */ left:0px; /* 左右位置調整 */ width:980px; /* メニュー全体の幅 */}#headerMenu ul.menu li a{ width:196px; /* ボタンの幅 */ line-height:40px; /* ボタンの高さ */ font-size:14px; /* ボタンの文字サイズ */}/*▲▲▲ 位置・サイズ調整 *//*▼▼▼ 色・文字装飾・背景など */#headerMenu ul.menu li a{ /* 通常時 */ color:#ffffff; /* 文字色(白) */ font-weight:normal; /* 太字(なし) */ text-decoration:none; /* 下線(なし) */ background-color:#3366ff; /* 背景色(濃い青) */ background-image:url(); /* 背景画像 */ background-repeat:repeat; /* 背景画像繰り返し */}#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */ color:#ffffff; /* 文字色(白) */ font-weight:normal; /* 太字(なし) */ text-decoration:underline; /* 下線(あり) */ background-color:#698fff; /* 背景色(薄い青) */ background-image:url(); /* 背景画像 */ background-repeat:repeat; /* 背景画像繰り返し */}/*▲▲▲ 色・文字装飾・背景など */

 

 

コピーができたらメモ帳をいったん保存してください。

　　　　　　　　　　　　

次に、アメブロを開き、自分のページの左上のほうにある

「アメーバのサービス一覧」というところをクリックして、一番左の真ん中のところにある

「デザインの変更」というところをクリックしてください。

　　　　　　　　　　　　

すると、「CSS編集用デザイン」というものが一番上の左側に出ると思います

それの「CSSの編集」を押します。さきほどメモ帳に保存したものを

コピー＆ペーストをして、「保存」をしてください。

これで終了です。

　　　　　　　　　　　　

まとめ

　　　　　　　　　　　　

グローバルナビを設置すると、ブログが一段とアップした気がしませんか？

他の人のブログと少し差をつけるだけで、見てもらえるブログに変わるかもしれません。

　　　　　　　　　　　　

ひと手間かけることは何でも同じですね。

是非試してみて下さい♪