ヘッダー下にグローバルメニュー設置方法

はじめに

最近では頻繁にグローバルメニュー（グローバルナビ）を設置しているのも目にしますが、
「これから」と思っている方もいるのではないでしょうか？

ブログを訪れた読者の人にも便利な機能だと思います。

これを機会に挑戦してみましょう！

画像の赤枠の部分です。

適応テンプレート：CSS編集用デザイン

コピペの方法が解らない方は「」を読んで下さい。

CSS編集画面が解らない方は「」を読んで下さい。

ヘッダー下にグローバルメニュー設置方法

下記をフリースペース・CSSに追記して下さい。

フリースペース
・「＃」部分にリンクしたいURLを記入。※＃と書き換える
・メニュー１～５の部分にリンクタイトルを記入※メニュー１～５と書き換える

CSS
・各説明を参考に調整して下さい。

/* ▼▼ヘッダー下にグローバルメニュー設置ここから▼▼ */

/*▼▼ 位置の指定などここから(通常変更不要)▼▼*/

.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;
}
/*▲▲▲

位置の指定などここから(通常変更不要)

 ▲▲▲*/
/*▼▼▼ サイズ・位置など ▼▼▼*/
.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編集画面の下部にある「表示を確認する」で確認後、保存して完了です。

知恵の樹・アメブロテンプレート

アメブロテンプレート・カスタマイズ

ヘッダー下にグローバルメニュー設置方法

はじめに

ヘッダー下にグローバルメニュー設置方法