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

モード変更

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

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

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

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

  • 普段は折りたたみ式, カテゴリー別ページでは 展開状態 
  • カテゴリー別ページ では 現在地 を目立つように表示 
    [ カテゴリーリストに 「現在地表示機能」 を ] ← これの発展形
  • スクリプト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-->

<!--category_parent-->
<li class="c_oya<%category_no>"><a href="<%category_link>" class="cat_oya<%category_no>" title="親カテゴリー: <%category_name> へ"><%category_name>&nbsp;[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-->
<!--category_nosub-->
<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-->

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

c_close.gif 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> 部分に 以下を記入

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

c_open.gif c_open.gif
<!--category_area-->
<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-->

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

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

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

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

2010/06/07 ~ | Comment (5) tweet? | ↑ ページ先頭へ ↑ |
 @arinogotoku
  • paruparu (arinogotoku) on Twitter
    ツイートが上手く表示されない時は Twilog or 公式Twitter などから見てください。

5 Comment


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

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


ももやんさんへ

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

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

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

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


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

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

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

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

よろしくお願いします。

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


カテゴリー別ページで 展開状態+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>

paruparu |  2013/10/14 (月) [ 編集 ] No.1707


無事、表示させることが出来ました。
ありがとうございました!

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

コメントを投稿する 記事: 現在地表示機能付き カテゴリーリスト の設置方法


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback