East of R134 元(仮)
<< 201710||01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31  >>
Index[Web]JUGEM/Blog 【JUGEM】ツリー化ガイド 

【JUGEM】ツリー化ガイド

免責事項

以下の場合、スクリプトが動作しない場合の対応はし兼ねます。
  1. ブログパーツによるエラー
  2. JavaScriptを用いた他カスタマイズの影響によるエラー
  3. UTF公開の一部テンプレートの(x)HTMLタグが正しくないために起こるエラー

エラー報告

バグ、エラー報告の場合はお手数をおかけしますが以下の情報提示をご協力ください。
  1. ご使用スクリプトバージョン
  2. ご使用テンプレート名・URL
  3. ツリー化スクリプト以外のJavaScriptによるカスタマイズの有無と種類
  4. JavaScriptによるブログパーツの有無とサービスの種類
  5. その他ブログパーツの有無とサービスの種類

下準備

【JUGEM】ツリー化準備を参考に下準備を行う。

スクリプト選択

ツリー化スクリプトver.5から導入するものを選び、それに応じて下準備をする。

JavaScriptの入れ方

.txtファイル(HTMLファイルに直接書き込むコピー&ペースト用)の場合。
[1]使いたいスクリプトファイルをダウンロード。
 [1-1]ファイル番号(番号+アルファベット)クリックし、新規ページが開くのでリンク先を保存。
 [1-2]もしくはファイル番号(番号+アルファベット)右クリックし、リンク先を保存。
[2]メモ帳でファイルを開き [ctrl]+a → [ctrl]+c で全コピーする。
[3]HTMLファイル内の</body>直前に [ctrl]+v でペーストする。

.jsファイル(外部呼出し可能サーバーから.jsファイルを呼び出す)の場合。
[1]使いたいスクリプトファイルをダウンロード。
 [1-1]ファイル番号(番号+アルファベット)クリックし、新規ページが開くのでリンク先を保存。
 [1-2]もしくはファイル番号(番号+アルファベット)右クリックし、リンク先を保存。
[2]ファイル名が「数字.js」もしくは「数字とアルファベット.js」になっているのでjugemtree.jsに書き換える。
※パソコンの設定で拡張子が表示されない場合は「数字」もしくは「数字とアルファベット」をjugemtreeに書き換える。
[3]ftpソフトで外部呼出し可能サーバーにファイルをアップロードする。
[4]HTMLファイル内の</body>直前に<script charset="Shift_JIS" type="text/javascript" src="http://ファイルをアップロードしたURL/jugemtree.js"></script>を入れる。
※.jsファイルの直リンク(直リン)はできないようにしてあります。一度DLし、外部呼び出し可能サーバーへアップロードしてお使いください。

ツリー化の選択

一部だけツリー化させたいという方に。
createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化
createTreeList('linklist',gTreeOption); // リンクリストのツリー化
createTreeList('archivelist',gTreeOption); // アーカイブリストのツリー化
の中から必要のない項目をその行ごと削除する。

ソートの順番を入れ替える

ツリーごとにソートの順番を変える方法。
JUGEMカスタマイズ講座様でのスクリプトでは

gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */

というのが入っていて、これ
createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化
createTreeList('linklist',gTreeOption); // リンクリストのツリー化
createTreeList('archivelist',gTreeOption); // アーカイブリストのツリー化
の並べ替えたいリストの前に入れることになっていたのだが、現在では管理者画面の[基本設定]→[表示設定]で簡単に変えられるのでそちらでどうぞ。

リストマークの変更

本家JUGEMカスタマイズ講座様で紹介されていたのですが、繋がらないので以下。
⇒ではなく、ツリーっぽく見えるように ├ や └ を使う。
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '⇒ '; /* ツリー用マーク(通常) */
gTreeOption['end'] = '⇒ '; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '<br />¥n'; /* 各枝の末尾 */
gTreeOption['top'] = '<br />¥n'; /* ツリー本体の最初 */
gTreeOption['btm'] = ''; /* ツリー本体の最後 */
この箇所を以下のように
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '├ '; /* ツリー用マーク(通常) */
gTreeOption['end'] = '└ '; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '<br />¥n'; /* 各枝の末尾 */
gTreeOption['top'] = '<br />¥n'; /* ツリー本体の最初 */
gTreeOption['btm'] = ''; /* ツリー本体の最後 */

リストマークの変更・画像編

本家JUGEMカスタマイズ講座様で紹介されていたのですが、繋がらないので以下。
⇒ではなく、画像を用い、もっとツリーっぽく見えるようにする。
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '⇒ '; /* ツリー用マーク(通常) */
gTreeOption['end'] = '⇒ '; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '<br />¥n'; /* 各枝の末尾 */
gTreeOption['top'] = '<br />¥n'; /* ツリー本体の最初 */
gTreeOption['btm'] = ''; /* ツリー本体の最後 */
この箇所を以下のように
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '<li class="lst">'; /* ツリー用マーク(通常) */
gTreeOption['end'] = '<li class="end">'; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '<¥/li>¥n'; /* 各枝の末尾 */
gTreeOption['top'] = '<ul class="tree">'; /* ツリー本体の最初 */
gTreeOption['btm'] = '<¥/ul>'; /* ツリー本体の最後 */

次に画像をアップする。ツリー化に使う画像がない場合はこちら(要解凍ソフト)から。中には通常用(lst)と末端用のフォルダ(end)に分かれています。ファイル名の接尾数字が同じものが同じ色です。
画像ファイル名の見方。例:lst-01-00→通常用-シリーズ番号-色番号。end-01-00→末端用-シリーズ番号-色番号。

cssファイルに以下を追加。
ul.tree {
list-style: none;
margin: 0px;
padding: 0px;
}
ul.tree li {
margin: 0px;
padding: 0px 0px 0px 16px;
background-image: url(アップした通常用の画像ファイルURL);
background-repeat: no-repeat;
}
ul.tree li.end {
background-image: url(アップした末端用の画像ファイルURL);
}
※画像URLは管理画面で確認してください。
画像をご自分で用意した場合

padding: 0px 0px 0px 16px;

は画像に合わせて調整してください。またある程度行間をあけたい、フォントサイズを設定したいという場合

ul.tree

を以下のようにして調節を。
ul.tree {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 希望のフォントサイズ;
line-height: 150%;
}
コダミタカ * Category of [Web]JUGEM/Blog*7 Comments * 0 Trackbacks * 
Check
このエントリーをはてなブックマークに追加

同じカテゴリの記事

    【JUGEM】ツリー化スクリプトver.5(2016.01.09)
    【JUGEM】個別編集ページへのリンク(2014.11.02)
    【JUGEM】JUGEMdress(2011.01.02)
    【JUGEM】パンくずナビもどき(2009.11.21)
    【JUGEM】独自タグ50個追加に伴うscriptの修正(2009.11.20)
Index- スポンサーサイト 

スポンサーサイト


スポンサードリンク * Category of -*0 Comments * 0 Trackbacks * 
Check
このエントリーをはてなブックマークに追加
Trackback
Trackback URL :
ご利用の前にこちら(別窓)を一読ください。

Comment by Facebook
Comment
こちらのスクリプトを使用させていただいてます。
質問なのですが、スクリプトを導入すると別ウィンドウではなく同じウィンドウで表示されるのですが、どうやったら別ウィンドウで開くことができるでしょうか?

お時間があるときで構わないので宜しくお願いしてもよいでしょうか?

申し訳ありません!
自己解決致しました。
大変お騒がせ致しました><

  • 2010
  • 05.25
  • [Tue]
  • 15:21
  • ippei
はじめまして、ツリー化スクリプトを使わせていただきたく思っています。

『ツリー化スクリプトver.4』のページにてtxtファイルをダウンロードしたいと思うのですが、「リンク無効」となりダウンロードできません。

ダウンロードしたいファイル番号を右クリックで対象を保存にしても
ダウンロードできません。

すでにリンクは外されているのでしょうか。




  • 2010
  • 05.31
  • [Mon]
  • 02:06
  • コダミタカ
>ippei様

申し訳ございません。
ドメインが変わって、変更していないのです。
6月には作業を完了しますので、今しばらくお待ちいただけると嬉しいです。

  • 2010
  • 05.31
  • [Mon]
  • 16:09
  • ippei
早速対応していただきありがとうございます!
先ほどリンク確認できました。

色々試してツリー化実現させたいと思います!

  • 2010
  • 09.25
  • [Sat]
  • 17:40
  • shuko
こんにちは!
今回、カテゴリーのツリー化をするにあたり、このサイトを大変参考にさせていただきました。有難うございます!
で、私の脳みそがいろいろなことを理解する前に手順通り試したら、なんと!カテゴリー化ができたわけでございますが、ひとつだけ質問させて下さい。

アーカイブもツリー化にできたのですが、記事の数がseptember(1)のように数字が表示されません。これはscriptがそうのような設定になっているからなんでしょうか?

使用したのは、http://www.east-r134.com/blog/jugemjs/2405.txt です。

もし宜しければ教えてください。

  • 2010
  • 09.26
  • [Sun]
  • 10:29
  • コダミタカ
>shuko様
はじめまして。
数字が出ないのは仕様です。
アーカイブのツリー化はリクエストがあって、急造したものでしたので、あまり深く考えずにスクリプトを書いてしまいました。

ちょっと現在、ブログの更新状況を見てもらっても解るとおり、時間が思うように取れないのですが、年内には数字も表示されるタイプのスクリプトを書きたいと思います。

どうもスミマセン。

ご利用の前にこちら(別窓)を一読ください。







About
元が腐っているのでナチュラに腐ったことをほざいてるかもしれないブログ。
原作厨というか原作至上主義。ネタバレデフォ。単行本派やネタバレ嫌な人は回れ右のブラウザバックかタブ閉じてこのブログの存在を記憶から抹殺。
米ドラは本国放送した時点(寧ろスポイラー出た時点)でネタ解禁だと思っているし、連載漫画は本誌が発売された時点でネタ解禁だと思っているので日本放送だったり単行本派の人には優しくないブログ。

過去のはこちらから
Twitter
Pick Up Entries

New Entries
Entries
Comments
Trackbacks
Category
Archives
Links
Blog People
BL×B.L. People
BL×B.L. People
BL NOVELS TB
BL COMICS TB
Ranking


Others

  • RSS feed meter for http://koda.jugem.cc/
  • あわせて読みたい
  • SEO対策My Zimbio

adadadadadad

▲Page Top

アクセスランキング