• WordPress
    おすすめのレンタルサーバー比較
    2017年9月10日
  • 撮影
    撮影に便利そう!折り畳み撮影ボックスを発見
    2017年1月23日
  • WordPress
    初心者向け!WordPress日本語無料テーマ5選
    2016年12月27日
  • ウェブサービス
    ママ向け在宅&アルバイト求人サイト「mama works」
    2017年1月25日
  • ホームページ
    グーペは、お店やお教室のホームページにぴったりのサービス
    2017年6月21日
  • ホームページ
    ホームページサービスはどれを使えばよい?
    2017年2月16日
  • ウェブサービス
    カンタンに自分でバナーやヘッダーが作れる!バナープラス
    2017年9月8日
  • ウェブサービス
    ハンドメイド作家さんに朗報!ココナラハンドメイドがこの春オープン
    2017年3月9日

アメブロ旧CSSデザインでグローバルメニューのプルダウンを作りましたので、シェアしたいと思います。
(新CSSではございませんのでご注意ください)

アメブロ プルダウン付きグローバルメニューの作り方

今回はこんな感じのメニューを作ってみたいと思います。

 

グローバルメニュー設置方法として大きく2つあります。
タグでの色指定・画像指定。

今回は最も簡単なタグ指定の方法について載せてみます。

サイドバーでフリースペースを掲載する

アメブロ→設定・管理→サイドバーの配置設定でフリースペースを加えます

リンク先をフリースペースに入力します。

設定・管理→フリースペースにグローバルメニューのタグを入れます

<div id="headerMenu"><!--
--><ul class="menu"><!--
--><li><a href="#">メニュー1</a></li><!--
--><li><a href="#">メニュー2</a></li><!--
--><li><a href="#">メニュー3</a></li><!--
-->  <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><!--
-->  </ul><!--
--></li><!--
--><li><a href="#">メニュー4</a></li><!--
--><li><a href="#">メニュー5</a></li><!--
--></ul><!--
--></div>

改行するとナビがずれるので、改行せずに入力してください。

メニューが4つの方は、<li><a href="#">メニュー5</a></li>は削除しましょう。
「#」にリンク先のURLを、「メニュー」のところは表示したい文字を入れます。
サブメニューは必要な数に合わせてたし引きしてください。

ポイント:プルダウンにしたいメニューの次に太字で記載した内容を入れることです。

ブログデザインCSSをスクロール

/*
*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*

(4) その他、拡張

*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*:::*
*/

/* その他、拡張があれば記述 */

と記載があるところの下に下記をコピペします。

/* ここからグローバルメニュー */
.skinContentsArea {
position: relative;
}
#headerMenu, #headerMenu ul,
#headerMenu li, #headerMenu a {
margin: 0;
padding: 0;
background-color: transparent;
}
#headerMenu {
position: absolute;
line-height: 1.0;
overflow: visible;
}
#headerMenu ul.menu {
list-style: none;
overflow: visible;
}
#headerMenu ul.menu:after {
display: block;
clear: both;
content: ".";
height: 0px;
overflow: hidden;
visibility: hidden;
}
#headerMenu ul.menu li {
position: relative;
display: block;
float: left;
overflow: visible;
}
#headerMenu ul.menu>li {
border-style: none none none solid;
}
#headerMenu ul.menu>li:first-child {
border: 0 none;
}
#headerMenu ul.menu li a {
display: block;
width: auto;
white-space: nowrap;
overflow: hidden;
text-align: center;
background-repeat: repeat;
background-position: center center;
}
/* ここまで */
/* メニューカスタマイズ */
.skinContentsArea {
padding-top: 60px; /* 設置スペース */
}
#headerMenu {
top: 10px; /* 上下位置調整 */
left: 0px; /* 左右位置調整 */
}
#headerMenu ul.menu li {
font-size: 14px; /* 文字サイズ */
height: 50px; /* ボタンの高さ */
line-height: 50px; /* ボタンの高さ */
}
#headerMenu ul.menu li {
width: 188px; /* ボタンの幅(第一ボタン以外) */
}
#headerMenu ul.menu>li:first-child {
width: 188px; /* ボタンの幅(第一ボタン) */
border-width: 1px; /* 枠線の太さ */
border-style: solid; /* 枠線の種類 */
border-color: #87cefa; /* 枠線の色 */
}
#headerMenu ul.menu>li {
border-color: #87cefa; /* 区切り線の色 */
border-width: 1px; /* 枠線の太さ */
border-style: solid; /* 枠線の種類 */
margin: 0 2px;
}
#headerMenu ul.menu li a {
color: #555555; /* 文字色 */
font-weight: normal; /* 太字 */
text-decoration: none; /* 下線 */
background-color: #f0f8ff; /* 背景色*/
}
#headerMenu ul.menu li a:hover {
color: #555555; /* 文字色(オンマウス時) */
font-weight: normal; /* 太字(オンマウス時) */
text-decoration: underline; /* 下線(オンマウス時) */
background-color: #f0f8ff; /* 背景色(オンマウス時) */
}
/*メニューカスタマイズ 終了 */

ここまでは通常のグローバルメニューです。

メニューの数が5つの場合、メニューとメニューの間を開けているので
一つあたりのメニューの横幅は188pxくらいです。(ちょっと隙間が空きます)
プルダウンの場合、さらに下に下記を追加します。

/*サブメニューここから */
#headerMenu ul.submenu {
position: absolute;
top: -99999px;
z-index: 99999;
}
/* ここまで */
/* サブメニューカスタマイズ */
#headerMenu ul.submenu {
}
#headerMenu ul.menu li:hover ul.submenu {
left: 20px; /* 横位置(親メニューボタンの左端から) */
top: 35px; /* 縦位置(親メニューボタンの上端から) */
}
#headerMenu ul.submenu li {
border-top: 1px solid #ffffff; /* ボタン区切り線(上側) */
border-width: 1px; /* 枠線の太さ */
border-style: solid; /* 枠線の種類 */
border-color: #87cefa; /* 枠線の色 */
}
#headerMenu ul.submenu li:first-child {
border: 0 none; /* 第一ボタンの区切り線(上側) */
border-width: 1px; /* 枠線の太さ */
border-style: solid; /* 枠線の種類 */
border-color: #87cefa; /* 枠線の色 */
}
/*サブメニューカスタマイズ終了 */

赤字になっているところは、本体設定です。リンク色や背景色の設定になります。
原色大辞典などを見て、文字色と背景色を変更しておきましょう。

完成図

こんな感じで作ることができます。

指定したいところにプルダウンメニューを設定することが結構難しいですが、ぜひ試してみてくださいね!

関連キーワード
ブログの関連記事
  • オシャレ&カンタンに作れるヘッダー画像の作り方のコツ
  • 起業ブログ、アメブロとWordPressはどちらを使う?
  • <重要>アメブロテンプレート&アメブロカスタマイズ講座をご購入の方へ
  • アメブロ Perfect GuideBook 改訂第3版が4月27日に発売
  • アメブロのアクセス数と実際のPVの差は?
  • アメブロからWordPressに移行してもうまくいかない理由

この記事が気に入ったら
フォローしよう

最新情報をお届けします

おすすめの記事
コンテンツ
当スクールでは、集客ツールの通信講座を中心にコンテンツをお届けしています。 自分で作った方が絶対的に安くなる!自分で修正も追加もできる! で...
ブログ
自分でアメブロをカスタマイズするときに、背景色や背景画像を入れたいと思う方は多いのではないでしょうか。 背景があるとちょっと華やかになります...
SNS
お仕事でFacebookを使っていると、リアルタイムで告知やブログ投稿のシェアを行っていくのは意外と大変。 告知文だって思いついたときにどん...