「私のカテゴリーリストはどのように...？」 と質問があったのでまとめてみました。
下図 右側 が 私のカテゴリーリストです。 地味ではありますが、
- 普段は折りたたみ式， カテゴリー別ページでは 展開状態
- カテゴリー別ページ では 現在地 を目立つように表示
[ カテゴリーリストに 「現在地表示機能」 を ] ← これの発展形 - スクリプト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> [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-->
これをアレンジして document.write の形にしてあります。 このようにしておけば スクリプトOFF でも問題なく表示できるので、色々な用途に使えます。
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> 部分に 以下を記入
カテゴリー別のページ（<!--category_area-->） でだけ 反映されるスタイル を設定します。 変数 を利用していますので、テンプレートの <head> 部分に入れてください。
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-->
適当にアレンジして使ってみてください。 変数 って本当に便利！
固定リンク （個別記事ページ，<!--permanent_area-->） でも 追記 に入れた内容を 【続きを読む】 として折りたたみたい！ カスタマイズの方法は．．．？
という質問を受け、最初は 「個別記事ページでまで 追記 が折りたたまれてたら面倒だよなぁ～」 と思ってしまった私ですが、ある方のサイトで 「追記にはネタバレの内容を含みます」 という一文を見て、こういうサイトでは 「読みたい人だけが自分の意思で 追記 を開く」 という形式もありかなと感じました。
元々、カテゴリー別ページ， 月別ページ， 検索結果ページ， タグ検索結果ページ では、FC2ブログのテンプレート工房（いたおさん） のスクリプトを使わせていただき、追記の折りたたみ機能 （スクリプトON の場合は その場に展開， スクリプトOFF の場合は 固定リンクへ移動） を付けてあるので、それと同じ見た目で スクリプトOFF でも記事が閲覧できる方法を考えてみました。
設置した場合の動きのイメージです。 追記に入れた内容が 個別記事ページ でも折りたたみ状態で表示され、クリックで 展開 ⇔ 閉じる を切り替えます。 スクリプトOFF の場合には、内容だけがそのまま表示されます。
最初は、今使っているスクリプトを利用して．．．と考えましたが、スクリプトOFFのことも考えた スッキリした方法が見つけられなかったので、同じ作者さんの 「プラグインの折りたたみ」 をアレンジしたものを使ってみたら、上手く出来ました！
スクリプト OFF の場合には 内容だけがそのまま表示されます。
<!--permanent_area--> で 追記部分を折りたたむ方法
1. 折りたたみスクリプト（本体） を 1つ設置する
テンプレート内（<head>～</head> 部分など） に 以下のスクリプトを記入。
<script type="text/javascript">
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>
※プラグインや記事内など、他で「折りたたみ」を使う場合にも共有できます。
※設置場所は <head> 以外でもOK。 外部スクリプト化も可能です。
2. テンプレートの <!--more--> ～ <!--/more--> 部分を変更
（ <!--more--><%topentry_more><!--/more--> という部分です ）
※変更前 共有テンプレートでの構造概略
<!-- ▼記事部分▼ -->
（中略）
<!--more-->
<br /><%topentry_more>
<!--/more-->
（中略）
<!-- ▲記事部分▲ -->
この <!--more--> ～ <!--/more--> 部分を 以下のソースに変更します。
追記 ： 2012/05/23 改訂版
<!--more-->
<!--permanent_area-->
<script type="text/javascript">
// <![CDATA[
document.write('<div id="PlagOpen200"
class="readmore"><a href="#" onclick="showPlagin(200); return false;" title="記事の続きを展開します">【 ↓ 続きを表示する ↓ 】</a></div>');
document.write('
<div id="PlagClose200" style="display:none">');
document.write('<div
class="readclose"><a href="#" onclick="showPlagin(200); return false;" title="続きを閉じる">【 続きを閉じる 】</a></div>');
// ]]>
</script>
<!--/permanent_area-->
<br />
<%topentry_more>
<!--permanent_area-->
<script type="text/javascript">
// <![CDATA[
document.write('
</div>');
// ]]>
</script>
<!--/permanent_area-->
<!--/more-->
このようにすれば、見た目も 同じものが使えると思います。
ちなみに、今回はスクリプトの書き方として CDATAセクション を使いましたが、FC2ブログでは 追記部分より前にCDATA を使ってしまうと RSS配信エラー になります。
- RSSの設定 「一部表示」の場合、冒頭文に CDATA が入っているとダメ
- RSSの設定 「全文表示」の場合、追記より前に CDATA が入っているとダメ
また、携帯テンプレートで表示した場合、記事中に CDATAセクション を含んでいると、それ以降の文章が上手く表示できなくなってしまうようです。 なので、記事内で 単発的にこの折りたたみスクリプトを使う場合には、以下のように書いてください。
<script type="text/javascript">
<!--
document.write('<div id="PlagOpen
123"><a href="#" onclick="showPlagin(
123); return false;" title="OPEN">▽ 詳しく知りたい方はここを開いてね ▽</a></div>');
document.write('<div id="PlagClose
123" style="display:none">');
document.write('<a href="#" onclick="showPlagin(
123); return false;" title="CLOSE">詳細を閉じる</a><br />');
//--></script>
ここに折りたたみたい内容を直接記入します。タグなどが入ってもOKです！
<script type="text/javascript">
<!--
document.write('</div>');
//--></script>
4箇所の 赤文字部分の数字 を 他の折りたたみと重ならない適当な数字（例えば、記事No.など） に変えて使ってください。 数字以外を入れると機能しません。 追記の折りたたみで 200 を仮に使っているので、200 は外して使ってください。
※この記事で紹介した各ソースは、私が実際に使っているソースとは一部異なります。 混在させると機能しませんので、ここに載せたソースを参照してください。
追記 （2012/04/05） ：
document.write の中に ¥ を入れてあると、utf-8 ではエラーになってしまうようです。 FC2ブログの文字コードは utf-8 に統一作業中です。 現在 euc-jp サーバーでエラーのない場合でも、utf-8 に変った時に レイアウトが乱れる 可能性があります。 旧コードを利用の方は ¥ を除いたものに修正してご利用ください。
ちなみに、以前 スマホ用 に変換されるページで、コメントタグ部分が <!-- --> や <!-- --> のように誤変換されてしまっている不具合を見つけたのですが、これも スマホ用テンプレが utf-8 であることと関連していたようです。
ブログを続けていると、どんどん増えてくるもの。 繰り返しの 「変数」 を使って表示している 月別アーカイブのリスト や ユーザータグリスト，リンクリスト など。
それらを、コンパクトに表示する方法 は探せばいくつもあるようですが．．． 今回は、私のテンプレートの 上部ナビゲーション部分 でも使える方法として、4つの方法 を紹介します。 ソースは FC2ブログ共有テンプレートari_seoシリーズ用 をベースにしていますが、3つの方法は、それ以外の場合にも使えるものです。
まずは、実際に サンプルページ をご覧ください。 （ソースも載せてます）
1. スクロールバーを使った アーカイブリスト
「設定した縦幅を超えたら、スクロールバーを表示する」 という単純なもので、スタイルをちょこっと追加しただけの単純なものです。 当然スクリプトも使用していないので、もっともシンプルで手軽に設定できます。
2. 手書き展開型 アーカイブリスト
これもスクリプト未使用です。 というか直接ソースを書いただけのもの。 全て自動で処理したい方には少し面倒に感じるかも知れませんが、月別アーカイブなら 月に1度書き直すだけでOKなんです。 2009年 » 2008年 » となっている部分もリンクになっています。 また、手書きなので、時系列 は新しい順，古い順 どちらでも設定できます。
3. 自動折りたたみ アーカイブリスト
Harukiya Archives （解説ページ →
外部スクリプト：リスト要素の省略表示と展開）
↑ 残念ながら、サイトは閉鎖状態のようですが．．． （閲覧は可能）
これ！ちょっと凄くないですか！！ 単純なリスト形式のものなら、個々に設定した件数分だけ 初めに表示できます。 ベースになる javascript もシンプルなもので、1つで共有できます。 また、スクリプトOFFの場合には 通常の表示になる親切設計です。
リスト形式なら 何でも折りたためる ので、月別アーカイブ だけでなく ユーザータグリスト，リンクリスト，最近のコメント一覧， 新着記事一覧， カテゴリーリスト などにも適応できます。 長くなりすぎて困る場合だけでなく、敢えて表示件数を増やして、最初はそれの一部を表示するなんてことまで出来るので面白いかも。。。
4. 手書き折りたたみ アーカイブリスト
これもかなりコンパクト！ FC2ブログ の共有プラグインとしても登録されている
「プラグインの折りたたみ」 FC2ブログのテンプレート工房 （作者: いたおさん） を使わせていただき、ナビゲーションメニュー用にアレンジ、スクリプトOFF環境 などにも対応させたもの です。 これもベースになる javascript は1つでOKで、サンプルページの ↓ ソースを表示 ↓ 部分 や このテンプレートの右サイドバー にある List OPEN » 部分はこのスクリプトを使っています。 かなり使えて便利です！
IDの重複 はNGですが、それさえ気をつければ記事中にでも使えます！ また、スクリプトOFFの場合は （何事も無かったかのように） 通常の表示になります。
プラグイン紹介 : コンパクトアーカイブ関連
ごく一部ですが、使いやすそうな FC2ブログの共有プラグイン を紹介します。 プラグイン名をクリックすると、このページのサイドバー（右上） に一時的に表示できます。
ちなみに... このサイトのトップページで使っているものは ただの手書きです。
[ 関連記事 ：
カレンダー代用 ナビ付月別アーカイブ ]
[ 関連記事 ：
カテゴリーリストに 「現在地表示機能」 を ]
申し訳ありません。 お探しの記事は現在、この ユーザータグ （Keyword） を設定していない可能性があります。 右上の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。
c_close.gif
c_open.gif
