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

   投稿日: 2015/03/27    投稿者:webコラム

こんにちは、駆け出しライターのMAKIです。

今日のテーマは、グローバルメニューにプルダウンメニューを追加する方法、です。
グローバルメニューとプルダウンメニューは、上の画像を見ていただければ、何かわかると思います。
メニューとあるのがグローバルメニュー、サブメニューとあるのがプルダウンメニューです。

では、レッツトライ！

CSSの編集画面を開きます

「ブログを書く」→「デザインの変更」→「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:#434343;     /* 背景色 */
  background-image:url();       /* 背景画像 */
  background-repeat:repeat;     /* 背景画像繰り返し */
}
#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
  color:#ffffff;                /* 文字色(白) */
  font-weight:normal;           /* 太字(なし) */
  text-decoration:none;    /* 下線(なし) */
  background-color:#555555;     /* 背景色 */
  background-image:url();       /* 背景画像 */
  background-repeat:repeat;     /* 背景画像繰り返し */
}

/* グローバルメニューにプルダウンメニューを追加する */
#headerMenu ul.menu>li{
  display:block;
  float:left;
  overflow:hidden;
}
#headerMenu ul.menu li a{
  float:none;
}
#headerMenu ul.submenu{
  margin:0;
  padding:0;
}
#headerMenu ul.submenu li{
  display:block;
  margin:0;
  padding:0;
  overflow:hidden;
}
#headerMenu ul.menu>li{
  height:40px; /* ボタンの高さ */
  background-color:#ffffff;/* IE7対応 */
  background-image:url();    /* 背景画像 */
}
#headerMenu ul.menu>li:hover{
  height:auto;
}

文字の色や背景色は、ご自分のお好みでどうぞ。

フリースペース編集を開きます

「設定・管理」→「フリースペース編集」とクリックします。

フリースペース編集に文を追加します

フリースペース編集に、次の文を追加してください。

<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><!--
-->  <ul class="submenu"><!--
-->  <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><!--
--></li><!--
--><li><a href="#" target="_blank">メニュー4</a></li><!--
--><li><a href="#" target="_blank">メニュー5</a></li><!--
--></ul><!--
--></div>

メニューの名前は、ご自分のブログに合わせてください。

保存をクリックし、確認すると...。



はい、グローバルメニューとプルダウンメニューの出来上がりです。

まとめ

行きたい場所にすぐに飛べるグローバルメニューとプルダウンメニューは、とっても便利。
記事が増えてきたなあと思ったら、ぜひトライしてみてください！

では、また〜＾＾