アメブロカスタマイズと読者を増やすブログ運営 初心者でもかんたん

初心者でもかんたんに取り組めるアメブロカスタマイズ方法や正攻法でブログの読者を増やす運営方法などを紹介しています。


テーマ:




アメブロカスタマイズのわざめーばです。

こんにちは。

今回は『ヘッダー下にグローバルナビ(グローバルメニュー)を設置する方法』です。

『ヘッダーメニュー』や、単に『横メニュー』と呼ばれたりもします。

今回ご紹介するのは、文字と背景色のみの、ごくシンプルなタイプですが、もちろんこれをベースに更にカスタマイズしていくこともできますので、よかったらやってみてくださいね。



まず確認



このカスタマイズは、CSSの編集で行いますので、もし、やり方がわからない場合はCSSの編集方法を確認しておいて下さい。

また、フリースペース(フリープラグインも可)も利用しますので、フリースペースの編集方法の確認と、サイドバーの配置でフリースペースが「使用する機能」に入っていることの確認をしておいてください。



フリースペースを編集



まず、フリースペースの編集で、以下のようなコードをフリースペースに追加します。


<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の編集で、以下のようなコードをユーザー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;     /* 背景画像繰り返し */
}
/*▲▲▲ 色・文字装飾・背景など */


このコードは、横幅980ピクセルのブログに5つボタンのグローバルナビを設置する場合のコードですので、条件が異なる場合はグレーで書いてある注釈を頼りに内容を変更して下さい。。

また、このコードは新旧両デザイン対応ですので、お使いのデザインが新カスタマイズ向けデザイン『CSS編集用デザイン』でも、旧来のカスタマイズ向けデザイン『【カスタム可能】ベーシック』でも利用できます。

ただし、『【カスタム可能】ベーシック』は、ブログ横幅の初期値が800ピクセルですので、その場合、赤文字部分に800緑文字部分に160を入れるとちょうどいいと思います。

ここまでできれば、ヘッダー下に冒頭の画像のようグローバルナビが表示されます。

比較的難易度が高いと言われているグローバルナビですが、凝ったものでなければ、このように簡単に設置できますので、ぜひチャレンジしてみてくださいね。



その他



このグローバルナビは、以前紹介した旧デザイン向け新デザイン向けを一つにまとめて、新旧どちらのデザインにも使えるようにしたものです。

ただし、今回のコードは、以前の旧デザイン向けのコードとは互換性がなくなっていますのでご注意下さい。



関連記事



CSSの編集



アメブロカスタマイズで自分らしい魅力的なアメブロを作る技

いいね!した人  |  コメント(406)