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

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

2010-05-26 水 01:56
FC2ブログプラグイン

設定方法

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

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

変更場所 ▼ プラグインの改造【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 li に color を加えます。「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 li に font-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 li の font-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></li>

親カテゴリのみ記事件数を非表示（子をもたないカテゴリと子カテゴリは表示）: <a href="blog-category-<%category_no>.html"><%category_name> (<%category_count>) (<%category_count>) (<%category_count>)</a></li>
子カテゴリのみ記事件数を表示（子をもたないカテゴリと親カテゴリは非表示）: <a href="blog-category-<%category_no>.html"><%category_name> (<%category_count>) (<%category_count>)</a></li>
子カテゴリのみ記事件数を非表示（子をもたないカテゴリと親カテゴリは表示）: <a href="blog-category-<%category_no>.html"><%category_name> (<%category_count>) (<%category_count>)</a></li>
記事件数を表示しない: <a href="blog-category-<%category_no>.html"><%category_name></a></li>

親カテゴリのリンクを消す

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

変更箇所1

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

変更後

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

変更箇所2

</a></li>

変更後

</span></a></a></a></li>

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

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

画像変更

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

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

<p id="acBSwitch"><img src="https://blog-imgs-44.fc2.com/p/a/r/paro2day/catB1allopen.gif" width="11" height="9" alt="open" /><img src="https://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="https://blog-imgs-44.fc2.com/p/a/r/paro2day/cat02allopen.gif" width="13" height="9" alt="open" /><img src="https://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> の後に移動させます。

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

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

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

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

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

[B] 親カテゴリ画像（開いた状態）

 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] 親子未指定の通常カテゴリ画像 / 親カテゴリ画像（開いた状態）

 img src="http://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01n.gif" width="25" height="14"  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="https://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01allopen.gif" width="9" height="9" alt="open" /><img src="https://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01allclose.gif" width="9" height="9" alt="close" /></p>

補足

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

■角丸 : 01m

 img src="https://blog-imgs-44.fc2.com/p/a/r/paro2day/cat01mn.gif" width="25" height="14"  img src="https://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

 img src="https://blog-imgs-44.fc2.com/p/a/r/paro2day/cat03n.gif" width="25" height="14"  img src="https://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

 img src="https://blog-imgs-44.fc2.com/p/a/r/paro2day/cat33n.gif" width="25" height="14"  img src="https://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="開閉"

作成した子カテゴリをa要素（リンク）に入れる、作成カテゴリ名クリックで展開

　プラグイン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="https://blog-imgs-44.fc2.com/p/a/r/paro2day/grandCategoriesB.js" charset="utf-8"></script>

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

<head> ... <script type="text/javascript" src="https://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="https://blog-imgs-44.fc2.com/p/a/r/paro2day/grandCategoriesB.js" charset="utf-8"></script>

その他注意事項

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

#grandCategory {
  width: 700px;
}

ご利用にあたって

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

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

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

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

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

【更新履歴】
2010 06-29 - 作成した子カテゴリをa要素（リンク）に入れる、作成カテゴリ名クリックで展開を追加。
2010 05-26 - Categories...B 公開。基本設定はCategories...と同じです。本記事の日付はトップから落ちた後に戻ります。説明文の修正は承認待ちになるため保留。

関連記事

0 Hatena tweet Top

トラックバック

https://paro2day.blog.fc2.com/tb.php/559-7f8fe0cf

trackback