Paroday

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

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

親子孫カテゴリプラグイン「Categories...B」

Categories

 親子カテゴリの展開と(新たにカテゴリを作成して)指定の子カテゴリを孫カテゴリにするプラグイン『Categories...』の画像変更向けタイプです。あらかじめ用意された画像ではなく、指定した画像を利用することができます。共通部分(cat[no]など)については共用できます。


設定方法

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

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

変更場所 ▼ プラグインの改造【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... 親子孫カテゴリ作成例もご覧ください。

作成カテゴリの記事合計件数の表示
var entry = 0;  // 表示
var entry = 1;  // 非表示

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

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

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

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

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

 『Categories...B』ではカテゴリ名を太字にしたり、文字色を変更して現在地を表示します。

var pStyle = 'bold';    // 太字

 現在地の文字色を変更するときは pStyleに '#ff0000' などと # を付けた色を指定します。

var pStyle = '#ff0000';    // 文字色変更(赤)
var pStyle = '#0000ff';    // 文字色変更(青)

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

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

作成カテゴリの文字色

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

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

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

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

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

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

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

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

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

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

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

font-size: 11px !important;

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

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

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

ul#grandCategoryB li{
  margin: 0px 1px !important;
  padding: 3px 0 !important;
  line-height: 1.2;
}
ul#grandCategoryB ul{
  margin: 2px 0 1px 12px !important;
}
ul#grandCategoryB ul ul{
  margin: 1px 0 -2px -18px !important;
  overflow: hidden;
}
ul#grandCategoryB 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#grandCategoryB li.SubNewCategoryB ul{
  padding-left: 30px !important;
}
ul#grandCategoryB ul li.SubNewCategoryB {
  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_parent--><span><!--/category_parent--><!--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_parent--></span><!--/category_parent--><!--category_nosub--></a><!--/category_nosub--><!--category_sub_hasnext--></a><!--/category_sub_hasnext--><!--category_sub_end--></a><!--/category_sub_end--><!--category_nosub--></li>

右上の「+」「-」ボタン

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

画像変更

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

デフォルト : 開 catB1allopen / width="11" 閉 catB1allclose / width="10"

<p id="acBSwitch"><img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/catB1allopen.gif" width="11" height="9" alt="open" /><img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/catB1allclose.gif" width="10" height="9" alt="close" /></p>

 以下の画像は Categories... と同じものです。

横長 : cat02 / width="13"

<p id="acBSwitch"><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="acBSwitch"><img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/catB1allopen.gif" width="11" height="9" alt="open" /><img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/catB1allclose.gif" width="10" height="9" alt="close" /></p>

<!--/category_sub_end--><!--/category-->
</ul>
<p id="acBSwitch"><img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/catB1allopen.gif" width="11" height="9" alt="open" /><img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/catB1allclose.gif" width="10" height="9" alt="close" /></p>

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

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

カテゴリアイコンを指定した画像に変更

 変更箇所は次の通りです。

[A] 親子未指定の通常カテゴリ画像

<!--category_nosub-->
img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/catB1n.gif" width="29" height="14"

[B] 親カテゴリ画像(開いた状態)

<!--category_parent-->
img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/catB1open.gif" width="29" height="14"

[C] 親カテゴリ画像(開いた状態) [B]と同じ画像を指定
po: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/catB1open.gif',
[D] 親カテゴリ画像(閉じた状態)
pc: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/catB1close.gif',

 [B][C][D]は同じサイズにします。カテゴリ名の文字位置を揃えるのであれば、[A]も同じサイズの画像を作成します。

[E] 作成カテゴリ画像(開いた状態)
so: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/catB1subopen.gif',
[F] 作成カテゴリ画像(閉じた状態)
sc: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/catB1subclose.gif',
[G] 作成カテゴリ画像の'横幅','高さ'
swh: ['15','14'] 

 [E][F]は同じサイズにします。その横幅と高さは swh で指定します。例えば、横幅 13px 高さ 11px であれば、['13','11'] とします。

[H] 子カテゴリ画像(styleで指定)
ul#grandCategoryB li li{
background: url(http://blog-imgs-44.fc2.com/p/a/r/paro2day/catB1li.gif) left center no-repeat;

『Categories...B』の画像を『Categories...』に変更する

[A-B] 親子未指定の通常カテゴリ画像 / 親カテゴリ画像(開いた状態)

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

[C-G]
po: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01open.gif', //親カテ開
pc: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01close.gif', //親カテ閉
so: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01open.gif', //作成カテ開
sc: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01close.gif', //作成カテ閉
swh: ['25','14'] //作成カテ画像の'横幅','高さ'
[H] 子カテゴリ画像を変更、styleで表示位置を調整
ul#grandCategoryB ul {
   margin: 2px 0 1px 12px !important;
}
ul#grandCategoryB ul ul {
   margin: 1px 0 -2px -18px !important;
   overflow: hidden;
}
ul#grandCategoryB 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#grandCategoryB li.SubNewCategoryB ul {
   padding-left: 30px !important;
}


#acBSwitch img {/* 右上「+」「-」画像をそのまま使う場合は変更不要 */
   margin: 0 0 0 2px;
}
右上「+」「-」画像の変更

 コードの最初にある2つの画像アドレス、widthなどを変更。右上「+」「-」画像をそのまま使う場合は変更不要。

<p id="acBSwitch"><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>

補足

 『Categories...』では親カテと作成カテの画像が同じなので、[C-G]の po,sopc,sc はそれぞれ同じ画像になります。異なる画像を使用する場合は別のopen,close画像を指定します。その他の配布画像についてもカテゴリアイコン画像変更と同様です。

■角丸 : 01m

<!--category_nosub-->
img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01mn.gif" width="25" height="14"
<!--category_parent-->
img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01mopen.gif" width="25" height="14"

po: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01mopen.gif', //親カテ開
pc: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01mclose.gif', //親カテ閉
so: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01mopen.gif', //作成カテ開
sc: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01mclose.gif', //作成カテ閉
swh: ['25','14'] //作成カテ画像の'横幅','高さ'
ul#grandCategoryB li li {
background: url(http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01mli.gif) left center no-repeat;

■背景青 : 03 01 03

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

po: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01open.gif', //親カテ開
pc: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01close.gif', //親カテ閉
so: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01open.gif', //作成カテ開
sc: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01close.gif', //作成カテ閉
swh: ['25','14'] //作成カテ画像の'横幅','高さ'
ul#grandCategoryB li li {
background: url(http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat03li.gif) left center no-repeat;

 open,close は同じ値になります。

■青青 : 33 31 33

<!--category_nosub-->
img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat33n.gif" width="25" height="14"
<!--category_parent-->
img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat31open.gif" width="25" height="14"

po: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat31open.gif', //親カテ開
pc: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat31close.gif', //親カテ閉
so: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat31open.gif', //作成カテ開
sc: 'http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat31close.gif', //作成カテ閉
swh: ['25','14'] //作成カテ画像の'横幅','高さ'
ul#grandCategoryB li li {
background: url(http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat33li.gif) left center no-repeat;

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

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

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

開閉

 プラグインHTMLの最初にある次のコードを変更します。
44→47 B→Ba

<script type="text/javascript" src="http://blog-imgs-47.fc2.com/p/a/r/paro2day/grandCategoriesBa.js" charset="utf-8"></script>

 次のスタイルに cursor: pointer; を加えます。すでに何らかの指定がされている場合は必要ありません。

#grandCategoryB li a {
 margin: 0 !important;
 padding: 0 !important;
 border: 0 none !important;
 display: inline !important;
 background: none !important;
 text-decoration: none !important;
 cursor: pointer;
}

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

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

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

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

jsファイルをhead要素内に移動させる(推奨) 『Categories...B』

 プラグインHTMLの最初にある次のコードを削除します。

<script type="text/javascript" src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/grandCategoriesB.js" charset="utf-8"></script>

 テンプレートのHTML編集で head要素 の中に削除したコードを入れます。

<head>
...
<script type="text/javascript" src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/grandCategoriesB.js" charset="utf-8"></script>
</head>
<body>

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

 他のテンプレートページ(/?template=hoge)でも表示する場合はそのテンプレートのhead要素内にも加える必要があります。移動させない場合は必要ありません。

外部スクリプトを別サーバにアップする

 下記リンクを右クリックして、保存。アップロードします。

grandCategoriesB.js

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

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

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

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

 プラグインHTMLの最初にある次のコードを削除します。

<script type="text/javascript" src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/grandCategoriesB.js" charset="utf-8"></script>

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

その他注意事項

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

#grandCategory {
  width: 700px;
}

ご利用にあたって

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

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

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

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

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


関連記事
  1. comment
  2. DGみいしゃ 2010-07-18 16:59 No.486 #-URLhttp://disneymagiccastle.blog41.fc2.com/

    使わせていただきたいのですが、子カテゴリのみに記事を入れる方法がわかりません。

    親カテゴリ ...10件
    -子カテゴリ...7件
    --孫カテゴリ...3件
    のように、「子カテゴリ」に属していて孫カテゴリに属していない記事」を設定するにはどうしたらよいのでしょうか。

    この記事の画像サンプルを見るとLifeにのみ属している記事が3件あるように見えますが、作成した子カテゴリに記事を入れる方法がわかりません。どうぞよろしくお願いします。

  3. Pdy 2010-07-20 23:10 No.487 #-URLhttp://paro2day.blog122.fc2.com/blog-entry-584.html

    こんばんは。

    画像では切れていますが、実は japanese の後に別の孫カテゴリがあり、それが3件あるのです。

    作成される子カテゴリは疑似的なもの(整理用ラベル)なので、実際にカテゴリが作成されるわけではございません。
    FC2ブログの機能として存在しないため、作成した孫を持つ子カテゴリに記事をもたせることはできません。
    実際の階層 : Memo(親)>Web(子)
    作成カテゴリ : Life
    表示上の階層 : Memo(親)>Life(子)>Web(子→孫)

    残りのカテゴリを包括するような孫カテゴリを作成するか、通常の子カテゴリとして分離させる必要があります。

    ***
    別の方法によって、子カテゴリのみに記事をもたせることは可能ですが、Categoriesと同じく、それぞれ制限があります。
    親カテゴリ ...10件
    -子カテゴリ...7件
    --孫カテゴリ...3件

    (A)既存の親カテゴリを子カテゴリとし、新たに親カテゴリを作成し、子(既存の親)カテゴリを下に置く
    実際の階層 : Life(親)>Web(子)
    作成カテゴリ : Memo
    表示上の階層 : Memo>Life(親→子)>Web(子)
    ※LifeカテゴリのページにはLifeとその下位にあるカテゴリ(Webなど)の記事も表示されます。作成した親カテゴリには記事をもたせることができません。

    (B)既存の子カテゴリを孫カテゴリとし、別の子カテゴリの下に孫(既存の子)カテゴリを置く
    実際の階層 : Memo(親)>Life(子)
    実際の階層 : Memo(親)>Web(子)
    作成カテゴリ : なし
    表示上の階層 : Memo(親)>Life(子)>Web(子→孫)
    ※LifeカテゴリのページではLifeカテゴリの記事のみ表示されます。Webカテゴリなどは表示されません。

    (C)ユーザータグを利用する
    作成したカテゴリ(ユーザータグ)に記事をもたせることも可能になりますが、たぶん面倒になるので今は割愛させていただきます。

    (A)の方法については『Categories...C』として仮公開しました。
    URL : http://paro2day.blog122.fc2.com/blog-entry-584.html

  4. Pdy 2011-01-06 23:33 No.574 #-URLhttp://paro3day.blog4.fc2.com/?template=w-flat&index

    はじめまして。
    こちらで確認したかぎりではリストマーカー●は表示されませんでした。
    [URL]http://paro3day.blog4.fc2.com/?template=w-flat&index

    Vicunaスキンは !important の指定がないので、プラグインHTML内のスタイルがそのままであれば、リストマーカーは表示されないものと思われます。
    プラグインのプレビューや再ダウンロードでもマーカーは表示されますでしょうか?
    またブラウザを変えても表示されますでしょうか?

    プラグインHTML内のコード
    <style type="text/css">
    /* Categories... */
    から
    /* Categories END */
    までのコードが正常に反映されていない可能性があります。
    以下のご確認をお願いいたします。

    ●削除しただけでテンプレートのスタイルシート欄にコードをコピー&貼り付けしていない
    ●/* */ のコメントアウトが正しく閉じられていない
    ●優先順位(!important)に問題がある

    !important を外している場合は
    #utilities #grandCategory {
    margin: 0 0 3px !important;
    }
    というように #grandCategory の前に #utilities を加えてみてください。

  5. セツナ 2011-06-08 08:09 No.622 #-URLhttp://discord7.blog51.fc2.com/

    はじめまして。
    Categories...Bの横幅を変更したいのですが、やり方が分かりません。

    今のサイズだと大きすぎるので、横幅をもう少し小さくしたいです
    よろしくお願いします。

  6. Pdy@CategoriesBの横幅 2011-06-08 22:51 No.623 #HctKA.XIURL

    こんにちは。
    [A][B][C]のいずれかで変更できると思います。

    プラグインの<style type="text/css">内、またはテンプレートのスタイルシートに次のコードを追加。
    ・80%の部分を70%などに変更して狭める。
    [A] 右上のボタンの横幅のみ変更
    #acBSwitch { width: 80%; }

    [B] カテゴリと右上のボタンの横幅変更
    #acBSwitch, #grandCategoryB { width: 80%; }

    プラグインの<style>内のコードを変更(2箇所)。
    ・10pxの部分を15pxなどに変更して狭める。
    [C] 横幅を変更して中央寄せ
    #grandCategoryB {
    margin: 0 0 3px !important;
    }
    上記を下記に変更。
    #grandCategoryB {
    margin: 0 10px 3px !important;
    }

    #acBSwitch {
    margin: 0 0 2px !important;
    font-size: 9px;
    text-align: right !important;
    }
    上記を下記に変更。
    #acBSwitch {
    margin: 0 10px 2px !important;
    font-size: 9px;
    text-align: right !important;
    }

    [A][B]は%ではなくテンプレートに合わせたpxで指定してもOKです。
    width: 160px;
    カテゴリ(#grandCategoryB)の横幅を狭めすぎるとカテゴリ名のテキストなどが折り返されるのでご注意ください。

  7. セツナ 2011-06-10 11:47 No.624 #-URL

    丁寧な説明のおかげで、とても分かりやすくて助かりました
    ありがとうございました。

  8. Pdy 2011-11-25 01:13 No.822 #-URL

    はじめましてです。
    環境設定のカテゴリの編集で42番と11番のカテゴリの並びを入れ替えてみてください。
    たぶん、最初のcat[0]の11よりもcat[1]の42の方が先に来ていると思います。
    (作成カテゴリで指定した順番通りに並べる)
    「親子子親子子」の並びを「親子子子親子」のようにして、3番目の子を引きぬいて、二番目の親の子にしてるイメージです。
    連続する子(+)の順序は入れ替わっていても問題ないと思います。

    http://blog-imgs-44.fc2.comのファイルサーバーもちょっと重いですね。
    「外部スクリプトを別サーバにアップする」で上げ直してもいいかもしれません。
    もたつくときはheadに移動させず、そのままの位置でアドレスを書き換えるだけでOKです。

  9. akira 2013-01-19 12:02 No.1716 #-URL

    はじめまして、作者様のプラグイン使いやすくて重宝させて頂いてます。
    質問なのですが、作者様のこのカテゴリプラグインの様式をお友達リンクの方でも
    活用したいと考えているのですが、作成される予定はありますでしょうか?
    お時間ある時にでもご回答頂ければと思います。

  10. dompotime 2013-07-04 22:30 No.2382 #-URLhttp://dompotime-lab.com/

    大変お世話になっております。ものづくりをしているdompotimeの福山です。
    Categories...Bを使わせて頂いています。
    ホームページの運営構成上、どうしても「NEW表示」にて解決カテゴリーのどれに変化が起こったのか表示したいのですが、HTMLには素人なので全くわかりません。これまでいろいろとカスタマイズしてきましたが意味もわからず表示できたらOKみたいな感じで作ってきましたので、未だに良くわかりません。NEW表示だけはギブアップの状態です。

    もし、宜しければご教授願います。いろいろカテゴリーにNEW表示するサイトを見てみたのですがチンプンカンプンです。でもどうしてもNEW表示したいです。もし可能でしたらお手数ですが具体的にご教授お願いいたします。


  11. PARO 2013-08-10 14:25 No.2492 #-URLhttp://paro2day.blog122.fc2.com/blog-entry-1113.html

    こんにちは。
    返信が大変遅くなり申し訳ないです。

    >akiraさん
    もう随分経ってしまいましたが予定はございません。
    申し訳ないです。
    直接HTMLで作成した方が融通がきいていいかもしれません。


    >dompotimeさん
    カテゴリには最新記事を出力する変数はなく、最新記事にもカテゴリを出力する変数はないので新着RSSから該当カテゴリを取得するスクリプトを別に作成する必要があります。
    サンプルを作成してみましたので必要であればご参考ください。

    [link先]設置方法&サンプルページ
    http://paro2day.blog122.fc2.com/blog-entry-1113.html
    どのページでも30日以内の記事を含むカテゴリに新着マークを表示
    http://paro3day.blog4.fc2.com/blog-entry-63.html

    IE、Firefox、Chromeで確認してありますが不具合などございましたら設置方法のページにご報告ください。
    (なるべく早く回答したいと思います)

  12. 一休 2013-10-28 09:43 No.3003 #-URLhttp://morepblog.blog.fc2.com/

    CategoriesBを使わせていただいております。
    突然一つの親カテゴリーに集約されてそれより下のカテゴリーは空の状態になります。
    試行錯誤しておりますが全然改善されておりません。
    何か不具合を調べる方法がありましたらご教示ください。

  13. PARO 2013-10-31 21:51 No.3008 #-URLhttp://blog-imgs-57.fc2.com/p/a/r/paro2day/note20131031b.html

    こんばんは。
    遅くなりました。申し訳ないです。
    IE、Chrome、Firefoxでブログを確認してみましたがカテゴリ分けはされているようです。
    ただカテゴリ数が2500で分類が1400と多いため、PCスペック環境によっては処理が追いつかずに途中で止まっている可能性があるかもしれません。
    こちらの環境では処理に3~5秒を要しています。
    ですので処理時間を短縮したバージョンを作成してみました。
    Chromeだと0.2秒ほどで処理が完了します。

    ■短縮バージョンに変更する方法
    <!--category_sub_hasnext--> <li class="caNo(省略
    <!--category_sub_end--> <li class="caNo(省略
    プラグインの上記2箇所を以下に変更(liの直後に『 id="caId<%category_no>"」を追加)
    <!--category_sub_hasnext--> <li id="caId<%category_no>" class="caNo
    <!--category_sub_end--> <li id="caId<%category_no>" class="caNo

    スクリプトのファイルアドレス部分(src="○○○")を
    http://blog-imgs-44.fc2.com/p/a/r/paro2day/grandCategoriesB.js
    上記から以下に変更。
    http://blog-imgs-57.fc2.com/p/a/r/paro2day/grandCategoriesBsh.js

    各ブラウザで動作確認済みです。
    300件程度のサンプルもリンク先に用意してみましたが、動作しない場合はブラウザ環境などを添えてお知らせください。
    http://blog-imgs-57.fc2.com/p/a/r/paro2day/note20131031b.html

    短縮版の注意点としては作成するカテゴリの先頭に子カテゴリの中で最初に表示されるカテゴリの番号を指定する必要があります。
    (例)管理画面のカテゴリ一覧の順番が上から「リンゴ番号1」「バナナ番号5」「キウイ番号3」「メロン番号2」「イチゴ番号4」の場合
    バナナとメロンとイチゴを『好きなもの』というカテゴリに入れるときは次のようにします(3つの中で順番が最も上位にあるバナナの5番を先頭にする)。
    cat[0] = "1=好きなもの=5+2+4";
    以下のようにバナナを最後に持ってくるとカテゴリの作成位置が下方にずれるのでご注意ください。
    cat[0] = "1=好きなもの=2+4+5";

    関係はありませんが左側に表示されているテンプレートのデフォルトの矢印は
    スタイルシートにある
    #grandCategoryB,#grandCategoryB ul,#grandCategoryB li {
    のul,直後に「body 」を付け足すと消えます。
    #grandCategoryB,#grandCategoryB ul,body #grandCategoryB li {

  14. 仲間敬 2015-11-04 16:09 No.4775 #bRfSd8YEURL

    はじめまして、Categories...Bを使用させていただいております。

    孫カテゴリの画像だけ小さいのでサイズを変更したいのですが、どのようにすれば良いでしょうか。

    ※恐らくこの部分↓
    ul#grandCategoryB li li{
    background: url(http://blog-imgs-44.fc2.com/p/a/r/paro2day/catB1li.gif) left center no-repeat;

    恐れ入りますが、ご教示下さいますよう宜しくお願い致します。

  15. 仲間敬 2015-11-05 10:51 No.4776 #bRfSd8YEURLhttp://nakamatakashinoheya.blog.fc2.com/

    はじめまして、Categories...Bを使用させていただいております。

    孫カテゴリ左の画像だけサイズが小さいので大きくしたいのですが、どのようにすれば良いでしょうか。

    恐らくこの部分↓
    ul#grandCategoryB li li{
    background: url(http://blog-imgs-44.fc2.com/p/a/r/paro2day/catB1li.gif) left center no-repeat;

    恐れ入りますが、ご教示下さいますよう宜しくお願い致します。

  16. ふづき 2017-03-04 11:48 No.5076 #HfMzn2gYURL

    ●「Categories...」の画像に置き換えても、liの画像が赤丸にならない
    ・環境:firefox51.01(32bit)、Chrome56.0.2924.87 (64-bit)

    理想的なプラグインのためぜひ使わせていただきたいのですが、「Categories...」への置き換えがうまくできません。
    「Categories...」では現在地が赤丸画像になったのでなんらかの不具合が起こっているとは思うのですが…。
    liの画像以外は置き換えができているようでした。

    ファイル比較でBと「Categories...(画像置き換えができている)」を確認したところ
    <style type="text/css">~</style>の違いは「grandCategory」か「grandCategoryB」と、上部にあるに「list-style-image: none !important;」だけでした。

    list-style-imageを削り、一番下にあるvar pStyle = 'bold';のboldもなくしてみたりしたのですが、現在地でli用画像の赤丸(右側)になりませんでした。

    ---

    改良版はBをベースにしているようなのと、<script type="text/javascript">部の表記がかなり違うのでなのでご相談させていただきましたが、基本はBも「Categories...」も同じであるのならば無印のほうを使わせていただこうと思います。

コメント

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

トラックバック

http://paro2day.blog122.fc2.com/tb.php/559-7f8fe0cf

  1. trackback