ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ ヘッダー下にグローバルナビを付ける方法
投稿日: 2014/05/24 投稿者:webコラム
こんにちは、今回はアメブロの『ヘッダー下にグローバルナビを設置する方法』の紹介です!
グローバルナビとは、ヘッダー画像の下にある、 他のページへと誘導するメニューになります。
いわばブログの道しるべとなるものです。
上記の画像で明るくしている所がグローバルナビです。
今回ご紹介するのは、文字と背景色のみの、シンプルなタイプの紹介です。
もちろんこれをベースに更にカスタマイズしていくこともできますので、 良かったらやってみてください。
今回のカスタマイズは、フリースペースを利用し、 CSSの編集も行います。
まず、以下のコードをフリースペースに追加します。
苦手な方も多い、HTMLといわれるものです。
ですが、大丈夫です!!
指示通りにやってみてください。
○手順○
下記のコードをコピーして、メモ帳に貼り付けてください。
<div id="headerMenu"><!---><ul class="menu"><!---><li><a href="#" target="_blank">メニュー1</a></li><!---><li><a href="#" target="_blank">メニュー2</a></li><!---><li><a href="#" target="_blank">メニュー3</a></li><!---><li><a href="#" target="_blank">メニュー4</a></li><!---><li><a href="#" target="_blank">メニュー5</a></li><!---></ul><!---></div>
赤文字で書いてある部分の各行が、それぞれ一つのメニューボタンのタグになります。
青文字の『#』の文字の所に、ボタンクリック時にジャンプするページのURLを(#を消して)、
『メニュー1』~『メニュー5』には、そのボタンに表示する文字列を書いて下さい。
一つの赤文字と一つの『#』がセットです。
上記コードはボタンが5つの場合の設定ですが
ボタン数は自由に変更できますので、必要なだけ増減してください。
そこまで編集できたら、メモ帳をいったん保存してください。
次に、アメブロを開き、自分のブログの左上のほうにある
「アメーバのサービス一覧」というところをクリックして
左下のほうにある「フリースペース編集」
というところをクリックし、さきほどメモ帳に保存したものを
コピー&ペーストをして、「保存」をしてください。
これで終了です。
次に、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の編集」を押します。さきほどメモ帳に保存したものを
コピー&ペーストをして、「保存」をしてください。
これで終了です。
グローバルナビを設置すると、ブログが一段とアップした気がしませんか?
他の人のブログと少し差をつけるだけで、見てもらえるブログに変わるかもしれません。
ひと手間かけることは何でも同じですね。
是非試してみて下さい♪