現在地表示機能付きカテゴリーリストの設置方法【ありのごとくあつまりて】

FC2ブログカスタマイズ，共有テンプレート，素材リンク集，フリーソフトの紹介など。迷子にならないブログ作りを目指し．．．何か1つでもお役に立てる情報を提供できたらいいなぁと思っています。

この記事に含まれるタグ（Keyword） :
カテゴリー現在地表示変数非表示カテゴリー折りたたみ

現在地表示機能付きカテゴリーリストの設置方法

2010/06/07 (月) カテゴリー：ブログカスタマイズ上級

「私のカテゴリーリストはどのように...？」と質問があったのでまとめてみました。
下図右側が私のカテゴリーリストです。地味ではありますが、

普段は折りたたみ式，カテゴリー別ページでは展開状態　
カテゴリー別ページでは現在地を目立つように表示　
[ カテゴリーリストに「現在地表示機能」を ]　← これの発展形
スクリプトOFF でも問題なし（展開状態で表示）　
任意のカテゴリーを非表示に（無駄のない変数ベース）

と、色々小細工しています。一般的にはカテゴリーは目立つように表示するのが良いと思いますが、私のテンプレートでは上のナビゲーション部分にも入っているので．．．このぐらいで丁度良いかなと思っています。

左側は Paroday さん作の Categories... というプラグインです。この綺麗なアイコンが使ってみたかったので... 作者さんにお願いしてアイコンだけ加工して使わせていただくことにしました。 Paroday さんのプラグインについては過去記事を参照してください。

現在地表示機能付きカテゴリーリストの設置方法

このブログで使っているものと「完全に同じものではありません」がこのままコピー&ペーストすれば大丈夫なようにしてあります。（※私が実際に使っているものは非表示カテゴリー対応版で  ～  部分を外しています。また、使用している id名なども下のソースとは異なる部分がありますので混在させないようにご注意ください。）　必要な部分だけ取り入れてもらえば色々と応用できると思います。

単カテゴリーのみの場合（親子カテゴリーの必要がない場合）は、
 ～（中略）～ 　部分は不要です。（※そのまま残しても特に問題はありません。）

1.　プラグインの編集で内容を以下のものと変更

プラグイン → 詳細 → 【HTMLの編集】で内容を以下のものと変更します。プラグインは公式プラグインのカテゴリーでもそれ以外でも何でも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>



<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>


<ul id="oyako_cat">

<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>
<li class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a></li>

<li class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a></li>
</ul>
</li>

<li class="cat<%category_no>"><a href="<%category_link>" title="カテゴリー: <%category_name> へ"><%category_name> (<%category_count>)</a>
</li>


</ul>


<script type="text/javascript">
// <![CDATA[
document.write('</div>');
document.close(); // この行追加しました
// ]]>
</script>


2.　スタイルシートに以下を記入

　c_close.gif

/* 親子カテゴリープラグイン用 */
#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
左の黒丸とその余白を無くしたい場合は、以下を（通常は↑の最初に）追加します。

ul#oyako_cat {
margin:auto 0;
list-style:none;
}

3.　テンプレートの <head> ～ </head> 部分に以下を記入

カテゴリー別のページ（）でだけ反映されるスタイルを設定します。変数を利用していますので、テンプレートの <head> 部分に入れてください。

　c_open.gif


<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>


適当にアレンジして使ってみてください。変数って本当に便利！

キーワード検索：カテゴリー現在地表示変数非表示カテゴリー折りたたみ

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

URL　http://arinogotokuatumarite.blog19.fc2.com/blog-entry-138.html

2010/06/07 ～ | Comment (5) tweet? | ↑ ページ先頭へ ↑ |

@arinogotoku

paruparu (arinogotoku) on Twitter
ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

CATEGORY : テンプレ・FC2マニア » ブログカスタマイズ上級

この前の記事： FC2ブログユーザー限定トラックバックの仕様変更
この次の記事：この記事にトラックバックするのソース変更

5 Comment

サポート専用窓口でのアドバイスありがとうございました。
結局、単カテゴリーのみにすることに決めました。
そこで質問なのですが、非表示カテゴリーを作ったので上の記事のカテゴリーリストを使うことにしました。
HTMLの編集から赤字の部分を消したところまではできました。
（この時は普通のカテゴリも非表示のカテゴリもありました。）
次に非表示カテゴリーを作ったので ～  を消したら、プラグインの場所には、非表示カテゴリーとノンカテゴリーしか表示されませんでした。これは何故でしょうか？
単カテゴリーの場合は違う動作をしなければいけなかったのでしょうか？
ナビゲーションの所の非表示カテゴリーは無事に消えていたのですが…
よく分からないので何度もすみませんが教えてください。お願いします。

ももやん | 2011/03/01 (火)　[ 編集 ] No.952

ももやんさんへ

ブログがプライベートモードなので、確認はできませんが。。。

FC2 非表示カテゴリーの作り方
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-68.html
B.　単カテゴリー表示の場合　のような構造になっていますか？

単カテゴリーの場合は、 ～  を利用します。
逆を消しているようなので、管理画面の設定とソースを確認してみてください。

paruparu | 2011/03/02 (水)　[ 編集 ] No.953

こんにちわ。
カスタマイズについて質問させて下さい。

カテゴリ別ページの時にも「▽ List OPEN ▽」と「close」を表示させるにはどうすればいいのでしょうか？

をプラグインのHTMLから消してみたのですが、そうすると「カテゴリ別ページでは展開状態」の機能がなくなってしまいました。

「カテゴリ別ページでは展開状態」を維持したまま、カテゴリ別ページの時にも「▽ List OPEN ▽」と「close」を表示させる事は出来ないでしょうか？

よろしくお願いします。

名無しさん | 2013/10/14 (月)　 No.1706

カテゴリー別ページで展開状態＋List CLOSEを表示・機能させるには、
ソースを ↓以下のように変更すればOKです。

<script type="text/javascript">
// <![CDATA[
document.write('<div id="PlagOpen1" style="display:none"><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>

（中略）

<script type="text/javascript">
// <![CDATA[
document.write('</div>');
document.close();
// ]]>
</script>