グローバルメニューをつけよう♪

画像を一切使わずグローバルメニューをCSS3で作ってみましょう♪

フリースペース編集をしよう

『フリースペース編集』で下記のコードをコピペしましょう

<div id="headerMenu"><!--
--><ul class="menu"><!--
--><li><a href="リンク先のURL" target="_blank">メニュー１</a></li><!--
--><li><a href="リンク先のURL" target="_blank">メニュー２</a></li><!--
--><li><a href="リンク先のURL" target="_blank">メニュー３</a></li><!--
--><li><a href="リンク先のURL" target="_blank">メニュー４</a></li><!--
--><li><a href="リンク先のURL" target="_blank">メニュー５</a></li><!--
--></ul><!--
--></div>

ここでは『メニュー』の文字の部分を好きな文字に変えてもらえれば好きなメニューが作成できます。

リンク先のURLも忘れずに変更してくださいね♪

CSSの編集をしよう

CSSの編集で下記のコードを一番下でいいので追加します

/* グローバルメニュー */
#wrap,.skinContentsArea{
  position:relative;
  padding-top:40px;             /* メニューのスペース */
}
#headerMenu{
  position:absolute;
  margin:0;
  padding:0;
  top:0px;                      /* 上下調整 */
  left:0px;                     /* 左右調整 */
  width:980px;                  /* メニュー全体の幅 */
}
#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;
  width:196px;                  /* ボタン幅 */
  line-height:40px;             /* ボタン高さ */
  font-size:14px;               /* 文字サイズ */
  color:#ffffff;                /* 文字の色 */
  font-weight:normal;           /* 太さ*/
  text-decoration:none;         /* 下線 */
  background-color:#8B4513;     /* 背景色 */
  background-image:url(ここに画像のURL);       /* 背景画像 */
  background-repeat:repeat;     /* 背景画像繰り返し */
}
#headerMenu ul.menu li a:hover{ /* カーソルを合わせた時 */
  color:#ffffff;                /* 文字の色 */
  font-weight:normal;           /* 太さ */
  text-decoration:underline;    /* 下線 */
  background-color:#D2691E;     /* 背景色 */
  background-image:url(ここに画像のURL);       /* 背景画像 */
  background-repeat:repeat;     /* 背景画像繰り返し */
}

今回の説明

今回記載した記事については初期の状態、横幅980pxの状態で５個のメニューを設置した場合になります。

ブログ全体のサイズを変更している場合などについては、それぞれ変更しなければならないのでお気を付けください。