プラグインエリア表示への道 おさらい
１ヶ月近く下らんネタをよう引っ張りましたなぁ。や、まだ半分までしか終わってないんだけど、ひとまずここで休憩にします。長々と書いてきたのでワタシのカテゴリーツリー化開閉付き＠プラグインエリアについてまとめておきます。
1)ツリー化外部スクリプトを適当なトコにコピーする。
ツリー化スクリプトは⇒コレ
2)プラグインを一旦ローカルにコピーする。
先日のソース⇒コレ
※その後、修正しました。
3)必要な設定値を変更する。
カテゴリー名、上位カテゴリー名、チップテキスト等、お好きに。画像、ツリーテキストもお好きにドーゾ。ツリーテキストはimgタグ使う事も出来ると思うけど、表示がずれるかも知れませぬ。
4)管理画面左メニュー「環境設定」の中の「プラグインの設定」を選択。
5)「プラグインの追加」（公式）をクリックし、「フリーエリア」を追加する。
6)追加した「フリーエリア」の「設定の変更」をクリックする。
7)「ｈｔｍｌを編集する」をクリックする。タイトルを変えておきたいのならクリックする前にこの画面でタイトルを変えておくのが吉。
8)「[フリーエリア]のＨＴＭＬの編集」内のｈｔｍｌを消去し、3)で設定値をプラグインをコピペする。
これで現在表示されているようなツリー表示が可能となるハズ。ｆｃ２内ならカテゴリー情報の設定を変更すればドコでも使えるのではないかと思うので、使いたいなんていう奇特なヒトがいたらドウゾ。あ、画像・スクリプトは基本的にご自分のエリアに保管して下さいませ。ウチのを使う場合はご一報下さい。
それからワタシ、あくまで素人ですのでサポートの類はあまり期待されませぬよう。って、誰も期待してないか(^^;
いやいや、結構長持ちさせましたな、このネタ。一覧性向上のために始めたツリー化はとりあえず完成。結構書くの疲れるんだよな(^^;
[プラグインエリア表示への道 おさらい]の続きを読む
1)ツリー化外部スクリプトを適当なトコにコピーする。
ツリー化スクリプトは⇒コレ
2)プラグインを一旦ローカルにコピーする。
先日のソース⇒コレ
※その後、修正しました。
3)必要な設定値を変更する。
カテゴリー名、上位カテゴリー名、チップテキスト等、お好きに。画像、ツリーテキストもお好きにドーゾ。ツリーテキストはimgタグ使う事も出来ると思うけど、表示がずれるかも知れませぬ。
4)管理画面左メニュー「環境設定」の中の「プラグインの設定」を選択。
5)「プラグインの追加」（公式）をクリックし、「フリーエリア」を追加する。
6)追加した「フリーエリア」の「設定の変更」をクリックする。
7)「ｈｔｍｌを編集する」をクリックする。タイトルを変えておきたいのならクリックする前にこの画面でタイトルを変えておくのが吉。
8)「[フリーエリア]のＨＴＭＬの編集」内のｈｔｍｌを消去し、3)で設定値をプラグインをコピペする。
これで現在表示されているようなツリー表示が可能となるハズ。ｆｃ２内ならカテゴリー情報の設定を変更すればドコでも使えるのではないかと思うので、使いたいなんていう奇特なヒトがいたらドウゾ。あ、画像・スクリプトは基本的にご自分のエリアに保管して下さいませ。ウチのを使う場合はご一報下さい。
それからワタシ、あくまで素人ですのでサポートの類はあまり期待されませぬよう。って、誰も期待してないか(^^;
いやいや、結構長持ちさせましたな、このネタ。一覧性向上のために始めたツリー化はとりあえず完成。結構書くの疲れるんだよな(^^;
[プラグインエリア表示への道 おさらい]の続きを読む
テーマ:ブログのカスタマイズbyド素人 - ジャンル:コンピュータ
プラグインエリア表示への道 ひとまず一段落
長いタイトルだなぁ(^^;
修正も何とか終わりました。簡単に出来るかと思ってたけど、変数名の変更がややこしかったり、開閉画像変更ロジックでコケたりしながらも何とか動くようになった。
手間がかかった開閉画像変更ロジックだけど、画像名（ｏｒ開閉テキスト）を渡そうと思ったわけ。や、渡せるんですよ、ちゃんと。ところが中で画像名をreplaceしているんですな。そうするとJavaScriptでテキストベタ渡ししているんで、このテキストまで変わっちゃう。
なんてJavaScriptを設定しておいたら、クリックされると"minus.gif"を"plus.gif"に変えるワケで、
となり、以後二度と画像が変わらなくなるワケ。悩みましたが面倒なので広域変数化して誤魔化してしまいました(^^;
そんなこんなで
外部スクリプト⇒ココ
プラグイン部分のｈｔｍｌ⇒ココ
に置いてあります。現在の右側メニューのカテゴリーはコレを使ってツリー化してます。あ、前にも書いたけどJavaScript無効にしてたら通常表示です。それからWindoes版IE6とFireFox1.5では動作確認済み。マックな方、表示が変ならご指摘頂ければ有り難いです。って、ナニ出来るワケでもないんだけどサ(^^;
ちと長々書きすぎたんで、次回おさらいします。
[プラグインエリア表示への道 ひとまず一段落]の続きを読む
修正も何とか終わりました。簡単に出来るかと思ってたけど、変数名の変更がややこしかったり、開閉画像変更ロジックでコケたりしながらも何とか動くようになった。
手間がかかった開閉画像変更ロジックだけど、画像名（ｏｒ開閉テキスト）を渡そうと思ったわけ。や、渡せるんですよ、ちゃんと。ところが中で画像名をreplaceしているんですな。そうするとJavaScriptでテキストベタ渡ししているんで、このテキストまで変わっちゃう。
<a href=javascript:m_Click_change("bz_category","3","plus.gif","minus.gif")><img src="http://blog-imgs-27.fc2.com/b/o/s/boseskinhead/minus.gif" border="0"></a> 鐵道愛好</div></li>なんてJavaScriptを設定しておいたら、クリックされると"minus.gif"を"plus.gif"に変えるワケで、
<a href=javascript:m_Click_change("bz_category","3","plus.gif","plus.gif")><img src="http://blog-imgs-27.fc2.com/b/o/s/boseskinhead/plus.gif" border="0"></a> 鐵道愛好</div></li>となり、以後二度と画像が変わらなくなるワケ。悩みましたが面倒なので広域変数化して誤魔化してしまいました(^^;
そんなこんなで
外部スクリプト⇒ココ
プラグイン部分のｈｔｍｌ⇒ココ
に置いてあります。現在の右側メニューのカテゴリーはコレを使ってツリー化してます。あ、前にも書いたけどJavaScript無効にしてたら通常表示です。それからWindoes版IE6とFireFox1.5では動作確認済み。マックな方、表示が変ならご指摘頂ければ有り難いです。って、ナニ出来るワケでもないんだけどサ(^^;
ちと長々書きすぎたんで、次回おさらいします。
[プラグインエリア表示への道 ひとまず一段落]の続きを読む
プラグインエリア表示への道 寄り道(ツリー化考察)
一覧性を上げるための一つの方策としてツリー化に取り組んできたのだが、ハタと気が付いた。これを書いている０６年４月現在、コメント表示にツリー化して表示させる共有プラグインを使っているワケです。コッチはコッチで独自のツリー化ロジックを持っている....１つのブログに２つのツリー化ロジックがあるというのは無駄ですな。更に、元々の発想である全エントリー取得してメニューっぽく表示させる部分でもツリー化ロジックは必要となるワケ。そうなると３つ、ヘタすると４つ５つと更に増える可能性だってあるワケ。
そもそもツリー化をしようと思ったのは「ツリー化スクリプト」なるものの存在を知ったからであって、コレは汎用性を持たせてlivedoorだろうが他のブログだろうが使われているワケです。ワタシの場合、素人のマスターベーションであるからしてそんなに汎用性を持たせる必要は無いとしても、自分のブログの中で使いまわせる位にはすべきですな。単独のｈｔｍｌで試してるんだから、更にｈｔｍｌ版ＨＰのメニューにだって使えるように出来るハズ。
そんな想いで先日のソースを見直して見ると、多少の変更で汎用性を持たせられそうなコトが判ってきた。
先日のソースは大まかに言うと以下の５つのブロックがある。
１．設定情報を配列にセットする。
２．ブログ情報を配列にセットする。
３．上記２つの配列を１つにまとめる。
４．まとめた配列をツリー化表示する。
５．ツリー化された表示を開閉するサブルーチン。
１〜３は実現したいコトによって別の動きとなるが、４と５は基本的に同じコトをやってるワケです。ならばこの部分を汎用ロジックとし、フロントエンド部分で配列を作ってやればいいコトになるかと。
カテゴリーツリー化で使った配列を今一度見直して見ると、その要素は
・name カテゴリー名
・top_category 上位カテゴリー名
・init_disp 初期表示状態（折りたたむか否か）
・text ツールチップテキスト
・sort_method ソート方法（時間順／エントリタイトルのコード順）
・number 一覧表示するエントリー数
・enumber カテゴリーが持っている全エントリー数
・url カテゴリーのｕｒｌ
こんな感じ。で、ツリー化ロジックはこの配列を受け取って
(-)top_category
├name
└name
(*)name
(-)top_category
├name
├name
└name
こんな感じにツリー化しているワケ。nameの代わりに投稿者、top_categoryの代わりに対象エントリーを入れればコメントリストに、nameの代わりにＴＢ元、top_categoryの代わりに対象エントリーを入れればＴＢリストになるのは明白ですな。勿論、nameの代わりに下位メニュー、top_categoryの代わりに上位メニューを入れればｈｔｍｌ版ＨＰのメニューにも使える。現在は(-)や(*)、├や└は広域変数化しているので、これを個々に渡すようにするとモノによって見た目を変えるコトも出来る、ってかｈｔｍｌでも使う気なら値渡しにした方がいいコトは明白ですな。どうせなら配列の要素名も変え、外部スクリプト化するのがフツーのやり方だと思う。って、フツーそうするから「ツリー化スクリプト」があるんでしょうけど。
ってなワケで現在ゴリゴリ修正中。さて、明日ネタに出来るかな？(^^;
そもそもツリー化をしようと思ったのは「ツリー化スクリプト」なるものの存在を知ったからであって、コレは汎用性を持たせてlivedoorだろうが他のブログだろうが使われているワケです。ワタシの場合、素人のマスターベーションであるからしてそんなに汎用性を持たせる必要は無いとしても、自分のブログの中で使いまわせる位にはすべきですな。単独のｈｔｍｌで試してるんだから、更にｈｔｍｌ版ＨＰのメニューにだって使えるように出来るハズ。
そんな想いで先日のソースを見直して見ると、多少の変更で汎用性を持たせられそうなコトが判ってきた。
先日のソースは大まかに言うと以下の５つのブロックがある。
１．設定情報を配列にセットする。
２．ブログ情報を配列にセットする。
３．上記２つの配列を１つにまとめる。
４．まとめた配列をツリー化表示する。
５．ツリー化された表示を開閉するサブルーチン。
１〜３は実現したいコトによって別の動きとなるが、４と５は基本的に同じコトをやってるワケです。ならばこの部分を汎用ロジックとし、フロントエンド部分で配列を作ってやればいいコトになるかと。
カテゴリーツリー化で使った配列を今一度見直して見ると、その要素は
・name カテゴリー名
・top_category 上位カテゴリー名
・init_disp 初期表示状態（折りたたむか否か）
・text ツールチップテキスト
・sort_method ソート方法（時間順／エントリタイトルのコード順）
・number 一覧表示するエントリー数
・enumber カテゴリーが持っている全エントリー数
・url カテゴリーのｕｒｌ
こんな感じ。で、ツリー化ロジックはこの配列を受け取って
(-)top_category
├name
└name
(*)name
(-)top_category
├name
├name
└name
こんな感じにツリー化しているワケ。nameの代わりに投稿者、top_categoryの代わりに対象エントリーを入れればコメントリストに、nameの代わりにＴＢ元、top_categoryの代わりに対象エントリーを入れればＴＢリストになるのは明白ですな。勿論、nameの代わりに下位メニュー、top_categoryの代わりに上位メニューを入れればｈｔｍｌ版ＨＰのメニューにも使える。現在は(-)や(*)、├や└は広域変数化しているので、これを個々に渡すようにするとモノによって見た目を変えるコトも出来る、ってかｈｔｍｌでも使う気なら値渡しにした方がいいコトは明白ですな。どうせなら配列の要素名も変え、外部スクリプト化するのがフツーのやり方だと思う。って、フツーそうするから「ツリー化スクリプト」があるんでしょうけど。
ってなワケで現在ゴリゴリ修正中。さて、明日ネタに出来るかな？(^^;
プラグインエリア表示への道 その３
昨日までで１つのｈｔｍｌファイル内でのＪａｖａＳｃｒｉｐｔ動作とプラグインの動作の確認が出来た。というワケで、この２つを合体させて完成させられるワケ。早速足してプラグインのｈｔｍｌに挿入してみると....ＩＥでは思った通りの動きになっているがＦｉｒｅｆｏｘでは下位のカテゴリーが改行されずに表示されている。</br>入れてるんだけどなぁ....１つのｈｔｍｌファイルとしてはちゃんと動いたはずなのだが、ｃｓｓの何かとぶつかってるんでしょうなぁ。ｃｓｓ側をいじくるのも一つのやり方なのだが、どこかに不具合が出てくる可能性もあるし、今後ブログデザインを変えないとも限らない。ここはプラグイン側で対処するのが正解でしょう。
というわけで、下位のカテゴリーは<dd>タグで囲い、左にインデントさせるクラスを作って指定するというテキトーな対処をしてみた。ま、<dl>使ってるんだから<dd>使うのがアタリマエなのかも知れないし、もっと上手いやり方があるのかも知れないがソレはソレ(^^;
あと、ＪａｖａＳｃｒｉｐｔを有効にしていないと表示されないのは問題、というワケで一応<noscript>で標準のカテゴリ表示も加えておきますか。うむ、ＪａｖａＳｃｒｉｐｔ無効の方にとってはクダらん能書きが半月以上続いたワケだ(^^;
まいっか、最終的なソースはこんなカンジになります。
現在右側に表示されているのがコレであります。ふむ、まぁいいんでないかな。ひとまずプラグインエリアへの表示はこれで完成かな....と思いきや、また下らんコトが頭を過る....
ってなワケで、まだ続く(^^;
というわけで、下位のカテゴリーは<dd>タグで囲い、左にインデントさせるクラスを作って指定するというテキトーな対処をしてみた。ま、<dl>使ってるんだから<dd>使うのがアタリマエなのかも知れないし、もっと上手いやり方があるのかも知れないがソレはソレ(^^;
あと、ＪａｖａＳｃｒｉｐｔを有効にしていないと表示されないのは問題、というワケで一応<noscript>で標準のカテゴリ表示も加えておきますか。うむ、ＪａｖａＳｃｒｉｐｔ無効の方にとってはクダらん能書きが半月以上続いたワケだ(^^;
まいっか、最終的なソースはこんなカンジになります。
| <style> ul.tree_cate{ list-style-type : none; list-style-position : outside; } dd.tree_cate{ text-indent :-3em; } ul.tree_cate a{ text-decoration : none; } </style> <script language="JavaScript" type="text/javascript"> <!-- var o = new Array(); //オリジナルのカテゴリー情報 var p = new Array(); //設定したカテゴリー情報 //================================================================= //カテゴリーの動作設定 //第一引数：name カテゴリー名 //第二引数：t_category 上位カテゴリー名 //第三引数：int_disp 初期表示状態;上位カテゴリの最初のものだけ有効 S:表示、H:非表示 //第四引数：text 説明 //第五引数：s_m ソート方法(省略時はN) // O:古い順、N:新しい順、C:エントリタイトルのコード順昇順、D:降順 //第六引数：number 表示エントリ数 省略時は10 //================================================================= p.push( new Category("正統派天幕生活" ,"活動記","S","正しいキャンプネタ","O",20)); p.push( new Category("自力系顛末記" ,"活動記","S","くだらん自力系" ,"O",20)); p.push( new Category("外道伝" ,"活動記","S","何かやりました(^^;","O",20)); p.push( new Category("野外系品評会" ,"道具箱","S","無駄遣い？")); p.push( new Category("贋自転車愛好者" ,"道具箱","S","自転車系")); p.push( new Category("興味本位珍評" ,"道具箱","S","いろいろ")); p.push( new Category("ＪＲ通勤型" ,"鐵道愛好","H","","C",20)); p.push( new Category("ＪＲ近郊型" ,"鐵道愛好","H","","C",20)); p.push( new Category("ＪＲ特急型" ,"鐵道愛好","H","含急行型","C",20)); p.push( new Category("私鉄等車輌" ,"鐵道愛好","H","","C")); p.push( new Category("鐵道" ,"寫眞展","H","ヘタクソ","")); p.push( new Category("日常" ,"寫眞展","H","ナニ撮ってるの？")); p.push( new Category("道具愛好癖" ,"戯言","H","隣に物欲大魔王(^^;","",5)); p.push( new Category("鐵道趣味独白" ,"戯言","H","乗り鉄撮り鉄","",5)); p.push( new Category("電脳日記改造" ,"戯言","H","カスタマイズ？","",5)); p.push( new Category("一覧性創生時" ,"戯言","H","カテゴリー階層化など....","",5)); p.push( new Category("日常的出来事" ,"戯言","H","雑言ですよ(^^;","",5)); //================================================================= //開閉ボタン関係の指定 // open_char 開状態の文字 // close_char 閉状態の文字 // hold_char 動作不能(サブカテゴリが無い場合)の文字 //================================================================= //簡易テキスト表示の場合 // var open_char = "(-)"; // var close_char = "(+)"; // var hold_char = "(*)"; //画像表示の場合、<img>タグを指定 var open_char = '<img src="http://blog-imgs-27.fc2.com/b/o/s/boseskinhead/minus.gif" border="0">'; var close_char = '<img src="http://blog-imgs-27.fc2.com/b/o/s/boseskinhead/plus.gif" border="0">'; var hold_char = '<img src="http://blog-imgs-27.fc2.com/b/o/s/boseskinhead/hold.gif" border="0">'; //================================================================= //ツリーに使うテキスト //tree_cnt ツリーが続く場合のテキスト"├ "など //tree_end ツリーが終わる場合のテキスト"└ "など //================================================================= var tree_cnt = "├ "; var tree_end = "└ "; //以上が設定可能定数部分 //以下いじらなくていいはず var _open , _close , i , j; if(open_char.match( /<img/ ) != null){ //開いている時の画像以下の文字取得 for(i=0 ; i < open_char.length-1 ; i++){ j=open_char.indexOf("/",i); //iが最後の"/"を指している if(j == -1){ break; }else{ i=j; } } if(i == 0) i = open_char.indexOf("¥"",i) + 1; _open = open_char.substring( i, open_char.length - 1); j = _open.indexOf("¥"",0); _open = _open.substring( 0, j); //閉じている時の画像以下の文字取得 for(i=0 ; i < close_char.length-1 ; i++){ j=close_char.indexOf("/",i); //iが最後の"/"を指している if(j == -1){ break; }else{ i=j; } } if(i == 0) i = close_char.indexOf("¥"",i) + 1; _close = close_char.substring( i, close_char.length - 1); j = _close.indexOf("¥"",0); _close = _close.substring( 0, j); }else{ _open = open_char; _close = close_char; } //カテゴリー設定の配列化 function Category(name, t_category, disp_flag , txt, sort_method, number) { this.name = name; this.top_category = t_category; this.text = txt; if(disp_flag == "s" || disp_flag == "S"){ this.init_disp = "S"; }else{ this.init_disp = "H"; } if(sort_method == "" || sort_method == null){ this.s_m = "N"; }else{ this.s_m = sort_method.toUpperCase(); } //初期値=10 if(number == null){ this.number = 10; }else{ this.number = number; } } //オリジナルのカテゴリー情報を配列化 function get_o_cate( url, name, number ) { this.url = url; this.name = name; this.number = number; } //カテゴリー情報の追加 function add_cate() { for(var i=0;i < p.length;i++){ for(var j=0;j < o.length;j++){ if(p[i].name == o[j].name){ p[i].enumber = o[j].number; p[i].url=o[i].url; break; } } } } //ツリー風表示 開閉付き function S_top_category(l1,l2) { var top_c_num = 0; //上位カテゴリ数/番号 document.write("<ul class=¥"tree_cate¥" >"); for(var i = 0; i < p.length ; i++) { //上位カテゴリーが存在しない場合〜上位カテゴリーの位置に下位カテゴリーを表示 if(p[i].top_category == ""){ document.write("<li> ",hold_char," <a href=¥"",p[i].url,"¥" title=¥"" ,p[i].text,"¥">",p[i].name,"</a></li>"); //上位カテゴリーが存在するカテゴリーの場合 }else{ //上位カテゴリーの表示////////////////////////////////// //一番最初か、前のカテゴリーとは異なる上位カテゴリーの場合 if(i==0 || p[i].top_category != p[i-1].top_category){ //上位カテゴリー表示本体 document.write("<li><div id=¥"top_cat_menu" , top_c_num ,"¥">" , "<a href=javascript:cat_menuClick(", top_c_num,")>", open_char, "</a> ",p[i].top_category,"</div></li>"); //ここから上位カテゴリーが変わるので、下位カテゴリーのidを変える document.write("<dl><div id=¥"cat_menu",top_c_num,"¥">"); //下位カテゴリは表示されている状態、初期表示状態にする if(p[i].init_disp == "H") cat_menuClick(top_c_num); ++top_c_num; } //以上、上位カテゴリーの表示//////////////////////////// //下位カテゴリーの表示////////////////////////////////// //最後のカテゴリーでなく、次も同じ上位カテゴリーの場合〜続く if(i+1 != p.length && p[i].top_category == p[i+1].top_category){ document.write("<dd class=¥"tree_cate¥">",l1,"<a href=¥"",p[i].url, "¥" title=¥"",p[i].text,"¥">",p[i].name,"</a></dd>"); //最後のカテゴリーの場合〜終わり }else{ document.write("<dd class=¥"tree_cate¥">",l2,"<a href=¥"",p[i].url, "¥" title=¥"",p[i].text,"¥">",p[i].name,"</a></dd>"); document.write("</div></dl>"); } } } document.write("</ul>"); } //表示切替〜上位カテゴリ表示切替付き function cat_menuClick(cate_id) { var catediv = document.getElementById("cat_menu"+cate_id); var topcatdiv = document.getElementById("top_cat_menu"+cate_id); if( catediv != null && catediv.style.display == "none" ) { catediv.style.display = "block"; topcatdiv.innerHTML=topcatdiv.innerHTML.replace(_close,_open); } else { catediv.style.display = "none"; topcatdiv.innerHTML=topcatdiv.innerHTML.replace(_open,_close); } } <!--category--> o.push( new get_o_cate("<%category_link>" , "<%category_name>" , "<%category_count>")); <!--/category--> add_cate(); S_top_category(tree_cnt,tree_end); //--> </script> <noscript> <ul> <!--category--> <li &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li> <!--/category--> </ul> </noscript> |
現在右側に表示されているのがコレであります。ふむ、まぁいいんでないかな。ひとまずプラグインエリアへの表示はこれで完成かな....と思いきや、また下らんコトが頭を過る....
ってなワケで、まだ続く(^^;
テーマ:ブログのカスタマイズbyド素人 - ジャンル:コンピュータ
プラグインエリア表示への道 その２
昨日の結果を踏まえて、自前の配列に取得した情報に取得した情報を追加して１つの配列にし、これを表示させてみましよう。
取得した情報を入れた配列の要素を自前の配列に入れてやるだけ。あとから配列に要素を加えることもデータを追加する事も出来るし、単独のｈｔｍｌとプラグインで何も動きに差が無いという事がこれで確認出来るワケです。「フリーエリア」のｈｔｍｌはこんなカンジ。
で、表示させたイメージがこんなカンジ。
「単独のｈｔｍｌとプラグインで何も動きに差が無い」と書いたけど実は若干差があって、ｃｓｓで各タグの書式を設定していたりすると思わぬ表示をしたりする。この辺りはまた明日(^^;
取得した情報を入れた配列の要素を自前の配列に入れてやるだけ。あとから配列に要素を加えることもデータを追加する事も出来るし、単独のｈｔｍｌとプラグインで何も動きに差が無いという事がこれで確認出来るワケです。「フリーエリア」のｈｔｍｌはこんなカンジ。
| <script language="JavaScript" type="text/javascript"> <!-- var o = new Array(); //オリジナルのカテゴリー情報 var p = new Array(); //設定したカテゴリー情報 //================================================================= //カテゴリーの動作設定 //第一引数：name カテゴリー名 //第二引数：t_category 上位カテゴリー名 //第三引数：int_disp 初期表示状態;上位カテゴリの最初のものだけ有効 S:表示、H:非表示 //第四引数：text 説明 //第五引数：s_m ソート方法(省略時はN) // O:古い順、N:新しい順、C:エントリタイトルのコード順昇順、D:降順 //第六引数：number 表示エントリ数 省略時は10 //================================================================= p.push( new Category("正統派天幕生活" ,"活動記","S","正しいキャンプネタ","O",20)); p.push( new Category("自力系顛末記" ,"活動記","S","くだらん自力系" ,"O",20)); p.push( new Category("外道伝" ,"活動記","S","何かやりました(^^;","O",20)); p.push( new Category("野外系品評会" ,"道具箱","S","無駄遣い？")); p.push( new Category("贋自転車愛好者" ,"道具箱","S","自転車系")); p.push( new Category("興味本位珍評" ,"道具箱","S","いろいろ")); p.push( new Category("ＪＲ通勤型" ,"鐵道愛好","H","","C",20)); p.push( new Category("ＪＲ近郊型" ,"鐵道愛好","H","","C",20)); p.push( new Category("ＪＲ特急型" ,"鐵道愛好","H","含急行型","C",20)); p.push( new Category("私鉄等車輌" ,"鐵道愛好","H","","C")); p.push( new Category("鐵道" ,"寫眞展","H","ヘタクソ","")); p.push( new Category("日常" ,"寫眞展","H","ナニ撮ってるの？")); p.push( new Category("道具愛好癖" ,"戯言","H","隣に物欲大魔王(^^;","",5)); p.push( new Category("鐵道趣味独白" ,"戯言","H","乗り鉄撮り鉄","",5)); p.push( new Category("電脳日記改造" ,"戯言","H","カスタマイズ？","",5)); p.push( new Category("一覧性創生時" ,"戯言","H","カテゴリー階層化など....","",5)); p.push( new Category("日常的出来事" ,"戯言","H","雑言ですよ(^^;","",5)); //カテゴリー設定の配列化 function Category(name, t_category, disp_flag , txt, sort_method, number) { this.name = name; this.top_category = t_category; this.text = txt; if(disp_flag == "s" || disp_flag == "S"){ this.init_disp = "S"; }else{ this.init_disp = "H"; } if(sort_method == "" || sort_method == null){ this.s_m = "N"; }else{ this.s_m = sort_method.toUpperCase(); } //初期値=10 if(number == null){ this.number = 10; }else{ this.number = number; } } //オリジナルのカテゴリー情報を配列化 function get_o_cate( url, name, number ) { this.url = url; this.name = name; this.number = number; } //カテゴリー情報の追加と表示 function show_cate() { //情報追加 for(var i=0 ; i < p.length ; i++){ for(var j=0;j p[i].enumber = o[j].number; p[i].url=o[i].url; break; } } } //表示 for(i=0; i < o.length ; i++){ document.write(p[i].name,"(",p[i].enumber,")<br>"); } } <!--category--> o.push( new get_o_cate("<%category_link>" , "<%category_name>" , "<%category_count>")); <!--/category--> show_cate(); //--> </script> |
で、表示させたイメージがこんなカンジ。
「単独のｈｔｍｌとプラグインで何も動きに差が無い」と書いたけど実は若干差があって、ｃｓｓで各タグの書式を設定していたりすると思わぬ表示をしたりする。この辺りはまた明日(^^;
プラグインエリア表示への道 その１
しかし引っ張るなぁ。余程ネタが無いんだなぁ、と思ってるアナタ、正解。そんなにネタが豊富な世界に暮らしていないし、ネタがすぐ浮かぶ程感受性が強ければしがないサラリーマンしてません....と言いつつも、こんなコトばっか書いてるんで鉄を中心にネタがたまってます。ダーツネタだって終わってないし。当分ネタに困らないなぁ(^^;
軽口はいいとして、ローカルでの準備がほぼ終わったのでＦＣ２の中でいろいろといじってみますか。
管理画面で「環境設定」−「プラグインの設定」と開き、「プラグインの追加（公式）」を選ぶ。色々出てきますなぁ。まん中より下に「フリーエリア」というのがあるので、これを追加してやる。名前はフリーエリアのままで可、あとで変えられるもんね。あと、「カテゴリー１」のままで可。これも変えられるし。
追加してやると「プラグインカテゴリー１」の一番下に「フリーエリア」が表示されてますな。「設定の変更」を選ぶとプラグインの編集画面になる。そこで「HTMLを編集する」を選んでみませう。
[ フリーエリア ] のHTMLの編集
なんてタイトルの下に編集ボックスがあって
<!-- ＆freeareaの中にHTMLが代入されます。 -->
<p class="plugin-freearea" &align>
&freearea
</p>
なんてhtmlが表示されてるハズ。さて、ガンガンいじりましよう。失敗しても消してやり直せば良いんで大変気が楽。カテゴリーの情報を扱うのは
エリアで、扱える情報は
<%category_link> - URLを表示
<%category_name> - カテゴリー名を表示
<%category_count> - カテゴリー数を表示
の３つのようであります。ここら辺は自分で調べてね(^^;
この情報を自前の配列に取得して表示させるだけの簡単なJavaScriptを試してみませう。先ほどのボックスの中身を
コレに置き換えてブログを表示させると....にひひひ、ちゃんと情報が取得されていますな。これを書いている時点ではこんなカンジであります。
よし、いけそうですな(^^;
軽口はいいとして、ローカルでの準備がほぼ終わったのでＦＣ２の中でいろいろといじってみますか。
管理画面で「環境設定」−「プラグインの設定」と開き、「プラグインの追加（公式）」を選ぶ。色々出てきますなぁ。まん中より下に「フリーエリア」というのがあるので、これを追加してやる。名前はフリーエリアのままで可、あとで変えられるもんね。あと、「カテゴリー１」のままで可。これも変えられるし。
追加してやると「プラグインカテゴリー１」の一番下に「フリーエリア」が表示されてますな。「設定の変更」を選ぶとプラグインの編集画面になる。そこで「HTMLを編集する」を選んでみませう。
[ フリーエリア ] のHTMLの編集
なんてタイトルの下に編集ボックスがあって
<!-- ＆freeareaの中にHTMLが代入されます。 -->
<p class="plugin-freearea" &align>
&freearea
</p>
なんてhtmlが表示されてるハズ。さて、ガンガンいじりましよう。失敗しても消してやり直せば良いんで大変気が楽。カテゴリーの情報を扱うのは
<!--category-->〜<!--/category-->エリアで、扱える情報は
<%category_link> - URLを表示
<%category_name> - カテゴリー名を表示
<%category_count> - カテゴリー数を表示
の３つのようであります。ここら辺は自分で調べてね(^^;
この情報を自前の配列に取得して表示させるだけの簡単なJavaScriptを試してみませう。先ほどのボックスの中身を
| <script language="JavaScript" type="text/javascript"> <!-- var o = new Array(); //オリジナルのカテゴリー情報を配列化 function get_o_cate( url, name, number ) { this.url = url; this.name = name; this.number = number; } //表示 function show_cate() { var i; for(i=0; i<o.length ; i++){ document.write(o[i].name,"(",o[i].number,")</br>"); } } <!--category--> o.push( new get_o_cate("<%category_link>" , "<%category_name>" , "<%category_count>")); <!--/category--> show_cate(); //--> </script> |
コレに置き換えてブログを表示させると....にひひひ、ちゃんと情報が取得されていますな。これを書いている時点ではこんなカンジであります。
よし、いけそうですな(^^;
ツリー表示への道の寄り道 その４
昨日のソースの無駄は、呼ばれる度に画像名を取得しているコトにあるワケ。一度取得したらそれでいいハズ。その他にもよく見ると無駄があるので、ちょっとだけスマートにしてみる。
またソース変えるの面倒だから、直リンしちゃいましょう。ポチッとすると開くのでご注意を。当然、JavaScript無効でも動きませぬ。aタグが見づらいかもしれませんが、《ｈｔｍｌ》と《ｃｓｓ》であります。こんなカンジでしょうか、暇な方はローカルにでも保存して見て下さい。
あ、ｃｓｓは基本的に変えてません。それから、画像は適当に作ってｆｃ２にアップしてあるのでｕｒｌもソコを指してマス。
や、プロじゃないもん、まだ改善の余地はたくさんあると思いマスよ。でもそろそろ飽きてきたのでこの辺りで次のステップに進みたいのであります。ひとまずローカルで出来る事はこの位にしておこうかと。
明日からはサイドの「カテゴリー」などが表示されているプラグインエリアに開閉式カテゴリー一覧を表示させるチャレンジでございます。
次のページ
またソース変えるの面倒だから、直リンしちゃいましょう。ポチッとすると開くのでご注意を。当然、JavaScript無効でも動きませぬ。aタグが見づらいかもしれませんが、《ｈｔｍｌ》と《ｃｓｓ》であります。こんなカンジでしょうか、暇な方はローカルにでも保存して見て下さい。
あ、ｃｓｓは基本的に変えてません。それから、画像は適当に作ってｆｃ２にアップしてあるのでｕｒｌもソコを指してマス。
や、プロじゃないもん、まだ改善の余地はたくさんあると思いマスよ。でもそろそろ飽きてきたのでこの辺りで次のステップに進みたいのであります。ひとまずローカルで出来る事はこの位にしておこうかと。
明日からはサイドの「カテゴリー」などが表示されているプラグインエリアに開閉式カテゴリー一覧を表示させるチャレンジでございます。
