Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

親子カテゴリの展開と子カテゴリを孫カテゴリにするプラグイン

Categories

» デモページ

 親子カテゴリの展開と(新たにカテゴリを作成して)指定の子カテゴリを孫カテゴリにするプラグインです。


設定方法

変更場所 ▼ メニュー[環境設定][カテゴリの編集][カテゴリ一覧]

 子にするカテゴリを指定します。孫にするカテゴリも子にチェックを入れて、最下部にある[修正]ボタンをクリックします。

変更場所 ▼ プラグインの改造【HTMLの編集】-検索ワード「カテゴリ」

「/// 閉じておく親カテゴリ番号 ///」から「/// END ///」までのあいだが変更箇所です。

 カテゴリ番号は blog-category-no.html の「no」部分です。[環境設定][カテゴリの編集]カテゴリ一覧の左上にある「#」をクリックすることでも確認できます。このページを別タブに開いておくと楽です。

閉じておく親カテゴリ番号
var n = [親カテゴリ番号,親カテゴリ番号...]

 閲覧したときに最初から閉じておきたい親カテゴリの番号を入れます。複数指定するときはコンマで区切ります。番号は半角数字で入力します。最後の番号の後にはコンマをつけてはいけません。子カテゴリの番号は入力しないよう注意します。

(例)3番と7番、10番の親カテゴリを閉じる

var n = [3,7,10];

 カテゴリ番号の順番は適当で構いません。小さい順に並べたりする必要はありません。

var n = [10,3,7];

 すべての親カテゴリを閉じるときは次のようにします。

var n = ['all'];
親と子のあいだに入れる新しいカテゴリを作成
cat[no] = "(0)開く(1)閉じる=新規カテゴリの名前=子カテゴリ番号+子カテゴリ番号...";

 子に指定したカテゴリの番号を入れます。親カテゴリや親子でないカテゴリの番号は入力しないよう注意します。

 先頭の数値で作成カテゴリを最初から開いておくか閉じておくかを指定します。「0」を入れると開いた状態になり、「1」を入れると閉じた状態になります。

 「=」と「=」のあいだに新規カテゴリの名前を入れます。ないと思いますが、名前にダブルクォーテーションを使うときはアポストロフィ(シングル)を二つ並べて代用します。

 子カテゴリは最後のイコールの後に「+」で繋げていきます。

 「=」イコールの前後や「+」の前後に半角スペースなどを入れてはいけません。

cat[0] = "0 = テニス = 2 + 3"; // N G

(作成例)テニスカテゴリを作成、開いた状態、2と3番の子カテゴリ所属

cat[0] = "0=テニス=2+3";

 複数作成するときは行を追加します。[no]はカテゴリ行を増やすごとに 1 増やします。

cat[0] = "0=テニス=2+3";
cat[1] = "1=野球=11+5+7";     //閉、野球、11と5と7の子カテゴリ
cat[2] = "1=サッカー=17+13";  //閉、サッカー、17と13の子カテゴリ
cat[3] = "0=狩猟=19+29";      //開、狩猟、19と29の子カテゴリ

 カテゴリの設定がよくわからない場合はCategories... 親子孫カテゴリ作成例もご覧ください。


 2010年5月7日以前(//20100504ver)にダウンロードしたものは順番が異なります。最初にカテゴリの名前を指定し、次に開くか閉じるかを指定します。

cat[0] = "テニス=0=2+3";
cat[1] = "野球=1=11+5+7";     //野球、閉、11と5と7の子カテゴリ
cat[2] = "サッカー=1=17+13";  //サッカー、閉、17と13の子カテゴリ
cat[3] = "狩猟=0=19+29";      //狩猟、開、19と29の子カテゴリ
作成カテゴリの記事合計件数の表示
var entry = 0;  // 表示
var entry = 1;  // 非表示

 表示件数を囲むテキスト<テニス(37)の()など>は txt の "" のあいだに入れて指定します。コンマ前の " (" が件数の左側、 ")" が右側になります。

var entry = 0;
var txt = [" [","]"];
テニス [17]  // 表示結果

 囲むテキストが不要の場合は var txt = [" ",""]; などとします。

現在地の表示
var point = '';    // 表示
var point = 'n';   // 非表示

 表示すると、カテゴリページと個別ページにおいて、現在地を示すマークがつきます。また該当するカテゴリは親から展開されます(最初から閉じておくカテゴリに選択していても展開します)。非表示にすると展開はされません。

マーカー

文字色・文字サイズ・行間の変更

 ある程度はリセットしていますが、文字サイズなどは利用しているテンプレートによります。各スタイルやその優先順位を把握している場合は、不要なプロパティや「!important」を削除してください。

作成カテゴリの文字色

 リンクの文字と同じ色を指定するときは ul#grandCategory licolor を加えます。「0033ee」の部分に色を指定します。

ul#grandCategory li {
  margin: 0px 1px !important;
  padding: 3px 0 !important;
  line-height: 1.2;
  color: #0033ee;
}

 色が変わらないときは !important をつけます。

color: #0033ee !important;
リンクの文字色、下線をつける

 次のスタイルを加えます。「000000」の部分に色を指定します。下線なしの場合は text-decoration の行は不要です。

ul#grandCategory li a:link,ul#grandCategory li a:visited {
  color: #000000;
  text-decoration: underline !important;  /* 下線あり */
}
ul#grandCategory li a:hover {
  color: #dd0000;  /* カーソルが重なったときの文字色 */
  text-decoration: none !important;  /* 下線なし */
}

 色が変わらないときは !important をつけます。

color: #000000 !important;
文字サイズの変更

 style の ul#grandCategory lifont-size を加えます。

ul#grandCategory li {
  margin: 0px 1px !important;
  padding: 3px 0 !important;
  line-height: 1.2;
  font-size: 11px;
}

 変わらないときは !important をつけます。

font-size: 11px !important;

 「%」で指定する場合は次のコードを style に追加します。ul#grandCategory lifont-size は必要なければ削除します。

#grandCategory{
  font-size: 88%;
}
ul#grandCategory li {
  margin: 0px 1px !important;
  padding: 3px 0 !important;
  line-height: 1.2;
  font-size: 100%;
}
行間の変更

 テンプレートにあわせて各値を適当に変更してください。

ul#grandCategory li{
  margin: 0px 1px !important;
  padding: 3px 0 !important;
  line-height: 1.2;
}
ul#grandCategory ul{
  margin: 2px 0 1px 12px !important;
}
ul#grandCategory ul ul{
  margin: 1px 0 -2px -18px !important;
  overflow: hidden;
}
ul#grandCategory li li{
  padding: 4px 0 2px 29px !important;
  background: url(http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01li.gif) left center no-repeat;
  font-size: 100% !important;
}
ul#grandCategory li.SubNewCategory ul{
  padding-left: 30px !important;
}
ul#grandCategory ul li.SubNewCategory{
  padding: 4px 0 2px 0 !important;
  background: none;
}

特定のカテゴリを非表示にする

 非表示にしたいカテゴリの番号を入れたスタイルをプラグイン内のstyle要素内やテンプレートのスタイルシート欄に追加します。複数指定するときはコンマで区切ります。

li.caNoカテゴリ番号 {
  display: none !important;
}

(例)5番と6番のカテゴリを非表示にする

li.caNo5,li.caNo6 {
  display: none !important;
}

親カテゴリや子カテゴリの記事件数を消す

 変更するのは次の箇所です。すべて入替えます。

<a href="blog-category-<%category_no>.html"><%category_name> (<%category_count>)</a><!--category_nosub--></li>

親カテゴリのみ記事件数を非表示(子をもたないカテゴリと子カテゴリは表示)

<a href="blog-category-<%category_no>.html"><%category_name><!--category_nosub--> (<%category_count>)<!--/category_nosub--><!--category_sub_hasnext--> (<%category_count>)<!--/category_sub_hasnext--><!--category_sub_end--> (<%category_count>)<!--/category_sub_end--></a><!--category_nosub--></li>

子カテゴリのみ記事件数を表示(子をもたないカテゴリと親カテゴリは非表示)

<a href="blog-category-<%category_no>.html"><%category_name><!--category_sub_hasnext--> (<%category_count>)<!--/category_sub_hasnext--><!--category_sub_end--> (<%category_count>)<!--/category_sub_end--></a><!--category_nosub--></li>

子カテゴリのみ記事件数を非表示(子をもたないカテゴリと親カテゴリは表示)

<a href="blog-category-<%category_no>.html"><%category_name><!--category_parent--> (<%category_count>)<!--/category_parent--><!--category_nosub--> (<%category_count>)<!--/category_nosub--></a><!--category_nosub--></li>

記事件数を表示しない

<a href="blog-category-<%category_no>.html"><%category_name></a><!--category_nosub--></li>

 変更するのは次の2箇所です。すべて入替えます。リンクを失った親カテゴリの文字色は作成カテゴリの文字色で変更します。

変更箇所1

<a href="blog-category-<%category_no>.html"><%category_name>

変更後

<!--category_nosub--><a href="blog-category-<%category_no>.html"><!--/category_nosub--><!--category_sub_hasnext--><a href="blog-category-<%category_no>.html"><!--/category_sub_hasnext--><!--category_sub_end--><a href="blog-category-<%category_no>.html"><!--/category_sub_end--><%category_name>

変更箇所2

</a><!--category_nosub--></li>

変更後

<!--category_nosub--></a><!--/category_nosub--><!--category_sub_hasnext--></a><!--/category_sub_hasnext--><!--category_sub_end--></a><!--/category_sub_end--><!--category_nosub--></li>

カテゴリアイコン画像変更

 変更箇所は3箇所です。最初の方にimg要素が4つあります。3番目と4番目の画像アドレスの値を変更します。3箇所目はスタイル(<style type="text/css">内)で使われている画像アドレスです。

 黒背景の場合は右上の「+」「-」ボタンも b01 に変更します。その他の右上「+」「-」画像については画像変更をご覧ください。

デフォルト : 01 01 01

<!--category_nosub-->
img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01n.gif"
<!--category_parent-->
img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01open.gif"

ul#grandCategory li li{
background: url(http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01li.gif) left center no-repeat;

 上記赤字部分を変更します。どれか一行を選択します。

デフォルト 01 01 01 :
 /cat01n  /cat01open  /cat01li
デフォルト丸 m :
 /cat01mn  /cat01mopen  /cat01mli
背景灰 02 01 02 :
 /cat02n  /cat01open  /cat02li
背景灰丸 m :
 /cat02mn  /cat01mopen  /cat02mli
背景青 03 01 03 :
 /cat03n  /cat01open  /cat03li
背景青丸 m :
 /cat03mn  /cat01mopen  /cat03mli
背景緑 04 01 04 :
 /cat03n  /cat01open  /cat03li
背景緑丸 m     :
 /cat03mn  /cat01mopen  /cat03mli
青 31 31 31 :
 /cat31n  /cat31open  /cat31li
青丸 m :
 /cat31mn  /cat31mopen  /cat31mli
青青 33 31 33 :
 /cat33n  /cat31open  /cat33li
青青丸 m :
 /cat33mn  /cat31mopen  /cat33mli
青枠青 31i 31i 31i :
 /cat31in  /cat31iopen  /cat31ili
青枠青丸 im :
 /cat31imn  /cat31imopen  /cat31imli
青青枠青 33i 31i 33i :
 /cat33in  /cat31iopen  /cat33ili
青青枠青丸 im :
 /cat33imn  /cat31imopen  /cat33imli
青灰   : /cat32n  /cat31open  /cat32li
青灰丸 : /cat32mn  /cat31mopen  /cat32mli
青灰枠青   : /cat32in  /cat31iopen  /cat32ili
青灰枠青丸 : /cat32imn  /cat31imopen  /cat32imli
青緑   : /cat34n  /cat31open  /cat34li
青緑丸 : /cat34mn  /cat31mopen  /cat34mli
青緑枠青   : /cat34in  /cat31iopen  /cat34ili
青緑枠青丸 : /cat34imn  /cat31imopen  /cat34imli
緑 41 41 41 :
 /cat41n  /cat41open  /cat41li
緑丸 m :
 /cat41mn  /cat41mopen  /cat41mli
緑緑 43 41 43 :
 /cat43n  /cat41open  /cat43li
緑緑丸 m :
 /cat43mn  /cat41mopen  /cat43mli
緑枠緑 41i 41i 41i :
 /cat41in  /cat41iopen  /cat41ili
緑枠緑丸 im :
 /cat41imn  /cat41imopen  /cat41imli
緑緑枠緑 43i 41i 43i :
 /cat43in  /cat41iopen  /cat43ili
緑緑枠緑丸 im :
 /cat43imn  /cat41imopen  /cat43imli
緑灰   : /cat42n  /cat41open  /cat42li
緑灰丸 : /cat42mn  /cat41mopen  /cat42mli
緑灰枠緑   : /cat42in  /cat41iopen  /cat42ili
緑灰枠緑丸 : /cat42imn  /cat41imopen  /cat42imli
緑青   : /cat43n  /cat41open  /cat43li
緑青丸 : /cat43mn  /cat41mopen  /cat43mli
緑青枠緑   : /cat43in  /cat41iopen  /cat43ili
緑青枠緑丸 : /cat43imn  /cat41imopen  /cat43imli
線黒 51 51 51 :
 /cat51n  /cat51open  /cat51li
線黒丸 m :
 /cat51mn  /cat51mopen  /cat51mli
線黒灰 52 51 52 :
 /cat52n  /cat51open  /cat52li
線黒灰丸 m :
 /cat52mn  /cat51mopen  /cat52mli
線黒青 53 51 53 :
 /cat53n  /cat51open  /cat53li
線黒青丸 m :
 /cat53mn  /cat51mopen  /cat53mli
線黒緑 54 51 54 :
 /cat54n  /cat51open  /cat54li
線黒緑丸 im :
 /cat54mn  /cat51mopen  /cat54mli
線灰 61 61 61 :
 /cat61n  /cat61open  /cat61li
線灰丸 m :
 /cat61mn  /cat61mopen  /cat61mli
線灰灰 62 61 62 :
 /cat62n  /cat61open  /cat62li
線灰灰丸 m :
 /cat62mn  /cat61mopen  /cat62mli
線灰青 63 61 63 :
 /cat63n  /cat61open  /cat63li
線灰青丸 m :
 /cat63mn  /cat61mopen  /cat63mli
線灰緑 64 61 64 :
 /cat64n  /cat61open  /cat64li
線灰緑丸 im :
 /cat64mn  /cat61mopen  /cat64mli
線灰 b01 b01 b01 :
 /catb01n  /catb01open  /catb01li
線灰丸 m :
 /catb01mn  /catb01mopen  /catb01mli
線白 b02 b02 b02 :
 /catb02n  /catb02open  /catb02li
線白丸 m :
 /catb02mn  /catb02mopen  /catb02mli
背景赤 b03 b03 b03 :
 /catb03n  /catb03open  /catb03li
背景赤丸 m :
 /catb03mn  /catb03mopen  /catb03mli
背景青 b04 b04 b04 :
 /catb04n  /catb04open  /catb04li
背景青丸 m     :
 /catb04mn  /catb04mopen  /catb04mli
線白黒 b61 b61 b61 :
 /catb61n  /catb61open  /catb61li
線白黒丸 m :
 /catb61mn  /catb61mopen  /catb61mli
線白赤 b62 b62 b62 :
 /catb62n  /catb62open  /catb62li
線白赤丸 m :
 /catb62mn  /catb62mopen  /catb62mli
背景青 b63 b63 b63 :
 /catb63n  /catb63open  /catb63li
線白青丸 m :
 /catb63mn  /catb63mopen  /catb63mli

右上の「+」「-」ボタン、画像変更

 「+」をクリックするとすべてのカテゴリが展開され、「-」をクリックするとすべてのカテゴリが閉じます。

画像変更

 コードの最初にある2つの画像アドレス、widthなどを変更します。

デフォルト : cat01 / width="9"

<p id="acSwitch"><img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01allopen.gif" width="9" height="9" alt="open" /><img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01allclose.gif" width="9" height="9" alt="close" /></p>

横長 : cat02 / width="13"

<p id="acSwitch"><img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat02allopen.gif" width="13" height="9" alt="open" /><img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat02allclose.gif" width="13" height="9" alt="close" /></p>

黒線 : cat03 / width="9" | 横長 : cat04 / width="13"

青線 : cat05 / width="9" | 横長 : cat06 / width="13"

緑線 : cat07 / width="9" | 横長 : cat08 / width="13"

黒背景 : catb01 / width="9" | 横長 : catb02 / width="13"

赤背景 : catb11 / width="9" | 横長 : catb12 / width="13"


 このボタンを最下部に移動させるときは、HTMLの最初にある次のコードを </ul> の後に移動させます。

<p id="acSwitch"><img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01allopen.gif" width="9" height="9" alt="open" /><img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01allclose.gif" width="9" height="9" alt="close" /></p>

<!--/category_sub_end--><!--/category-->
</ul>
<p id="acSwitch"><img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01allopen.gif" width="9" height="9" alt="open" /><img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01allclose.gif" width="9" height="9" alt="close" /></p>
<script type="text/javascript">

 このボタンを非表示にするときは、次のコードを追加します。

<p id="acSwitch" style="display: none;">
<img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01allopen.gif" width="9" height="9" alt="open" />
<img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01allclose.gif" width="9" height="9" alt="close" />
</p>

展開する画像にカーソルをあわせたときに「開閉する」などのテキストを表示

 category_parent 内のimg要素にtitle属性を追加し、「開閉する」「展開する」などのテキストを入れます。

<!--category_parent-->
<img src="~open.gif" title="開閉"

開閉

デザインスタイルをテンプレートに入れる

 プラグインの真ん中あたりに <style type="text/css"> ~ </style> というコードがあります。これを利用しているテンプレートのスタイルシート編集欄に入れます。

 /* Categories... */ から /* Categories END */ までのスタイルをスタイルシート欄に移動させます。

 プラグイン内の <style type="text/css"> </style> 部分を削除します。

スクリプトを外部ファイルに入れる

 プラグイン下部に <script type="text/javascript">// Author ~ </script> というコードがあります。これを外部ファイルに入れる方法です。

 まず一番下から二行目にある次の一行を移動させます。

if(typeof categoriesPdy!='undefined')categoriesPdySetup();

 移動先は設定箇所 END 最下部の }; </script> のあいだです。

////////// END //////////
     categoriesPdy.main(n,cat,entry,txt,point);
};
if(typeof categoriesPdy!='undefined')categoriesPdySetup();
</script>

 次に残りのコードを保存するためのjsファイルを作成します。テキストエディタを開いて、 <script type="text/javascript"> ~ </script> の中にあるコードをコピー、貼り付けます。

// Author Paroday(c) http://paro2day.blog122.fc2.com/blog-entry-551.html
...
略
...
 }
}

 そして保存します。保存するときは拡張子を「.js」にします(「grandCategory.js」など)。保存が終わったらファイルをアップロードします。

 アップロードが完了したら、ファイルのアドレスを次のコードの中に入れます。

<script type="text/javascript" src="ファイルのアドレス"></script>

 出来上がったコードをテンプレートのHTML編集で head要素 の中に入れます。

<head>
...
<script type="text/javascript" src="ファイルのアドレス"></script>
</head>
<body>

 テンプレートにすでに外部jsファイルが使われている場合は、そのjsファイルを編集して、最下部に // Author Paroday ~ のコードを貼り付けて、上書きアップロードします。

画像を別サーバにアップする

 プラグインで使用されている画像は8個あります。これらを保存してアップロードします。

http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01allopen.gif
http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01allclose.gif
http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01n.gif
http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01np.gif
http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01li.gif
http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01open.gif
http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01openp.gif
http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01close.gif

 ただし、次の2組4つの画像についてはアップロード先の画像アドレスの大半(ファイル名末尾の「p」以外)が同じでなければなりません。

共通部分 http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01n gif
http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01n.gif
http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01np.gif

共通部分 http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01open
http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01open.gif
http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01openp.gif

 例えば、画像サーバが異なると正しく表示されません。

http://blog-imgs-37.fc2.com/p/a/r/paro2day/cat01n.gif
http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01np.gif

 FC2ブログにアップロードする場合は、この4つの画像を一度にアップロードすれば、サーバ番号が変わることは少ないものと思われます。

 画像のアップロード後に、プラグインのHTML編集にて次の画像アドレスをアップロードしたものに変更します。変更箇所は5つです。残り3つの画像は指定する必要はありません。

src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01allopen.gif"
src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01allclose.gif"

src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01n.gif"
src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01open.gif"

url(http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01li.gif)

 最初の4つはコードの始めの方にあります。最後の画像はスタイル(<style type="text/css">内)で使われています。

その他注意事項

 横幅の広い箇所(700px以上)に設置する場合は次のスタイルを追加します。

#grandCategory {
  width: 700px;
}

ご利用にあたって

動作確認(Win) : IE6-8、Firefox2-3、Opera10、chrome4、Safari4

 質問や不具合・要望などはコメントにお願いします。動作や表示がおかしいときは、利用しているテンプレートやブログアドレスなどの情報があると解決するかもしれません。

  • 【利用規約】
  • 改造、使用画像の別サーバへのアップロードはOKです(著作権などは放棄しておりません)。
  • noscript要素(作者リンク)は別の場所に移動させたり、削除することができます。
  • ただし、スクリプトコード内の作者表記「Author Paroday(c)~」は削除しないでください。外部ファイルにコードを移す場合も同様です。
  • 再配布は原則禁止です。カスタマイズ後も含みます。

申請できるのはオリジナルのものに限られます。他所で配布されていたり、掲載されているコードを利用することは認められません。

自作を共有プラグインに登録する


  • 【更新履歴】
  • 2010 05-26 - Categories...B 公開。諸事情により記事を分けました。Categories...B説明ページ展開する画像にカーソルをあわせたときに「開閉する」などのテキストを表示を追加。
  • 2010 05-17 - 親カテゴリや子カテゴリの記事件数を消すに「子カテゴリのみ記事件数を非表示」を追加。
  • 2010 05-10 - カテゴリアイコン画像(角丸・青・緑・線)、右上「+」「-」ボタン画像(黒線・青・緑)を追加。サーバ番号が変わらないうちにまとめて。抜けは菠薐草。非効率、画像変更向けver作成する予。
  • 2010 05-07 - 画像を別サーバにアップするを追記。設定「親と子のあいだに入れる新しいカテゴリを作成」の順番を「(0)開く(1)閉じる=新規カテゴリの名前=子カテゴリ番号+...」に変更。それに伴い共有プラグインから一端外れます。既にダウンロードしているものについては、以前のままの順番で使用できます。
    順番を変更したい場合はスクリプトの下記コードを変更します。真ん中より少し上くらいにあります。0と1を逆転させます。変更点はこれだけです。
    cat[i].split('=')[0],cat[i].split('=')[1]
    cat[i].split('=')[1],cat[i].split('=')[0]
    本当に承認待ちになるんだ。
  • 2010 05-06 - 公開。テンプレートを作ろうとしたのだけれど、できたのはプラグインだった。世界の悪意が見えるようだよ、上海。
関連記事
  1. comment
  2. paruparu 2010-05-23 10:37 No.447 #-URLhttp://arinogotokuatumarite.blog19.fc2.com/

    はじめまして。 こちらのサイトはよく参考にさせて頂いています。
    著作権に関する件で教えて頂きたいのですが、このプラグインで使用している オレンジ色のフォルダ画像、これ色味がとても綺麗でいいなぁと思っているのですが...これを画像(の一部、フォルダ部分)だけ リスト用の画像 として使わせていただくことは可能でしょうか?

    カテゴリーのリスト、今の状態は少し地味なので 以前からリスト用の画像を色々と探してはいるものの...何となくイメージ通りにはならず、見送っています。 こちらの画像だとイメージ通りになりそうで (裏でテストだけさせてもらいましたが) もし可能なら と質問させていただきました。

  3. Pdy 2010-05-24 02:13 No.448 #-URL

    はじめまして。
    配布画像の利用、一部加工はOKです。
    当サイトの配布物については、(特に明記のないかぎり)基本的に再配布以外の利用目的であれば、ご自由にご利用くださいという方針です。
    あとは、配布元がParodayであることを変えないということです。
    アイコンくらいの小さな画像、小規模の利用であれば、ご利用に際して、配布元の表記などはあってもなくても構いません。

  4. paruparu 2010-05-24 12:07 No.449 #-URL

    ありがとうございます! 早速適応させていただきました。
    こちらのプラグインより地味な状態ですが、CSSで (カテゴリページ表示の時のみ) 現在地はOPENのフォルダ画像 になるようにしてみました。
    次の記事でリンクを張らせていただこうと思っていますので 宜しくお願いいたします。

  5. ゾディ 2010-06-22 06:08 No.471 #-URL

    ありがとうございます!使わせてもらったのですが、孫の仕方とかがいまいちわからないです;;

    初めてブログ作ってるのですが、全くわからない状態で・・・ 

    よかったら教えていただきたいです

  6. Pdy 2010-06-24 00:54 No.473 #-URLhttp://paro2day.blog122.fc2.com/blog-entry-577.html

    こんばんは。
    [URL]の記事
    http://paro2day.blog122.fc2.com/blog-entry-577.html
    をご覧ください。
    FC2ブログの公式マニュアルも参考になると思います。

  7. 只野乙山 2010-10-26 20:38 No.543 #-URLhttp://flaneur777.blog35.fc2.com/

    こんばんは、はじめまして。
    カテゴリーのツリー化を考え、ダウンロードさせていただきました。
    誤って削除してしまい、申し訳ありません。
    もう一度がんばってみたいと思います。

  8. Pdy 2010-10-27 00:07 No.544 #-URL

    こんにちは。
    お気になさらず削除またはダウンロードください。
    コメントなどの報告がないかぎり、ダウンロード・削除されてもこちらにはわからないです。
    何かございましたら、お気軽にどうぞです。

  9. tomo 2010-10-27 11:42 No.545 #-URLhttp://oharikoharinezumi.blog111.fc2.com/

    はじめまして、カテゴリーがコンパクトになり、シンプルな点が気に入り、ダウンロードさせていただきました。

    ところで、画像は必ずダウンロードして自分のブログにアップロードしなければいけないでしょうか?
    今の状態でも表示上は問題ないのですが。

  10. Pdy 2010-10-28 00:00 No.546 #-URL

    はじめましてっ
    共有登録関連のファイルを削除する予定はないので、画像はそのままでもOKです。
    今後、利用規約などで禁止する予定もないです。
    使用されているFC2画像サーバーの調子が悪いときや、このブログがなくなった場合を考慮する場合はjsファイルも含めて別サーバにアップロードの方がいいかもしれません。

  11. tomo 2010-11-02 22:18 No.547 #-URL

    ありがとうございました。
    確かに、画像を自分のファイルに入れたほうが安心度は高いかもですね。

    時間を見つけてやってみます。
    また、その際、ご質問するかも知れませんがよろしくお願いいたします。

  12. @碧琉@ 2011-06-12 09:11 No.626 #-URLhttp://hekirudbarb3.blog9.fc2.com/

    お忙しいところ申し訳ありません。
    孫カテゴリで長いタイトルの場合、2段になって表示されるのは良いのですが、1段目と2段目の先頭が揃いません。2段目が孫フォルダアイコンに被る感じで表示されてしまいます。
    テンプレの関係でプラグインの幅は210以上に出来ない仕様になっています。
    この状態で1段目と2段目を揃える方法は無いでしょうか?
    ご教示よろしくお願い致します(゚0゚)(。_。)ペコッ

  13. @碧琉@ 2011-06-12 09:39 No.627 #-URLhttp://hekirudbarb3.blog9.fc2.com/

    申し訳ありません。。。
    自己解決しました…合っているのかは分かりませんが^^;;;
    お騒がせしました(。_。)ペコッ

  14. Pdy@Categories 2011-06-13 00:17 No.628 #HctKA.XIURL

    一応ご参考程度に孫アイコンの□を隠して、子と揃える方法です。
    ********************
    ul#grandCategory ul ul {
    margin: 1px 0 -2px -18px !important;
    overflow: hidden;
    }
    ul#grandCategory li li {
    padding: 4px 0 2px 29px !important;
    background: url(http://blog-imgs-44.fc2.com/p/a/r/paro2day/catb61li.gif) left center no-repeat;
    font-size: 100% !important;
    overflow: hidden;
    }
    ul#grandCategory li.SubNewCategory ul {
    padding-left: 15px !important;
    }
    ********************
    上記部分を丸ごと下記に変更。
    ********************
    ul#grandCategory ul ul {
    margin: 1px 0 -2px -21px !important;
    overflow: hidden;
    }
    ul#grandCategory li li {
    padding: 4px 0 2px 29px !important;
    background: url(http://blog-imgs-44.fc2.com/p/a/r/paro2day/catb61li.gif) left center no-repeat;
    font-size: 100% !important;
    }
    ul#grandCategory li li li {
    padding: 4px 0 2px 19px !important;
    background: url(http://blog-imgs-44.fc2.com/p/a/r/paro2day/catb61li.gif) -10px center no-repeat;
    }
    ul#grandCategory li.SubNewCategory ul {
    padding-left: 30px !important;
    }
    ********************
    さらに -21px を -31px に、 19px を 29px に、 -10px を left にすると□ありで揃えます。

  15. @碧琉@ 2011-06-15 10:19 No.635 #-URLhttp://hekirudbarb3.blog9.fc2.com/

    テンプレの仕様なのか上手く設定できませんでした^^;
    が、とても参考になりました^^
    お忙しい中、丁寧に回答して頂いて有難う御座いました(。_。)ペコッ

  16. おさ 2011-07-17 23:53 No.646 #-URL

    親カテゴリの記事件数を消した上で、親カテゴリのリンクを消すことは可能でしょうか?
    もしよろしければお答え頂けると助かります。

  17. Pdy 2011-07-19 01:13 No.647 #-URL

    こんにちは。
    このページに掲載している「親カテゴリや子カテゴリの記事件数を消す」の変更と「親カテゴリのリンクを消す」の変更をあわせて行うと、親カテゴリのリンクと記事件数がなしになります。
    ■変更箇所
    ********************
    <a href="blog-category-<%category_no>.html"><%category_name> (<%category_count>)</a><!--category_nosub--></li>
    ********************
    ■変更後
    ********************
    <!--category_nosub--><a href="blog-category-<%category_no>.html"><!--/category_nosub--><!--category_sub_hasnext--><a href="blog-category-<%category_no>.html"><!--/category_sub_hasnext--><!--category_sub_end--><a href="blog-category-<%category_no>.html"><!--/category_sub_end--><%category_name><!--category_nosub--> (<%category_count>)</a><!--/category_nosub--><!--category_sub_hasnext--> (<%category_count>)</a><!--/category_sub_hasnext--><!--category_sub_end--> (<%category_count>)</a><!--/category_sub_end--><!--category_nosub--></li>
    ********************

  18. おさ 2011-07-20 13:53 No.649 #-URL

    >Pdy様

    迅速な対応ありがとうございました。
    無事親カテゴリのリンクと記事件数を消すことができました。

  19. 丸々 2012-01-18 23:43 No.896 #-URLhttp://marumaru7290.blog.fc2.com/

    こんばんは。プラグインの開発お疲れ様です。
    また、大変便利なプラグイン使わせていただいております。

    Twitter表示プラグインの時質問させていただいた者です。
    当時お世話になり、ありがとうございました。


    設定に関して3点質問がありまして書き込みさせていただきました。

    ・作成カテゴリの記事合計件数の表示におきまして、
     以下のように設定したのですが設定がなぜか
     反映されないのですが、何が間違っていると考えられますでしょうか?

    var entry = 0;
    var txt = [" [","]"];

    ・カテゴリ文字と開閉ボタンのみを表示したく、
     フォルダ画像を非表示にすることは可能でしょうか?

    ・カテゴリの文字のサイズは変更せずに、
     開閉ボタンのサイズを大きく表示することは可能でしょうか?


    質問多くなってしまいすみません。
    宜しくお願いしますm(_ _)m

  20. Pdy 2012-01-20 23:55 No.898 #-URLhttp://blog-imgs-15.fc2.com/p/a/r/paro2day/note20120120.html

    作成から1年半くらい経つと作ったものを忘れてしまいそうです。
    こんにちは。

    // 作成カテゴリの記事合計件数の表示
    var txt = [" [","]"];
    上記は新しいカテゴリの合計数のため
    新しいカテゴリを作成していない場合は反映されません。

    // 新しいカテゴリを作成
    cat[0] = "0=SUB=6+5";
    というように新しいカテゴリを作成すると + SUB [9] になります。

    通常の子カテゴリの合計数 () を変更するときはときは
    <style type="text/css">の前にある
    (<%category_count>) を [<%category_count>] にすると変わります。

    開閉ボタンは画像を変更する必要があるため
    別プラグインの「Categories...B」を推奨します。
    http://paro2day.blog122.fc2.com/blog-entry-559.html

    とりあえず、「Categories...B」の画像を変更したものを置いておきます。
    [URL]
    http://blog-imgs-15.fc2.com/p/a/r/paro2day/note20120120.html
    リンク先のコードをコピーして
    「Categories...」(プラグインHTML)の中身と入れ替えれば
    左のサンプルのようになると思います。
    念のため、元の「Categories...」の中身は
    メモ帳か何かにコピーしておいた方がいいかもしれません。

  21. 丸々 2012-01-22 05:37 No.903 #-URLhttp://marumaru7290.blog.fc2.com/

    おはようございます。
    作製してから日数経つと忘れてしまいそうになりますよねw

    通常の子カテゴリの合計数 () を[]に無事変更できました。

    リンク先のコードをコピーして「Categories...」(プラグインHTML)の中身と
    入れ替えてみたところ、サンプルのように表示はされたのですが、
    「Categories...」プラグインの下に表示していたプラグインが表示崩れを
    起こしてしまうようになりました。

    サイド全体が落ちた際は表示横幅サイズのせいだと分かるのですが、
    このような場合はどのようなことが考えられそうでしょうか?

  22. Pdy 2012-01-22 12:33 No.904 #-URL

    こんにちは。
    サンプルのがそのまま残ってたみたいで余計なタグが一つ入ってました。
    すいません。
    これで崩れないと思います。

    </ul>
    </div>
    <script type="text/javascript">

    の「</div>」は削除。
    正しくは以下です。

    </ul>

    <script type="text/javascript">

  23. 丸々 2012-01-22 20:51 No.906 #-URLhttp://marumaru7290.blog.fc2.com/

    こんばんは。

    タグの方先程削除したところ、無事表示崩れが直りました。

    お忙しい中親切丁寧に教えていただきありがとうございました。

    今後も末永く大切に使わせていただきたいと思いますm(_ _)m

  24. たろう 2012-01-28 20:42 No.925 #-URL

    こんばんわ

    cat[0]="1=A=31+33";
    cat[1]="1=B=35+36+37";
    cat[2]="1=C=39+41+49";
    cat[3]="1=D=46+50";

    上記のようにしたところ、Dが出現せず46と50がCの中に入ってしまいました
    どこかまずいでしょうか?

  25. Pdy 2012-01-29 01:00 No.928 #-URL

    こんにちは。
    ブログのカテゴリ状況を見てみないと確かなことは言えませんが
    カテゴリの順番が作成カテゴリをまたいでいる可能性があります。
    区分けした作成カテゴリのグループが連続して並ぶように
    「カテゴリの編集」で順番の入れ替えをしてみてください。

    例えば、次のようなカテゴリを作成する場合に
    cat[0]="1=A=1+2";
    cat[1]="1=B=3+4";

     A
      子1
      子2
     B
      子3
      子4
    元のカテゴリの並びが

    子1(A)
    子4(B)
    子2(A)
    子3(B)
    だと作成カテゴリAとBが入り混じった状態になります。
    親カテゴリの直後に子が連続するのと同様に、作成カテゴリも連続して並べる必要があります。
    ○親→子1→子2→子3→子4
    ※管理サーバの状態によってはカテゴリ変更の反映に時間がかかる場合もあるかもしれません。

    もしかするとCategories...Bなら問題ないかもしれません。
    ・『Categories...B』の画像を『Categories...』に変更する
    (近いうちに即修正できるように外部js版に更新してみます)

  26. ブー子 2012-09-29 09:49 No.1473 #-URL

    はじめまして。
    非常に便利で 見た目もすらばしいプラグインを作ってくださり、どうもありがとうございます。
    とっても気に入ったので、お願いがあるのですが…。

    もしよろしければ、全記事一覧のページ用に、同じような雰囲気のもの(カテゴリ別全記事一覧)を作っていただけませんか?
    カテゴリの下に、そのカテゴリの記事のタイトル一覧が来るものが欲しいのです。
    もちろん、折りたためる機能はそのままで。アイコンもかわいらしいので、流用していただきたいです。
    イメージ的に、以下のブログさんで紹介されているようなものが欲しいです。
    http://hatenachips.blog34.fc2.com/blog-entry-81.html

    お忙しいこととは思いますが、どうぞ、ご検討下さい。

コメント

Icon ※必須 :
Pass  ※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

http://paro2day.blog122.fc2.com/tb.php/551-e055f648

  1. trackback
  2. 親子カテゴリの展開と子カテゴリを孫カテゴリにするプラグイン - aiuia

    ツリーカテゴリープラグインのご紹介。 以前使っていたツリーカテゴリーからcategories・・・に替えた理由は ・開閉のアイコンがPCのファイル... 2010.05.06