PREV | PAGE-SELECT | NEXT

≫ EDIT


【FC2ブログ】横メニューバーを設置【ドロップダウンメニュー】

こんばんは〜。
今日は当ブログのタイトル画像下にもある
横一列の【メニューバー】を表示する方法をご紹介します☆

スポンサーリンク



↓ブログのタイトル下のやつをメニューバーと言います↓コレねコレ。



参考にさせていただいたのは「FC2ブログのテンプレート工房」様♪

私の説明を見るより、↑こちらのサイトを直接見たほうが解りやすいし、
他にも色々カスタマイズ方法が載ってますw

図々しくカスタマイズ方法をご紹介しちゃいますw

・・・・・・・・・・

次の記述を「HTML編集」のメニューバーを設置したい場所にコピペして追加します。

赤い部分は各自希望のURL、リンク名に変えてください。
以下は例として6件のメニュー項目を作ってありますが、希望に合わせて「<li><a href=""></a></li>」の記述を増やしたり減らしたりしてください。


<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事1</a></li>
<li><a href="<%url>blog-entry-2.html">記事2</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ1</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ2</a></li>
</ul>
<!--▲ メニューバー ▲-->



※このタグを追加する場所は大体タイトル&ブログ説明文の下です。
これはブログテンプレートによって違うので要確認。
ちなみに、私の場合は


<!-- ▲ヘッダ END -->


↑という記述のすぐ下に挿入しました。



続いて、「スタイルシート編集」の末尾に次の記述をコピペして追加します。

/* ▼メニューバー▼ */
ul#menu_bar {
font-size: 80%; /* 文字サイズ */
height:25px; /* 高さ */
background-color:#000000; /* 背景色 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔 */
margin-bottom:5px; /* 下の間隔 */
}

#menu_bar li {
list-style-type:none;
float:left;
line-height:25px; /* 高さ */
margin:0px;
padding:0px;
}

#menu_bar li a {
display:block;
text-align:center;
width:100px; /* 1つのメニューボタンの幅 */
border-right:1px solid #333333; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
text-decoration:none;
}

#menu_bar li a:hover{
color:#ffffff; /* マウスが乗ったときのリンク文字の色 */
background-color:#222222; /* マウスが乗ったときの背景色 */
text-decoration:none;
}
/* ▲メニューバー▲ */



※メニューバーの大きさ・色などは各自好みに合わせて編集してください♪




とまぁ、一応ここまでで横一列のメニューバーが出来たと思います。

さらに、当ブログのメニューバー「カテゴリー」にマウスを当てると
下にズラッと更なるメニュー(ドロップダウンメニュー)が出てくるようにするには以下の通りです。

「HTML編集」の先ほどメニューバーの設置で追加した記述に
さらに赤い部分を付け足してください。


<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事1</a></li>
<li><a href="<%url>blog-entry-2.html">記事2</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ1</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ2</a></li>

<li class="menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'"><a href="#">第1階層</a>
<ul>
<li><a href="#">第2階層</a></li>
<li><a href="#">第2階層</a></li>
<li><a href="#">第2階層</a></li>
<li class="menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'"><a href="#">第2階層</a>
</li>
</ul>
</li>


</ul>
<!--▲ メニューバー ▲-->



※この記述だとメニューバーの一番右がドロップダウンになります。
 赤い部分の挿入場所を変えるとドロップダウンの位置も変わるので
 お好きな所にを挿入してください。
 (例:<li><a href="<%url>">トップページ</a></li>の下に挿入すれば左から2番めがドロップダウンに。)


続いて、「スタイルシート編集」の末尾に次の記述をコピペして追加します。

※先ほどメニューバーの設置で追加した

/* ▼メニューバー▼ */


/* ▲メニューバー▲ */

下に以下を追加してください。

/* ▼メニューバー(ドロップダウン)▼ */

#menu_bar ul {
position:absolute;
margin:0;
padding:0;
}

#menu_bar li {
position:relative;
margin:0;
padding:0;
}

#menu_bar li ul li {
float:none;
}

#menu_bar li.menu ul,
#menu_bar li.menu ul li.menu ul,
#menu_bar li.menu_on ul li.menu ul {
display:none;
}

#menu_bar li.menu_on ul {
position:absolute;
display:block;
top:100%;
left:0;
}

#menu_bar li.menu_on ul li.menu_on ul {
position:absolute;
display:block;
top:0;
left:100%;
}

/* ▽IE6バグ対応▽ */
* html #menu_bar li li,
* html #menu_bar li li li {
font-size:1px;
line-height:0;
}
* html #menu_bar li li a,
* html #menu_bar li li li a {
display:block;
font-size:10pt;
line-height:25px;
}
/* △IE6バグ対応△ */

#menu_bar li li a,
#menu_bar li li li a {
border-top:1px solid #111111; /* 区切り線 */
}

/* ドロップダウンリストの透過(IE6以下未対応) */
#menu_bar > li > ul {
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}

/* ▲メニューバー(ドロップダウン)▲ */





プレビューで確認して、OKなら「更新」ボタンを押します(╹◡╹)

※必ずHTML、CSSも書き換える前にコピペしてメモ帳などに保存しておきましょう!

スポンサーリンク



今日もお読み頂き有難うございました!

▽ランキングに参加しています▽

ポチッとしていただけると節約の励みになります(๑╹ڡ╹๑)

▽ついでに「拍手」も気が向いたらポチってください♪▽
web拍手 by FC2

こんな記事も読まれています


関連記事

| ブログカスタマイズ | 01:30 | comments(-) | trackbacks:0 | TOP↑

□現在の総額:1,800,478円  □目標の総額:30,260,000円
(住宅:1,000万円、特別費積立:12万円、教育:1,000万円、老後:1,000万円、ピアノ積立:4万、ディズニー貯金:10万円)
□目標まで残り:28,459,522円...目標額までの道のりは遠い(;´Д`)
(2018年2月9日現在)貯金額の内訳:
住宅頭金1,000万円♪ ⇒¥71,986長女教育費500万♪ ⇒¥1,646,040
(前月比+¥69,092(前月比+¥40,000
特別費積立12万円♪ ⇒¥10,000次女教育費500万♪ ⇒¥70,000
(前月比+¥10,000(前月比+¥70,000
老後の為に1,000万♪ ⇒¥0ディズニー積立♪ ⇒¥0
(前月比±0(前月比±0
216473.gifピアノ積立♪ ⇛¥2,452
(前月比¥2,550)



TRACKBACK URL

http://toranekonoie.com/tb.php/13-d19e99e6

TRACKBACK

PREV | PAGE-SELECT | NEXT

ブログパーツ