Lc-Factory/雑記
リリースしたプラグイン&テンプレートについての、詳細情報や雑記です。FC2ブログ向けの情報が中心です。(by ルード@管理人)

Lc.ズームバー v2 ×
ズーム: 100% → 100%


広告(125x125バナー) ×

Lc.ツリーカテゴリーNew ×

記事の日付にご注意 ×
古い記事もありますよ。
現状と合わないことも?

日付をご確認ください。
昔の記事なら、ご注意。

ブログ全記事表示 ×

全ての記事を表示する


ブログ内検索 ×

奥ゆかしい広告 ×
エックスサーバー
高速・安定の割に低料金

FC2カウンター ×

お勧めマナーサイトS ×

Lc.ワードハイライト ×

RSSフィード ×

Memo ×

このブログの右のメニューは、
右上の×で、消せますよ。

右メニューは切り替え方式。
AとB、クリックで切り替え。


Lc.ツリータグリスト ×

スポンサーサイト
【--/--/-- --:--】 スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


Lc.ツリーカテゴリーの、CSS設定について(その2)
【2007/11/04 22:48】 .プラグイン 仕様説明
前の記事からの続きで、Lc.ツリーカテゴリーのCSS設定についての説明です。
CSSを分かっている人以外には敷居の高い内容ですよ。

.
*** 図解していきます ***

この記事では、Lc.ツリーカテゴリーのどの部分に、どのスタイルのclassが割り当てられているか図解します。
一部、classではなくidが割り当てられていますけどね。

この情報が分かれば、CSSを知っている人なら、スタイルシート設定ができるでしょう。



*** 全体に対する設定 ***

まず、全体にLC_CATというidが付いています。

ツリーカテゴリー全体に適用したい場合は、このidを指定します。
例えば、全体の文字サイズを小さくするなら、#LC_CAT {font-size: 80%;}みたいに。



*** グループに対する設定 ***


*階層目のグループ全体には、level_*というclassが付いています。

ある親の下にぶら下がる部分全体です。
親をクリックして折りたたまれる部分ですね。




*** 親の行に対する設定 ***

ツリーの親には、parentというclassが付いています。
*階層目の親には、parent_*というclassが付いています。
*番目に出現した親には、lc_cat_parent_*というidが付いています。

これらは、1行の全体に対しての設定です。
ここで言う親というのは、グループ化におけるグループ名の行です。


親のリンク部分のみなら、#LC_CAT .parent aのように指定しましょう。


*** 子の行に対する設定 ***

カテゴリー番号*の子には、lc_cat_no_row_*というidが付いています。

これは、1行の全体に対しての設定です。
ここで言う子というのは、カテゴリーへのリンクの行です。

カテゴリー番号は、カテゴリーURL内で、カテゴリーごとに付く数値です。
http://~/blog-entry-.html の、*の部分です。



*** 子のリンクに対する設定 ***

ツリーの子には、childというclassが付いています。
*階層目の子には、child_*というclassが付いています。

これらは、リンク自体に対しての設定です。

カテゴリー番号で指定したければ、#lc_cat_no_row_1 .child のように指定しましょう。




*** 親の+や-に対する設定 ***

ツリーの親には、の記号が付いていますね。
この部分には、boxというclassが付いています。

但し、スクリプト中のLC_CAT_PARENTBOXがtrueの場合、そちらの設定が優先されます。
LC_CAT_PARENTBOXと競合するスタイル設定をしたければ、LC_CAT_PARENTBOXの値をfalseにしましょう。




*** カテゴリー名に対する設定 ***

カテゴリー名には、child_nameというclassが付いています。

これは、カテゴリーの名前の部分だけです。
カテゴリーへのリンクは、例えば#LC_CAT .child #lc_cat_no_row_1 a のように指定します。



*** カテゴリーの記事数に対する設定 ***

カテゴリーの記事数の部分には、child_countというclassが付いています。

これで、記事数を非表示っぽくすることもできます。
但し、本当に記事数を消すなら、スクリプト内のLC_CAT_DISPLAYNUMをfalseにしましょう。



*** カテゴリーのマークに対する設定 ***

カテゴリーに付くマークの部分には、child_starというclassが付いています。

アイコン画像を設定してあるカテゴリーの場合、この部分はありません。

この設定を使えば、カテゴリーごとに違う色を付けられますね。
例えば、#LC_CAT .child_1 .child_star {color:#ffff00;} のように。




*** カテゴリーの枝分かれ部分に対する設定 ***

親にぶら下がる枝の部分には、branchというclassが付いています。
*階層目の枝には、branch_*というclassが付いています。



*** カテゴリーの段下げ部分に対する設定 ***

カテゴリーの段下げ文字には、indentというclassが付いています。
*階層目の段下げ文字には、indent_*というclassが付いています。

通常、段下げ部分には全角空白があり、文字色等を設定しても無意味ですが・・・。
スクリプト中のLC_CAT_INDENTCHRの値を変更すると、全角空白以外に変更できますよ。





*** さらに ***

今のところ図解は見合わせますが、以下のclassもあります。

parent_cat :親カテゴリー(FC2ブログの親子カテゴリ設定での親)
parent_count :親の記事数(親の記事数を表示する設定にした場合のみ)
active :選択中のカテゴリー

詳しくは、別の記事をご参照ください。


*** オプション機能専用も ***

オプション機能を有効にした場合のみ適用される設定もあります。
詳しくは、それぞれの説明記事に説明があるので、ご参照ください。

Newマーク表示 (新しい記事のあるカテゴリーにNewなどを表示する機能)
記事一覧表示 (カテゴリー内の記事の一覧を表示する機能)




*** 必須ではありませんよ ***

かなり多くの設定が可能なため、把握しづらいかも知れませんね。
ご自分に必要な設定以外は、気にしないことをお勧めします。
CSS設定はこだわる人の上級設定であり、必須ではありません。
関連記事
この記事に対するコメント
 
いつも利用させてもらってます。
自分はHTMLのことがよくわからないので質問なのですが

グループ名
├カテゴリ名1
├カテゴリ名2
├カテゴリ名3
└ カテゴリ名4

 ├ └   ←を画像に置き換える方法ってどうすればよいのでしょうか?
【2007/12/06 23:30】 クーガー | URL [編集]
今回は、少し情報を出しておきます。
軽いメモですが、これで分からなければ、あきらめましょう。

プラグインのHTML編集にて。

lc_cat_outputLeaf(sChild, '└ ');
lc_cat_outputLeaf(sChild, '├ ');

↑こういう部分を修正します。

lc_cat_outputLeaf(sChild, '<img src="URL">');
↑このように書き換えます。
 URLの部分に、画像のURLを書きます。
 画像は、ブログ管理画面のアップロード機能で、アップロードしておきます。


取り敢えず、今はこれ以上説明する気はありません。
私は「自力で手に負えないなら、カスタマイズすべきでない」という考えです。
【2007/12/07 01:19】 ルード@管理人 | URL [編集]
 
ありがとうございます。
たぶんそこをいじるのだとは思ってたんですが
どう変えればいいのかわからなくて助かりました

>私は「自力で手に負えないなら、カスタマイズすべきでない」という考えです。
ごもっともだと思います。
今回は親切に教えていただきありがとうございましたm(_ _)m
【2007/12/07 06:19】 クーガー | URL [編集]
ざっと書いたメモでしたが、お役に立ったのなら幸いです。

なお、今後、ツリーカテゴリーがバージョンアップした場合には、対応方法が変わるかも知れません。
あしからずご了承ください。

【2007.12.23~】
バージョンアップにより、対応方法が変わりました。
LC_CAT_BRANCH_CONNECT と LC_CAT_BRANCH_EDGE の値を変えればOKです。
http://lctreetz.blog69.fc2.com/blog-entry-196.html
【2007/12/08 00:53】 ルード@管理人 | URL [編集]
 
いつも利用させてもらってます。
CSSカスタマイズで疑問があります。
自分なりに調べてみたのですが、どう変えればいいのかがわからないため質問しました。

+グループ名
 ├カテゴリ1
 ├+カテゴリ2
 ├ ├カテゴリ3
   └カテゴリ4

となるのですが、+の部分を画像にし、閉じたときと開いたときで異なる画像を使いたいと思っています。


この記事の中に
>LC_CAT_PARENTBOXと競合するスタイル設定をしたけれ
>ば、LC_CAT_PARENTBOXの値をfalseにしましょう。
とあり、HTMLの方はfalseにしました。

CSS側に画像を以下のように設置したのですが、画像がきません。

/* Lc.ツリーカテゴリー 親設定(全体指定) */
#LC_CAT .parent{}
#LC_CAT .box {background-image:url(画像のURL);}

私の置いた場所が悪いのだと思い申し訳ないのですが、画像URLを置く場所のみでいいので教えていただけないでしょうか?
【2007/12/13 14:58】 らび | URL [編集]
+-の画像化は・・・ちょっと面倒です。
自分で手段の分かる人以外は、手出しすべきではないと思いますよ。
JavaScriptに詳しければ、そう難しくもない気はしますけど。

取り敢えず、少しだけ情報を出しておきます。

まず、LC_CAT_PARENTBOXの値をfalseにするのは、正しいです。
但し、画像は、CSSの設定ではなくHTMLのスクリプト内で指定する必要があります。
変更すべきは、+と-の、「値」「初期値を出力する部分」「切り替える部分」くらいでしょうか。
処理の流れは変わらないと思いますが、ちょっとしたロジック改変です。

将来的には、バージョンアップで画像に対応する可能性も・・・ないとは言いません。
【2007/12/14 00:58】 ルード@管理人 | URL [編集]
 
ありがとうございます。
おっしゃることはなんとなくわかるのですが、具体的にどこをどうすればよいというのがサッパリわかりません。
まずはスクリプトを勉強して、それから再度挑戦してみます。

それでは、今回は親切に回答いただきありがとうございました。
【2007/12/15 17:53】 らび | URL [編集]
比較的簡単に実現できる方法を見つけました。
全ての「」と「」を、好みの画像出力のimgタグに変換。
nodeValue」と「innerText」を、「innerHTML」に変換。
・・・今の最新バージョンなら、これで行けるかと。

ツリーカテゴリーの次版では、同じ方法は使えないと思います。
もう少し簡単になるとは思いますけど。


【2007.12.23~】
・・・バージョンアップにより、対応方法が変わりました。
LC_CAT_BOX_CLOSED と LC_CAT_BOX_OPENED の値をimgタグにすればOKです。
http://lctreetz.blog69.fc2.com/blog-entry-196.html
【2007/12/15 21:35】 ルード@管理人 | URL [編集]
いつも使わせていただいています。
とても多機能で痒いところに手が届くので愛用させていただいてます。
ただ、どうしても分からないことがあるのです。

記事数を線で囲みたいので

#LC_CAT .child_count {border: 1px solid black;}
というようにCSSを設定しました。

IEでは正常に反映されたのですがfirefoxやSafariで確認すると
カテゴリー名と記事数の間にborderが登場し、数字を囲っていないようなのです。
childをparentに変えた場合は正常に囲んでくれます。

他は問題が無いのですが、「.child_count」だけはいくらやっても分からず困っています。
どうすればIE以外でも数字を囲むことができるのか、もしよろしければ教えていただけないでしょうか。
【2009/04/16 20:40】 kuro | URL [編集]
情報をありがとうございます。現象を確認しました。
IEやOperaではOK、FirefoxやSafariではNG、というところですね。
記事一覧機能がONの場合にのみ発生するようです。

プラグインHTML内のlinkP += '</a>'; を、ifの前に移動すれば良いのだと思います。
(2009.03.14版では、474行目→464行目)
次版のリリース時に、ついでに修正するかも知れません。

ちなみにこれは、プロが調査しても原因を特定できずに「ブラウザとの相性問題」として放り出しそうな現象です。
自力での調査を諦めるのは、結果として正しい選択だったのでしょうね。
【2009/04/26 23:04】 ルード@管理人 | URL [編集]
ツリーリンクの親の色を変更したいのですが、ここの記事を参考に
CSSに「#LC_LNK.parent a」で設定したのですが、変更されません。
ツリーカテゴリーのほうでは「#LC_CAT .parent a」で正常に変更されました。

どうすればツリーリンクの親の色を変更できるでしょうか?
ご教授お願いします。
【2010/01/22 16:40】 なの | URL [編集]
現行のツリーリンクでは、実は少しだけ違います。
「#LC_LNK.parent」でどうぞ。aは不要です。
お望みの書式になるよう、色々と試してみれば良いかと思います。
【2010/01/24 03:02】 ルード@管理人 | URL [編集]
設定することができました!
あと、親リンクごとにあいだを開けたいのですが、

#LC_LNK div{margin-top: 4pt;}
#LC_LNK .level_0 div{margin-top: 0pt;}

を追加したのですが、親だけでなく子まで間があいてしまいます。(カテゴリーの方では正常に変更されました。)
どうすればいいでしょうか?
【2010/01/24 21:52】 なの | URL [編集]
> #LC_LNK .level_0 div{margin-top: 0pt;}
この設定は、現行版のツリーリンクでは効きません。
次版以降で対応する可能性も微妙です。
他の方法でトライするしかないでしょうね。
【2010/01/25 02:41】 ルード@管理人 | URL [編集]
>ルード@管理人様
ご回答ありがとうございます。

他の方法等ありましたらご教授お願いします。
【2010/01/25 19:07】 なの | URL [編集]
・#LC_CAT .parent {line-height:18pt;} で妥協する
・アイコン画像設定により、透明な画像でマージンを作る
・ツリーリンクのスクリプトをいじってどうにかする

これ以上はご自分で試行錯誤してください。
基本的に、私はサポートをしない方針です。
気が向けばそのうち解説するかも知れませんが、可能性は低いかと。
【2010/01/26 00:07】 ルード@管理人 | URL [編集]
>ルード@管理人様
ご回答ありがとうございます。
この方法でいきたいと思います。
ご回答ありがとうございました!
【2010/01/26 00:19】 なの | URL [編集]

この記事に対するコメントの投稿(歓迎ですが、承認率は低めです)


(←基本的には不要)


 ・承認率も返答率も、低めですよ。
 ・たまに整理で消すことも・・・。
 ・そっけない返事も多いです。









管理者にだけ表示を許可する


この記事に対するトラックバック
トラックバックURL
http://lctreetz.blog69.fc2.com/tb.php/171-2e46244f
この記事にトラックバックする(FC2ブログユーザー)
承認率は非常に低いですし、たまに削除もします。ご容赦ください。
当サイトの左上にあるカテゴリの表示はツリー型になっておりますが、これはseesaaブログのデフォルト設定でも、どこぞのテンプレートを使用したわけでもありません。 Lc.ツリーカテゴリー(for Seesaa)の配布元サイト ツリー型表示させたくて館主が色々と探していた中で..
電子館の庭【2008/12/03 07:58】

【PR】蚊で眠れないならおすだけベープ クリスタ  ←効果とコスパが優秀な一品。



サイドメニュー ×
メニューA  メニューB

お知らせ ×

ここは、雑記的なブログです。
重要な情報は、別のブログにて。


ちょっと目立つ広告 ×
マウスコンピューター
全体的に割安価格のパソコン通販

DMM mobile
スマホの月額料金を大幅に安く

楽天市場
見るだけでも楽しいですね

情報提供・・・ ×

保証もサポートもしない方針ですが、
情報提供は、するつもりですよ。
このブログとかで、ね。

質問等は歓迎していますが、
承認率や返答率は低めです。
そっけない返事も多いです。


カレンダー ×
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Lc.ツリーコメント ×

Lc.ツリーリンク ×

絵板のマナー 利用者編 ×

お勧めマナーサイト ×

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。