忍者ブログ
つれづれプーペ
つれづれプーペ
こっそり綴っているプーペブログです。スキンが崩れている際はお手数ですがキャッシュの削除をお願いします。
[1326]  [1328]  [1325]  [1324]  [1323]  [1296]  [1322]  [1321]  [1320]  [1319]  [1318
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

カテゴリーとブックマークのプラグインを、Lc-Factory@忍者ブログさんの記事を参考にツリー化しました。

Lc-Factoryさんの忍者ブログ版ではカテゴリー、リンク、コメント、トラックバックのツリー化プラグインを配布されています。
FC2版とseesaa版でもツリー用ソースを配布されていらっしゃって、本ブログのFC2版はかなりプラグインが充実しています。

Lc-Factoryさんの各ブログリンクはこちらLc-Factory@忍者ブログ
Lc.ツリーカテゴリー(for shinobi)を配布です。
Lc.ツリーリンク(for shinobi)を配布です。
Lc.ツリーコメント(for 忍者)を配布です。

Lc-Factory/雑記
Lc-Factory@FC2ブログ
Lc-Factory@Seesaa

雑記とFC2版には使い方も書かれています。



<特徴>
こちらの特徴は、書き込む場所がほぼプラグインhtmlで済むということだと思います。細かい調節はスタイルシートに書き込む必要がありますが(行間とか)、純粋なツリー化だけだったらプラグインのみでOK。

記事ではフリープラグインに書き込むように紹介されていますが、カテゴリーやリンクのプラグインに書き込んでも働きました。
私は容量の問題(忍者ブログは各プラグインには10KBの容量が定められています)で、カテゴリーやリンクの方に書き込んで使用しています。(以下の使い方の記述も全てそちらに準じています)



<使い方>
*前置き*
書き込んでいる箇所がフリープラグインではないことをご了承ください。(ツリーカテゴリーならカテゴリープラグインに、ツリーリンクならリンクプラグインに書き込んでいます)

基本の使い方例:以下のような↓見た目のツリーカテゴリーを作りたい場合

【生物】
├動物
│├柴KEN
│└ピヨ
└植物

1)カテゴリー「表示設定」の「プラグインHTMLの変更」に、ツリープラグインのソースを上書きする
2)「カテゴリーの編集ページ」で、カテゴリー名を以下のように記述する
「【生物】 動物 柴KEN」
「【生物】 動物 ピヨ」
「【生物】 植物」

ツリー化自体はこれだけで完了です。
(初期設定では、ツリー化するための記号が全角スペースになっていますのでこういう形になりますが、例えば記号を「*」に変える場合は「【生物】*動物*柴KEN」とすればOKです)


補足:「表示設定」「その他」の説明Lc-Factoryさんのツリー化プラグインは、「// ■表示設定です。」~「// ■その他」の、「=」と「;」の間をいじればほぼ整います。
とりあえず試してみれば大体分かると思います。

・true/falseの箇所は、試して好きなほうを選ぶ。
・true/false以外の部分の「=」と「;」にはさまれている部分は、記号の指定。好きな記号に変えてみる。(半角/全角スペースも使用可、アイコンも使用可能。アイコンはimgタグで指定する)
・「'_blank';」はリンクを開くときに、今の画面ではなく新たにタブを開くという意味。
・はじめからオープンにしておきたくないグループは、グループ名の頭に「.」をつければそこだけクローズ状態になる。(「.管理用 管理画面トップ」というような感じ)


Lc.factoryさんのFC2ブログの方のこちらの記事で基本の使い方の説明をされています。
プラグイン「Lc.ツリーカテゴリー」
プラグイン「Lc.ツリーリンク」
プラグイン「Lc.ツリーコメント」
忍者版とはやや違う点もありますが、使い方はほぼ一緒です。忍者版にはない機能もあるので働かない場合も。

Lc.factoryさんは設置のサポートはされていませんが、詳しい使い方は
Lc-Factory/雑記
Lc-Factory@FC2ブログ
こちらにほとんど載っています。ブログ内検索などで該当記事を探してみてください。

スタイルシート設定の記事はこちらを参照
Lc.ツリーカテゴリーの、CSS設定について(その1)



<使い方色々>
*前置き*
書き込んでいる箇所がフリープラグインではないことをご了承ください。
同じことをやろうとしている方の参考になればいいなと思っています。


 IEで見たときに親の部分がずれる不具合

つれづれプーペ左寄せに設定しているはずが、IE(ver.7~9で確認)で見たときのみ、右の画像のように親の部分が右にずれて表示される不具合が生じる場合があります。(IE以外のブラウザでは異常なし)

これは、ブログ内検索のボックスに指定しているclass(box)と、LCツリーの親の先頭についているツリーの開け閉めをする用の□に指定しているclass(カテゴリーツリーならLC_CAT .box)がIEでのみ競合してしまっているためのようです。
ブログ内検索のボックスのwidthを指定した場合に不具合が生じます。


対策まず、ブログ内検索のボックスのclassを書き換えます。
「プラグインの設定」>ブログ内検索「表示設定」>「プラグインHTMLの変更」の
<input type="text" name="search" value="" class="box">
の部分を
<input type="text" name="search" value="" class="searchbox">
に変更。


次に、「テンプレートの設定」>「CSS編集」の、検索ボックス用デザイン(.boxの記述です)の部分を探して
.box{
margin:3px 5px px px ;
padding:0 0 1px 0;/*box size*/
font-size: 13px;
width: 170px;
float:left;
}
.boxのセレクタを
.searchbox{
margin:3px 5px px px ;
padding:0 0 1px 0;/*box size*/
font-size: 13px;
width: 170px;
float:left;
}
上で指定したclass値に書き換えます。
IE以外のブラウザでは見た目に変化はありません。
また、{}の数値は私のテンプレートのものなので、変える必要はありません。


 リンクのプラグインにバナーを貼る
リンクサイトにバナー画像を貼れるのが忍者ブログの特色のひとつなのですが(リンクの編集から設定が行えます)、ただバナーを設定するだけだと、サイト名のすぐ隣にバナーが貼られるために縦が揃わない&行間が空きすぎて見栄えが悪くなります。

そこで、画像の位置を揃えたいという場合、左寄せするとツリー化できなくなるので(左に親がくる関係上)、右に置くことになります。

バナーを右寄せし、バナーサイズを縮小表示するLc.ツリーリンクのソースのこの部分(ページ内検索で見つけてね)に
<script language="JavaScript">
<!--
{
lc_lnk_registLink("<!--$plugin_link_title--><!--if_link_img--><img src='<!--$plugin_link_img_link-->' border='0'><!--/if_link_img-->", "<!--$plugin_link_link-->", lc_lnk_pureCount++);
}
//-->

以下の赤字の部分を書き加える
<script language="JavaScript">
<!--
{
lc_lnk_registLink("<!--$plugin_link_title--><!--if_link_img--><img src='<!--$plugin_link_img_link-->' style='float:right; position:relative;' height='19px' ><!--/if_link_img-->", "<!--$plugin_link_link-->", lc_lnk_pureCount++);
}
//-->
</script>

と、画像が右寄せ&縮小表示されます。(行間が空くのが気にならなければheightの部分は削除します。数値はお好みで適宜変えてください)
(11/20追記)「ブログ環境設定」>「ブログ表示の設定」>「リンク画像設定」で最大幅を設定したほうが数値が変えやすいかも(追記ここまで)


この時点では右寄せされた画像が揃ってないかと思われます。
そこで、「テンプレートの設定」>「CSS編集」に、以下を書き込みます
/* ツリー化プラグイン 行間設定*/
#LC_LNK {
font-size: 13px;
line-height: 1.6%;
}
数値はテンプレートに合わせて適当に変更してください。




<感想>
設置が簡単ですし、かなりオススメ。一つのプラグインの容量が限られている点だけ注意が必要です。

一回設置してしまうと、追加で加えたリンクやカテゴリーの位置を入れ替えなくてもいいというのが非常に便利です。
(たとえば、 「プーぺガール ブログ」のツリーに「つれづれプーぺ」を加える場合、「プーペガール ブログ つれづれプーぺ」とタイトルを書いて一番最後に加えるだけで、該当ツリー部分の最後尾に移動しているように見えます。(ただしJavaScriptをONにしている場合のみ)
JavaScriptを切っている場合は元の並び順のままですし、表示自体も滅茶苦茶になってしまうことがありますが、(カテゴリーの方は特に異常ありませんが、ブックマークの方はなんだかすごいことに・・・)JavaScript切っている方は5%くらいだという情報をどこかで見たのでまぁいいかなと勝手に判断させていただいています。




追記は10月頭現在の当ブログのツリーカテゴリーとツリーリンクのCSS。
参考になれば幸いです。
ツリーのソースはLc-Factoryさんの所からコピーしてくださいね。

<個人用CSS>
/* ツリーカテゴリ設定*/
#LC_CAT {/* ツリーカテゴリ全体の設定*/
font-size: 13px;
line-height: 1.1;
}
#LC_CAT .indent {/* ツリーカテゴリ「│」の設定*/
font-size:12pt;
}
#LC_CAT .branch {/* ツリーカテゴリ「├」「└」の設定*/
font-size:12pt;
margin:0px 8px 0 15px;
}
#LC_CAT .parent {/* ツリーカテゴリ親の設定*/
line-height: 1.4;/* 親の行間設定*/
vertical-align: -15pt;/* 親の上部に余白*/
}


/* ツリーリンク設定*/
#LC_LNK {/* ツリーリンク全体の設定*/
font-size: 12px;
line-height: 1;
}
#LC_LNK .indent {/* ツリーリンク「│」の設定*/
font-size:12pt;
}
#LC_LNK .branch {/* ツリーリンク「├」「└」の設定*/
font-size:12pt;
margin:0px 3px 0 2px;
}
#LC_LNK .parent {/* ツリーリンク親の行間設定*/
line-height: 1.65;
vertical-align: 25%;/* 文字縦位置調整*/
}
#LC_LNK .child {/* Lc.ツリーリンク 子設定(階層指定) */
font-size: 12px;
line-height: 1.8;
}



<個人用カテゴリープラグインhtml>(設定部分のみ)
/ ■表示設定(true/false)
var LC_CAT_PARENTBOLD = true; //親太字
var LC_CAT_DISPLAYNUM = true; //記事数表示
var LC_CAT_DECOLESS_PARENT = true; //親下線消
var LC_CAT_DECOLESS_CHILD = false; //子下線消
var LC_CAT_DYNAMIC_SIZE = false; //記事数で文字サイズ
var LC_CAT_PARENTBOX = false; //親の+をボックス表示

// ■その他
var LC_CAT_INDENTCHR = '|';
var LC_CAT_INDENTCHR_GROUP = '├';
var LC_CAT_TOOPEN = 'ツリーを開く';
var LC_CAT_TOCLOSE = 'ツリーを閉じる';
var LC_CAT_BOX_CLOSED = '';
var LC_CAT_BOX_OPENED = '';
var LC_CAT_BRANCH_CONNECT = '<img src="画像URL" width="11px" alt="アイコン" />';
var LC_CAT_BRANCH_EDGE= '<img src="画像URL" width="11px" alt="アイコン" />';
var LC_CAT_DEFAULT_OPENED = true;
var LC_CAT_GROUP_SEPARATOR = ' ';
var LC_CAT_CATEGORY_MARK = ""; //子の先頭文字

var LC_CAT_CREATOR_LINK = false;
var LC_CAT_IMAGEBASE = "http://file.<!--$g_user_id-->/";



<個人用リンクプラグインhtml>(設定部分のみ)
// ■表示設定です。true/false
var LC_LNK_PARENTBOLD = true; //親項目太字
var LC_LNK_DECOLESS_PARENT = true; //親の下線消し
var LC_LNK_DECOLESS_CHILD = false; //子の下線消し
var LC_LNK_PARENTBOX = false; //親の+などをボックス表示

// ■その他
var LC_LNK_INDENTCHR = ' ';
var LC_LNK_INDENTCHR_GROUP = '  <img src="画像URL" width="19px" alt="アイコン" /> ';
var LC_LNK_TOOPEN = 'ツリーを開く';
var LC_LNK_TOCLOSE = 'ツリーを閉じる';
var LC_LNK_BOX_CLOSED = '';
var LC_LNK_BOX_OPENED = '';
var LC_LNK_BRANCH_CONNECT = ' <img src="画像URL" width="9px" alt="アイコン" />';
var LC_LNK_BRANCH_EDGE= ' <img src="画像URL" width="9px" alt="アイコン" />';
var LC_LNK_DEFAULT_OPENED = true;
var LC_LNK_GROUP_SEPARATOR = " ";
var LC_LNK_LINK_MARK = " ";

var LC_LNK_LINK_TARGET = '_blank';
var LC_LNK_CREATOR_LINK = false;

IE8~9、OSⅩのfirefoxとsafariで動作確認済。


画像が一列に並ばないという場合は、行間(line-height)を広げるか、画像の大きさを小さく表示するように設定してください。

BRANCHの部分を、初期設定の「├」「└」のまま、罫線の隙間を埋める場合は、
1)CSSの#LC_CAT (リンクだったらLNK)のfont-sizeとline-heightで全体のフォントサイズと行間設定をし、
2)#LC_CAT .indent (ツリーカテゴリ「│」の設定:空欄にしている場合は不要)と、#LC_CAT .branch (ツリーカテゴリ「├」「└」の設定)のfont-sizeを大きく設定してください。
ただMacで見たときに、「├」と「└」がずれて表示されてしまうようです。
Thank you for your message !
name
title
URL
comment
passward   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
*パスワード無記入の場合、コメントの編集が出来ません。 
Recommend
アイコン イベント背景情報
・バレンタインイベント
アイコン 購入録・着回し
------

アイコン about アイコン
・コメント&リンクについて
・このブログについて

*1/24ブログテンプレートの更新をしました。
表示が正常でない際はお手数ですがキャッシュの削除をお願いします。
Search
About this site
Auther: こやま

プーペガールをつれづれなるままに楽しむいちユーザーの個人ブログです。
ファッションブランドコミュニティ「プーペガール」

画像の移転が完了していないので(古い記事から順次差し替え中)、過去の着画をご覧になりたい方はお手数ですが【旧つれづれプーペ】を参照願います。

ご意見・ご要望・相互リンクのご希望などはブログのコメントにてお気軽にご連絡ください♪
(プーペのメッセージでの返事は非常に遅いので、返事を期待しないでいただけるとありがたいです)
Categories
Staff blog infomation
*特別な記載がない限り期限は11:00まで
3/13更新

NEWS  

<J購入アイテム・キャッチャー交換所>
アイテム切り替え 〜4/1(月)

<卒業旅行イベント>
☆背景~3/18(月)

<お知らせ>
☆VDチョコ開封 3/14(木)12:00


撤去日メモ

キャサリンショップ
03/25 ウィンタースポーツ
03/25 なつかしアイテム
04/04 卒業アイテム
05/01 デートアイテム
05/20 ネオン&モノトーン
05/21 6周年イベント
05/21 ウィッグ
05/21 紙ふぶきエフェクト
05/21 6周年コスメ単品
05/21 壁紙・床セット-6周年
06/06 ゆったりカジュアルアイテム
06/10 卒業旅行イベント


Jキャッチャー
03/18 ノルディック柄
03/25 フィギュアスケート
04/01 ホワイトマカロン
04/01 ひなまつり
05/15 ヴィンテージガール
06/12 南米カーニバル

Rキャッチャー
04/01 お菓子作りキャッチャー


解禁日予想
個人の予想ですので目安程度にお考えください

キャサショ
02/21?トラッドアイテム
02/25 お花と高原アイテム
02/28 秋の散策イベント(追加2日)
03/06 ニット&ファーアイテム
03/17?リメイクアウター福袋
03/23 ハロウィン(追加24日)
03/25 ドールBOX
04/02 リッチヨーロピアン
04/10 ロカビリー
04/17 カントリー(追加20日)
05/04 ブラッククラシカルロリータ
05/08 Rクリスマス靴下
05/15 クリスマスイベント(追加18日)
05/21 Jクリスマス靴下
05/28 正月(追加29日)
06/11?福袋
06/24 ウィンタースポーツ(追加26日)
07/02 デートアイテム
07/09 バレンタイン(追加13日)
07/19 ネオン&モノトーン
07/21 なつかしアイテム第一弾(Jりす)
07/22 なつかしアイテム第二段(Rうさくま)
07/22 6周年イベント(追加23・26・27日)
07/23 なつかしアイテム第三弾(Jねこ)
07/26 なつかしアイテム第四弾(Rねこうさ)
08/05 卒業アイテム(追加6日) 08/07 ゆったりカジュアルアイテム(追加8・9日)
08/09 卒業旅行イベント(追加12・13・14日)


Jキャッチャー
01/31?ドレッシーモノトーン
02/08 復刻キャッチャー
02/28?くま五郎
03/11 フォークロア
03/25 ヴァンパイアキャッチャー
04/06 ブリティッシュ
04/17 テディベア
05/20 リサとガスパール
05/29 和ロリ
06/19 ノルディック柄
06/26 フィギュアスケート
07/13 ホワイトマカロン
07/16 ヴィンテージガール
08/02 ひなまつり
08/13 南米カーニバル


スタッフブログ新着記事

プーペガールスタッフブログ
Bookmarks

Bookmark更新情報
Archives

07 2017/08 09
S M T W T F S
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
Blogparts


PR
『プーペガール』及び『Poupee girl』は、株式会社プーペガールの商標です。
プーペガールに関わる著作権・その他一切の知的財産権等は、株式会社プーペガールに属します。
このサイトは、プーペガール及び株式会社プーペガールとは一切関係のない非公式サイトです。
Copyright ©poupeegirl, Inc.
つれづれプーペ All Rights Reserved.




Powered by NinjaBlog   忍者ブログ [PR]