FC2ブログのテンプレート工房

このカスタマイズを施すには、まずメニューバーのドロップダウンの記事にあるスタイルシートを加えてください。

そして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">記事１</a></li>
<li><a href="<%url>blog-entry-2.html">記事２</a></li>

<!--▼ リンクを表示 ▼-->
<li class="menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'"><a href="#">リンク一覧</a><ul>
<!--link-->
<li>
<a href="<%link_url>" target="_blank"><%link_name></a>
</li>
<!--/link-->
</ul></li>
<!--▲ リンクを表示 ▲-->

<!--▼ 月別アーカイブを表示 ▼-->
<li class="menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'"><a href="#">月別アーカイブ</a><ul>
<!--archive-->
<li>
<a href="<%archive_link>"><%archive_year>年<%archive_month>月 (<%archive_count>)</a>
</li>
<!--/archive-->
</ul></li>
<!--▲ 月別アーカイブを表示 ▲-->

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

これでメニューバーに最新記事と最新コメントを表示することができます。
tskillさん、ありがとうございました＾＾

HTMLを編集します。
第２階層は赤い部分、第３階層はオレンジ部分のようにしてください。

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

<li class="menu_len" onmouseover="this.className='menu_len_on'" onmouseout="this.className='menu_len'"><a href="#">第１階層</a>
<ul>
<li><a href="#">第２階層</a></li>
<li><a href="#">第２階層</a></li>
<li><a href="#">第２階層</a></li>
<li class="menu_len" onmouseover="this.className='menu_len_on'" onmouseout="this.className='menu_len'"><a href="#">第２階層</a>
<ul>
<li><a href="#">第３階層</a></li>
<li><a href="#">第３階層</a></li>
<li><a href="#">第３階層</a></li>
</ul>
</li>
</ul>
</li>

</ul>
</div>
<!--▲ 縦メニュー ▲-->

そしてスタイルシートの末尾に以下を加えてください。
既に縦メニューを設置している場合は赤い部分を加えてください。

/* ▼ 縦メニュー ▼ */

#menu_length ul {
margin:0;
padding:0;
}

#menu_length li {
list-style: none;
margin:0;
padding:0;
}

#menu_length li a {
display:block;
text-align:left;
padding-left: 20px;
text-decoration:none;
width:150px; /* 幅 */
line-height:30px; /* 高さ */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
border-left:10px solid #c0c0c0; /* 左飾り線 */
border-bottom:1px solid #333333; /* 下線 */
}

/* ▽マウスが乗ったとき▽ */
#menu_length li a:hover{
background-color:#222222; /* メニューボタンの背景 */
border-left:10px solid #ff0000; /* 左飾り線 */
}
/* △マウスが乗ったとき△ */

/* ▲ 縦メニュー ▲ */

/* ▼ 縦メニュー（階層化）▼ */

#menu_length {
height: 300px; /* メニュー全体の縦の長さ */
}

#menu_length ul {
position:absolute;
}

#menu_length li {
position:relative;
}

#menu_length li.menu_len ul,
#menu_length li.menu_len ul li.menu_len ul,
#menu_length li.menu_len_on ul li.menu_len ul {
display:none;
}

#menu_length li.menu_len_on ul,
#menu_length li.menu_len_on ul li.menu_len_on ul {
position:absolute;
display:block;
top:0;
left:100%;
}

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

/* ドロップダウンリストの透過（IEは透過しません） */
#menu_length > ul > li > ul {
-moz-opacity: 0.9;
opacity: 0.9;
}

/* ▲縦メニュー（階層化）▲ */

これで縦メニューを階層化できます。
縦メニューを階層化するとメニュー全体の縦の長さを設定する必要があります。適当な数値を設定してください。

【2009/12/08 追記】

IEではドロップダウンリストは透過しませんが、「第３階層を使わない」という条件で第２階層を透過することができます。スタイルシートに赤い一行を加えてください。

/* ドロップダウンリストの透過（IEは透過しません） */
#menu_length > ul > li > ul {
-moz-opacity: 0.9;
opacity: 0.9;
filter:alpha(opacity=90); /* IEで第２階層のみならば透過 */
}

縦メニューを表示したい箇所（テンプレートHTML、またはプラグインHTML）に、以下のタグを加えてください。

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

そしてスタイルシートの末尾に以下を加えてください。

/* ▼ 縦メニュー ▼ */

#menu_length ul {
margin:0;
padding:0;
}

#menu_length li {
list-style: none;
margin:0;
padding:0;
}

#menu_length li a {
display:block;
text-align:left;
padding-left: 20px;
text-decoration:none;
width:150px; /* 幅 */
line-height:30px; /* 高さ */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
border-left:10px solid #c0c0c0; /* 左飾り線 */
border-bottom:1px solid #333333; /* 下線 */
}

/* ▽マウスが乗ったとき▽ */
#menu_length li a:hover{
background-color:#222222; /* メニューボタンの背景 */
border-left:10px solid #ff0000; /* 左飾り線 */
}
/* △マウスが乗ったとき△ */

/* ▲ 縦メニュー ▲ */

幅、高さ、色等の各パラメータはお好きな様に設定してください。

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">記事１</a></li>
<li><a href="<%url>blog-entry-2.html">記事２</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ１</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ２</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ３</a></li>

<li class="menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'"><a href="#">カテゴリ</a>
<ul class="main_menu">
<!--category-->
<!--category_sub_begin-->
<ul class="sub_menu">
<!--/category_sub_begin-->
<!--category_nosub-->
<li class="main_list">
<!--/category_nosub-->
<!--category_parent-->
<li class="main_list menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'">
<!--/category_parent-->
<!--category_sub_hasnext-->
<li class="sub_list">
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li class="sub_list_end">
<!--/category_sub_end-->
<a href="<%category_link>"><%category_name>(<%category_count>)</a>
<!--category_nosub-->
</li>
<!--/category_nosub-->
<!--category_sub_hasnext-->
</li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
</li>
</ul>
</li>
<!--/category_sub_end-->
<!--/category-->
</ul>
</li>

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

あとは以前紹介したスタイルシートが実装されていれば完成です。

HTMLを編集します。
<head>～</head>で囲まれた中に以下を加えてください。
または外部ファイルに加えてください。

<script type="text/javascript"><!--

var img = new Array();
img[0]=new Image();img[0].src="画像0のURL";
img[1]=new Image();img[1].src="画像1のURL";
img[2]=new Image();img[2].src="画像2のURL";
img[3]=new Image();img[3].src="画像3のURL";
img[4]=new Image();img[4].src="画像4のURL";

function bgch(x,y){
document.getElementById(x).style.backgroundImage='url('+img[y].src+')';
}

// --></script>

img[5],img[6]・・・と好きなだけ画像を追加できます。

そしてメニューバーのリンクタグ<a>の中に、次の赤い箇所を加えてください。

<ul id="menu_bar">
<li><a href="～" onMouseOver="bgch('header_body','1')" onMouseOut="bgch('header_body','0')">メニュー1</a></li>
<li><a href="～" onMouseOver="bgch('header_body','2')" onMouseOut="bgch('header_body','0')">メニュー2</a></li>
<li><a href="～" onMouseOver="bgch('header_body','3')" onMouseOut="bgch('header_body','0')">メニュー3</a></li>
<li><a href="～" onMouseOver="bgch('header_body','4')" onMouseOut="bgch('header_body','0')">メニュー4</a></li>
</ul>

当サイトが公開している共有テンプレートだと、lightframeシリーズはこのままでよいですが、standardシリーズをお使いの方は header_body の部分を header に書き換えてください。

これでタイトルの背景画像が
メニュー1にマウスを乗せると画像1に
メニュー2にマウスを乗せると画像2に
メニュー3にマウスを乗せると画像3に
メニュー4にマウスを乗せると画像4に
そして各メニューからマウスを離すと画像0に変更されます。


【2007/07/30 追記】
サイトを開いた時点でタイトル背景画像を表示するには、スタイルシートで設定する必要があります。
standardの場合はこちら
lightframeの場合はこちら
を参考にしてください。
img[0]と同じ画像を設定すると良いと思います。

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">記事１</a></li>
<li><a href="<%url>blog-entry-2.html">記事２</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ１</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ２</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ３</a></li>
<li><form action="./" method="get">
<input type="text" name="q" value="" maxlength="200" class="msearch" />
<input type="submit" value=" 検索 " />
</form></li>
</ul>
<!--▲ メニューバー ▲-->

そしてスタイルシートの末尾に以下を加えてください。

/* メニューバーの検索窓 */
.msearch {
margin-left:20px; /* 左の余白 */
width:200px; /* 入力欄の幅 */
}

余白や幅の設定値はお好みにあわせて変えてください。

まずメニューに表示したい画像を用意します。
メニューのサイズにあわせた画像を用意してください。
Sample A


そしてマウスを乗せたときに表示したい画像を用意します。
Sample B


これを画像編集ツール等を使って１つの画像にしてください。
Sample C


画像を１つに編集できたらそのファイルをアップロードしてください。
そしてスタイルシートの末尾に以下を加えてください。

/* メニュー画像 */
#menu_bar li a {
background-image: url("Sample C に相当する画像のURL");
}

/* ロールオーバー（画像切り替え） */
#menu_bar li a:hover {
background-position:left bottom;
}

リンク部分ではないメニューバー全体の背景も画像にしたい場合は、更に以下も追加してください。
Sample Aに相当するような画像がいいかも知れません。

/* メニュー全体背景 */
#menu_bar {
background-image: url("メニュー全体背景に使う画像のURL");
}

メニュー画像を個別に設定したい場合

HTMLを編集します。
変更を加えたいメニューに適当なクラス名を設定してください。
ここでは例としてmenu01,menu02,menu03と設定します。

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li class="menu01"><a href="#">メニュー１</a></li>
<li class="menu02"><a href="#">メニュー２</a></li>
<li class="menu03"><a href="#">メニュー３</a></li>
</ul>
<!--▲ メニューバー ▲-->

そしてスタイルシートの末尾に以下を加えてください。
各クラス名に画像を設定します。

#menu_bar li.menu01 a {
background-image: url("menu01に表示したい画像のURL");
}

#menu_bar li.menu02 a {
background-image: url("menu02に表示したい画像のURL");
}

#menu_bar li.menu03 a {
background-image: url("menu03に表示したい画像のURL");
}

用意した画像自体に文字がある場合、画像の上に表示されるリンクテキストは不要になります。
そのようなときには「text-indent:-9999px;」を加えてください。

#menu_bar li.menu01 a {
background-image: url("menu01に表示したい画像のURL");
text-indent:-9999px;
}

#menu_bar li.menu02 a {
background-image: url("menu02に表示したい画像のURL");
text-indent:-9999px;
}

#menu_bar li.menu03 a {
background-image: url("menu03に表示したい画像のURL");
text-indent:-9999px;
}

これでメニューバーの画像ロールオーバーができます。

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">記事１</a></li>
<li><a href="<%url>blog-entry-2.html">記事２</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ１</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ２</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ３</a></li>

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

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

次にスタイルシートの末尾に以下を加えてください。
既にメニューバーを実装済みの方は赤い部分のみ追加してください。

/* ▼メニューバー▼ */
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; /* １つのメニューボタンの幅 */
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;
}
/* ▲メニューバー▲ */

/* ▼メニューバー（ドロップダウン）▼ */

#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;
}

/* ▲メニューバー（ドロップダウン）▲ */

これでドロップダウンメニューが出来ます。
区切り線やドロップダウンリストの透過はお好きな様に設定してください。

ドロップダウンは２段階（第３階層の表示）まで対応しているので、親子カテゴリの表示に利用しても良さそうですね。


【2009/08/04 追記】
filter:alpha(opacity); を使うと、IE7,8で第３階層が表示されませんでした。スタイルシートからこれを削除してください。
申しわけございません。m(__)m
また、第２、第３階層のメニュー幅をそれぞれ設定したい場合は、スタイルシートの末尾に以下を加えてください。

/* 第２階層の幅 */
#menu_bar li li a {
width:150px;
}

/* 第３階層の幅 */
#menu_bar li li li a {
width:150px;
}

ただし第３階層の始点は、第２階層の終点より少しずれた位置になってしまうのでご了承ください。

スタイルシートを編集します。
赤い行を追加し、青い行を削除してください。

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

#menu_bar li {
～
width:14%; /* １つのメニューボタンの幅（％） */
}

#menu_bar li a {
～
width:100px; /* １つのメニューボタンの幅 */
～
}

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

％の数値はメニュー数に応じて変更してください。

単位は小数点以下も対応しますが、あまり100%ギリギリまで近づけると、ブラウザによっては折り返されてしまう場合があります。

特にIEはボーダー幅の分、他のブラウザより幅をとることがあります。少し数値に余裕を持たせるか、複数のブラウザで確認してカスタマイズすることをお勧めします。