以前にメニューバーのドロップダウンを紹介しましたが、このドロップダウンにカテゴリを表示する方法を紹介します。

このドロップダウンメニューは親子設定したカテゴリにも対応しています。

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>
<!--▲ メニューバー ▲-->

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

関連記事

• タイトル画像のaltとリンクタイトルを「記事タイトル ～ ブログタイトル」とする (2009/10/24)
• FC2ブックマークの位置を変更 (2009/10/23)
• トップページや個別記事ページで一部のスタイルを変える (2009/10/18)
• メニューバーのドロップダウンにカテゴリを表示 (2009/10/16)
• 画像の上に文字等を重ねる (2009/10/12)
• コメント入力欄に初期値を設定する (2009/10/01)
• FC2ブログ拍手の位置を変更 (2009/09/28)