Lc-Factory/雑記
リリースしたテンプレート&プラグインについての雑記です。(by ルード@管理人)

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


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

お勧めマナーサイトS ×
...
    お勧め by 絵板のマナー講座

Lc.ワードハイライト ×

ブログ内検索 ×

ブログ全記事表示 ×

全ての記事を表示する


Lc.ツリータグリスト ×

FC2カウンター ×

RSSフィード ×

Memo ×

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

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


Powered By FC2ブログ ×

Powered By FC2ブログ
ブログやるならFC2ブログ


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

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

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%;}みたいに。



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


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

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




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

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

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



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

カテゴリー番号*の子には、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_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の値を変更すると、全角空白以外に変更できますよ。





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

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

いつも利用させてもらってます。
自分はHTMLのことがよくわからないので質問なのですが

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

 ├ └   ←を画像に置き換える方法ってどうすればよいのでしょうか?
【2007/12/06 23:30】 URL | クーガー #yOCm9u.6 [ 編集]

軽いメモですが、答えです。
今回は、少し情報を出しておきます。
軽いメモですが、これで分からなければ、あきらめましょう。

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

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

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

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


取り敢えず、今はこれ以上説明する気はありません。
私は「自力で手に負えないなら、カスタマイズすべきでない」という考えです。
【2007/12/07 01:19】 URL | ルード@管理人 #qAnK3npI [ 編集]


ありがとうございます。
たぶんそこをいじるのだとは思ってたんですが
どう変えればいいのかわからなくて助かりました

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

お役に立ったのなら。
ざっと書いたメモでしたが、お役に立ったのなら幸いです。

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

【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 | ルード@管理人 #qAnK3npI [ 編集]


いつも利用させてもらってます。
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 | らび #SFo5/nok [ 編集]

+−の画像化は・・・
+−の画像化は・・・ちょっと面倒です。
自分で手段の分かる人以外は、手出しすべきではないと思いますよ。
JavaScriptに詳しければ、そう難しくもない気はしますけど。

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

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

将来的には、バージョンアップで画像に対応する可能性も・・・ないとは言いません。
【2007/12/14 00:58】 URL | ルード@管理人 #qAnK3npI [ 編集]


ありがとうございます。
おっしゃることはなんとなくわかるのですが、具体的にどこをどうすればよいというのがサッパリわかりません。
まずはスクリプトを勉強して、それから再度挑戦してみます。

それでは、今回は親切に回答いただきありがとうございました。
【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 | ルード@管理人 #qAnK3npI [ 編集]


この記事に対するコメントの投稿


(←基本的には不要)


 ・承認済みのコメントのみ表示です。
 ・承認率も返答率も、低いですよ。
 ・たまに整理で消すことも・・・。









管理者にだけ表示を許可する(原則、返答なし)


この記事に対するトラックバック
トラックバックURL
http://lctreetz.blog69.fc2.com/tb.php/171-2e46244f
この記事にトラックバックする(FC2ブログユーザー)
承認率は非常に低いですし、たまに削除もします。ご容赦ください。


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

お知らせ ×

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


情報提供・・・ ×

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

質問とかには、あまり答えませんが、
たまに答えることもあります。


カレンダー ×
06 | 2008/07 | 08
- - 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 - -

お勧めマナーサイト ×
...
    お勧め by 絵板のマナー講座

絵板のマナー 利用者編 ×
...
...
... ... by 絵板のマナー講座

Lc.ツリーコメント ×

Lc.タグクラウド ×