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">記事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><a href="<%url>blog-category-3.html">カテゴリ3</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>
<!--▲ メニューバー ▲-->


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

関連記事
[ 6508 ] すいません
早速ありがとうございます。こちらも欲しかったので、使わせて頂きます。

でも、私が欲しのは、
私のところの新着記事にマウスオーバーすると新着記事が出ますよね。その横にカテゴリタイトルがあって、そこにマウスオーバーすると、そのカテゴリの新着記事が出るものが欲しかったのです。
わかりにくい説明ですいません。
[ 2009/10/16 21:08 ] [ 編集 ]
[ 6509 ] > さくらいさん
質問内容を間違えてしまい申しわけありません。

私は試したことが無いのですが、同一カテゴリの記事リストを表示する方法もあるようです。

FC2ブログで関連エントリーを表示させるスクリプト Harmonia!!
http://lastoneofthezodiac.blog38.fc2.com/blog-entry-4493.html

本来ならFC2が変数を用意してくれれば一番簡単に実装できるのですが・・・
FC2リクエストにも出ているようです。

FC2リクエスト カテゴリ別記事リストがほしい
http://request.fc2.com/view_wish.php?wid=5_1244163299_4562534
[ 2009/10/16 22:02 ] [ 編集 ]
[ 6510 ] いつもすいません
とりあえずリクエストボタンをポチッと押しておきました。
私の能力では今すぐに出来そうにありません。
[ 2009/10/16 22:19 ] [ 編集 ]
[ 6521 ] > さくらいさん
このカスタマイズはちょっと難しそうですよね。
FC2が対応してくれれば良いのですが^^;
[ 2009/10/17 21:44 ] [ 編集 ]
[ 6864 ]
これを二層にするにはどうすればいいのでしょう?
[ 2009/11/09 15:34 ] [ 編集 ]
[ 6877 ] > 6864の名無しさん
この記事は既に二層に対応しています。記事のとおりにカスタマイズしてください。
[ 2009/11/09 23:34 ] [ 編集 ]
[ 6985 ]
どうもお久しぶりです。

ドロップダウンにより さくらい様のように

最新コメント

最新記事 を表示にすればどうすればいいですかね。

一応自分で出来るだけやってみたのですが^^;

お忙しければスルーおkです m(_ _)m
[ 2009/11/15 10:46 ] [ 編集 ]
[ 6993 ]
自分で何とかできましたww
すみません でした m(_ _)m
[ 2009/11/15 14:42 ] [ 編集 ]
[ 7000 ] > 東城@さん
自己解決されて良かったです^^
[ 2009/11/15 23:18 ] [ 編集 ]
[ 8394 ] タグも自動で表示したい
いつもお世話になっております。
全カテゴリをURL指定した後にこの記事に気づきました orz

質問ですが、これをユーザータグに流用することは可能でしょうか?
category部分をtagやctagに換えたりしてみたのですが、うまく反映できませんでした。
ご指南のほどお願い申し上げます。
[ 2010/02/14 11:22 ] [ 編集 ]
[ 8401 ]
>>緑風呂さん
<li class="menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'"><a href="#">タグ</a>
<ul class="main_menu">
<p class="plugin-tag" &align>
<!--ctag-->
<a href="<%ctag_url>"><%ctag_name></a> 
<!--/ctag-->
</p>
</ul>
</li>
以上のタグを表示したい部分に設置すれば出来ると思います。
[ 2010/02/14 18:22 ] [ 編集 ]
[ 8408 ] ありがとうございます
>>tskillさん
ありがとうございます。おかげさまで無事自動反映できました。
私のブログはタグがガンガン増えるので、これでとても楽になりました。

あと、件数も表示したかったので(<%ctag_count>)を追加させていただきました。
[ 2010/02/14 20:37 ] [ 編集 ]
[ 8635 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2010/04/01 02:37 ] [ 編集 ]
[ 8663 ] 親子カテゴリについて
 説明では、親子カテゴリにも対応ということですが、確認してみても表示されません。
 見てみても分からなくて……。
 すみません、遅くてもいいので返信を頂けると有り難いです;
[ 2010/04/19 07:12 ] [ 編集 ]
[ 9057 ]
使わせていただいてます^^

 質問なのですが・・・  カテゴリ1とそのカテゴリ1の子カテゴリ(3層目)だけで カテゴリ2カテゴリ3を消すにはどうすればいいですか?
[ 2012/03/08 15:29 ] [ 編集 ]
[ 9064 ] > 9057さん
その場合は手打ちで必要な部分だけを作成する必要があります。こちらの記事を参考にしてください。

メニューバーのドロップダウン - FC2ブログのテンプレート工房
http://10plate.blog44.fc2.com/blog-entry-230.html
[ 2012/03/09 21:11 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
ユーザータグ


△ ページトップへ戻る