この記事に含まれるタグ (Keyword) :
カテゴリー 現在地表示 変数 非表示カテゴリー 折りたたみ
「私のカテゴリーリストはどのように...?」 と質問があったのでまとめてみました。
下図 右側 が 私のカテゴリーリストです。 地味ではありますが、
- 普段は折りたたみ式, カテゴリー別ページでは 展開状態
- カテゴリー別ページ では 現在地 を目立つように表示
[ カテゴリーリストに 「現在地表示機能」 を ] ← これの発展形 - スクリプトOFF でも 問題なし (展開状態で表示)
- 任意のカテゴリーを非表示 に (無駄のない 変数ベース)
と、色々小細工しています。 一般的には カテゴリーは目立つように 表示するのが良いと思いますが、私のテンプレートでは 上のナビゲーション部分にも入っているので... このぐらいで丁度良いかな と思っています。

左側 は Paroday さん作の Categories... というプラグインです。この綺麗なアイコンが使ってみたかったので... 作者さんにお願いして アイコンだけ加工して使わせていただくことにしました。 Paroday さんのプラグインについては 過去記事 を参照してください。
現在地表示機能付き カテゴリーリスト の設置方法
このブログで使っているものと 「完全に同じものではありません」 が このままコピー&ペーストすれば大丈夫なようにしてあります。 (※私が実際に使っているものは 非表示カテゴリー対応版 で <!--category_nosub--> ~ <!--/category_nosub--> 部分を外しています。 また、使用している id名 なども 下のソースとは異なる部分がありますので 混在させないようにご注意ください。) 必要な部分だけ取り入れてもらえば 色々と応用できると思います。
単カテゴリーのみ の場合 (親子カテゴリーの必要がない場合) は、
<!--category_parent--> ~ (中略) ~ <!--/category_sub_end--> 部分は不要です。 (※そのまま残しても特に問題はありません。)
1. プラグインの編集 で内容を以下のものと変更
プラグイン → 詳細 → 【HTMLの編集】 で内容を以下のものと変更します。 プラグインは 公式プラグインのカテゴリーでも それ以外でも何でもOKです。
折りたたみスクリプト 「プラグインの折りたたみ」 本体
Copyright (c) FC2ブログのテンプレート工房
http://10plate.blog44.fc2.com/blog-entry-131.html
テンプレート内 又は プラグイン内 に1つだけ記入すればOK!
=========================================== -->
<script type="text/javascript">
// <![CDATA[
function showPlagin(idno){
pc = ('PlagClose' + (idno));
po = ('PlagOpen' + (idno));
if( document.getElementById(pc).style.display == "none" ) {
document.getElementById(pc).style.display = "block";
document.getElementById(po).style.display = "none";
}
else {
document.getElementById(pc).style.display = "none";
document.getElementById(po).style.display = "block";
}
}
// ]]>
</script>
<!-- ======================================= -->
<!--not_category_area-->
<script type="text/javascript">
// <![CDATA[
document.write('<div id="PlagOpen1"><a href="#" onclick="showPlagin(1); return false;" title="カテゴリーリストを表示します">▽ List OPEN ▽</a></div>');
document.write('<div id="PlagClose1" style="display:none">');
document.write('<a href="#" title="閉じる" onclick="showPlagin(1); return false;">List CLOSE</a>');
document.close(); // この行追加しました
// ]]>
</script>
<!--/not_category_area-->
<ul id="oyako_cat">
<!--category-->
<li class="c_oya<%category_no>"><a href="<%category_link>" class="cat_oya<%category_no>" title="親カテゴリー: <%category_name> へ"><%category_name> [total <%category_count>]</a>
<ul><!--/category_parent--><!--category_sub_hasnext-->
<li class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a></li>
<!--/category_sub_hasnext--><!--category_sub_end-->
<li class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a></li>
</ul>
</li>
<!--/category_sub_end-->
<li class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a>
</li>
<!--/category_nosub-->
<!--/category-->
</ul>
<!--not_category_area-->
<script type="text/javascript">
// <![CDATA[
document.write('</div>');
document.close(); // この行追加しました
// ]]>
</script>
<!--/not_category_area-->
- プラグインの折りたたみ - FC2ブログのテンプレート工房
これをアレンジして document.write の形にしてあります。 このようにしておけば スクリプトOFF でも問題なく表示できるので、色々な用途に使えます。
2. スタイルシートに 以下を記入

#oyako_cat li ul {
margin:auto auto 14px 0;
line-height:1.4;
}
#oyako_cat li ul li {
list-style:none;
padding-left:19px;
background:url(http://blog-imgs-35.fc2.com/a/r/i/arinogotokuatumarite/c_close.gif) no-repeat left top;
}
* html #oyako_cat li ul li {
background:none;
}
追記 : 2011/10/03
左の黒丸 と その余白 を無くしたい場合は、以下を(通常は↑の最初に)追加します。
margin:auto 0;
list-style:none;
}
3. テンプレートの <head> ~ </head> 部分に 以下を記入
カテゴリー別のページ(<!--category_area-->) でだけ 反映されるスタイル を設定します。 変数 を利用していますので、テンプレートの <head> 部分に入れてください。

<style type="text/css">
#oyako_cat li.c_oya<%cno> ul li,
#oyako_cat li ul li.cat<%cno> {
background /**/:/**/url(http://blog-imgs-35.fc2.com/a/r/i/arinogotokuatumarite/c_open.gif) no-repeat left top;
}
li.cat<%cno> a,
a.cat_oya<%cno> {
color:#444;
}
</style>
<!--/category_area-->
適当にアレンジして使ってみてください。 変数 って本当に便利!
キーワード検索 : カテゴリー 現在地表示 変数 非表示カテゴリー 折りたたみ






お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-138.html
2010/06/07 ~ | Comment (5) tweet? | ↑ ページ先頭へ ↑ |サポート専用窓口でのアドバイスありがとうございました。
結局、単カテゴリーのみにすることに決めました。
そこで質問なのですが、非表示カテゴリーを作ったので上の記事のカテゴリーリスト を使うことにしました。
HTMLの編集から赤字の部分を消したところまではできました。
(この時は普通のカテゴリも非表示のカテゴリもありました。)
次に非表示カテゴリーを作ったので<!--category_nosub--> ~ <!--/category_nosub--> を消したら、プラグインの場所には、非表示カテゴリーとノンカテゴリーしか表示されませんでした。これは何故でしょうか?
単カテゴリーの場合は違う動作をしなければいけなかったのでしょうか?
ナビゲーションの所の非表示カテゴリーは無事に消えていたのですが…
よく分からないので何度もすみませんが教えてください。お願いします。
ブログがプライベートモードなので、確認はできませんが。。。
FC2 非表示カテゴリーの作り方
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-68.html
B. 単カテゴリー表示の場合 のような構造になっていますか?
単カテゴリーの場合は、<!--category_nosub--> ~ <!--/category_nosub--> を利用します。
逆を消しているようなので、管理画面の設定 と ソース を確認してみてください。
こんにちわ。
カスタマイズについて質問させて下さい。
カテゴリ別ページの時にも「▽ List OPEN ▽」と「close」を表示させるにはどうすればいいのでしょうか?
<!--not_category_area-->をプラグインのHTMLから消してみたのですが、そうすると「カテゴリ別ページでは 展開状態」の機能がなくなってしまいました。
「カテゴリ別ページでは 展開状態」を維持したまま、カテゴリ別ページの時にも「▽ List OPEN ▽」と「close」を表示させる事は出来ないでしょうか?
よろしくお願いします。
カテゴリー別ページで 展開状態+List CLOSEを表示・機能させるには、
ソースを ↓以下のように変更すればOKです。
<script type="text/javascript">
// <![CDATA[
document.write('<div id="PlagOpen1"<!--category_area--> style="display:none"<!--/category_area-->><a href="#" onclick="showPlagin(1); return false;" title="カテゴリーリストを表示します">▽ List OPEN ▽</a></div>');
document.write('<div id="PlagClose1"<!--not_category_area--> style="display:none"<!--/not_category_area-->>');
document.write('<a href="#" title="閉じる" onclick="showPlagin(1); return false;">List CLOSE</a>');
document.close();
// ]]>
</script>
(中略)
<script type="text/javascript">
// <![CDATA[
document.write('</div>');
document.close();
// ]]>
</script>
無事、表示させることが出来ました。
ありがとうございました!
コメントを投稿する 記事: 現在地表示機能付き カテゴリーリスト の設置方法
お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。
5 Comment