« 帰郷してたの | TOP | とにかく仮眠します »

2006年02月17日

サイドとツリーと開閉式（PC）

ここ数日かけて、久しぶりにこのblogのカスタマイズをやってみました。何をしたかというと、

  1. サイドメニューカテゴリのツリー化
  2. サイドメニューカテゴリツリー折りたたみ
  3. エントリー記事の開閉表示
の計3ヶ所のカスタマイズ。

実はこの3つの箇所は、数ヶ月前にカスタマイズ済みだったのですが、忘れっぽいのに、ここでメモ書き記事を書かなかった為に、どこのスクリプトをカスタマイズしたのかいまいち覚えてなく、最近気づいたら、ツリーの成り方が一部正常に動いてなかったりしてたもので、ずっと気になっていたのです。

前々から、｢こう表示されてたら、見やすいだろうなぁ～｣と思っていたもので、その当時webで調べて流れ流れて、 [1] [2] などは、確か個人blog様などで見つけ、 [3] は英字サイト様にて発見。それを紹介しているblog様などもあったはずなのですが・・・先の理由において現在行方不明｡･ﾟ･(ﾉД`)･ﾟ･｡。

そこで、一念発起して、何かとカスタマイズの参考にさせてもらっている小粋空間様のツリーや開閉式などのカスタマイズ方法で、やり直す事にしたというわけです。なので、今日の記事は長文になる恐れがあります。ご興味のある方だけ、どうぞご覧下さい。
（たいした内容じゃないかもしれないけど）

1、サイドメニューカテゴリのツリー化
サイドメニューをツリー式に表示するスクリプト。（私のblogのPC観覧時の話ですが、向かって右全体のカレンダーから最新のコメントまでがサイドメニューに含まれるのですが、私はカテゴリーと最新のコメント部分をツリー化しました。）
他blogからDLしてきたツリーの開閉式のスプリクトの関係なのか？それともバージョンアップした時の配置が悪かったのか、親カテゴリと子カテゴリの位置が同列に並んでいて、どれが親カテゴリだか一瞬にして理解しずらく、見にくいなぁと感じていたので、それが解消して本当に良かった。 （ちなみに、少し前までの他blogカテゴリツリー開閉式スプリクト利用前までは、ただ単にMT専用のテンプレートタグでHTMLタグのリスト表示タグ<ul><li></li></ul>を利用し、親である<ul>があると■。無い場合は□となるようにし、親カテゴリと子カテゴリの並び方をずらすように表示という各命令文を使用していた。） で、他blogカテゴリツリー開閉式スプリクト利用時は、何も指定していなかったけれど、コピペでメモ書きが無い為、いざ新しいカスタマイズをしたいと思っても、どこがどこだかわからず、困惑していたところ、やはり親切設計である小粋空間様のものを使おうと思い、実際エントリーを見させてもらいながら設置。 設置の段階で、スクリプトのプログラムをDLし（拡張子は.js）、最初なにを勘違いしたが、jsの内容が文字化けしていて、それを直してからFTPによりサーバーにアップしたら、自動で書式を変更してしまっていたらしくうまく動かなく、再度DLさせてもらったものをそのままアップしたら、正常に動いた。なお、この文字化けは文字コードの違いらしいが、windowsのメモ帳なら文字化け回避できました。なお、設置方法などは配布元にて確認してみて下さいね。私は『Categories（カテゴリーリスト：サブカテゴリー表示用）』の部分をコピペし（ですが、あとで併用できるツリー開閉式も追加した為、MTタグなど<MTTopLevelCategories>から</MTTopLevelCategories>までは、ツリー開閉式の方のやり方に変更しました。）、JavaScript起動用スクリプトはモジュール化しました。（うちのスクリプトは結構モジュール化してるのが多く、それの方が表示が速い気がするもので・・。） スタイルシートは今まで指定していた.sidebar #categories ulなどは、/*こんな感じで*/コメントアウト。で、新しい部分を追加。
2、サイドメニューカテゴリツリー折りたたみ
サイドメニューのツリー化した子カテゴリーが存在する親カテゴリーの右側に折りたたみマークを表示するスクリプト。
以前まで『＋』ぷらす、『－』マイナスで折りたたんでいた箇所。先ほどのツリー化スプリクトとの併用で、とてもすっきり綺麗に見えるのが、とてもよい感じ。なお、細かい設定も出来るので、｢ここは折りたたみたくないけど、ここは折りたたみたい！｣などという問題も解決できる手動式もありなプログラムになっているらしい。らしいというのは、私はその必要がないので、そちらの細かい設定バージョンではないので実際に体験していないのです。 設置の段階で、スクリプトのプログラムをDLし（拡張子は.js）、先ほどツリー化スプリクト設置の教訓から、DLしたそのままの状態をFTPによりアップロード。設置方法は非常に簡単で、先ほど変更したのカテゴリー表示に関するMTタグを｢サブカテゴリー用｣のタグに変更この部分（<div class="side">から</div>まで）しただけかなぁ～。もちろんjsの設置や<head>へのジャバスプリクト命令文は記入必須ですが。、こちらもJavaScript起動用スクリプトはモジュール化しました。 こちらはスタイルシートは変更なし。
3、エントリー記事の開閉表示
最初のページに表示されているページのみなのですが（個別アーカイブにも出来るらしいと知り興味しんしんですｗ）『続きを読む』ボタンをクリックすると・・。『ペロン』とすぐ下に後半記事が表示されるスクリプト。
数ヶ月前からPCからここを見ると最初のページに表示されているページのみなのですが、『続きを読む』ボタンをクリックすると『ペロン』とすぐ下に後半記事が表示されていました。これが、前回改造していた当時の私は少しは理解してたと思うのですが、今見るとさっぱりわからない。ということで、開閉式のスクリプトを頂いてきまして設置。こちらの設定も説明どおりに設置すればすんなり生まれ変わるはず・・。ちなみに説明には<head>～</head>の間にスクリプトを追加とあります。読み込み速度によるものだと勝手に自己解釈していますが、私は例によってモジュール化し<div class="content">すぐ下に導入。 あとは、テンプレートタグを修正するだけでOKなはず

設置方法などは、小粋空間様参照。ここには私が今後忘れないように書いているだけですので、あんまり詳しく書きません。というかわかりませんし(;´▽｀A``
本当にありがとうございます。大切に使わせて頂きます。
ペコm(_ _;m)三(m;_ _)mペコ

そんな訳で、久しぶりのカスタマイズに関する記事ですが、MT利用者じゃない方には全く必要ない話。まぁ、｢がんばったんだよぉ～｣ってことを知ってもらいたかっただけってのは否めませんｗ

◆Movable Type◆ | 投稿者 月影 : 2006年02月17日 06:55

トラックバック　(=゜-゜)ノ□ ペタッ

このエントリーのトラックバックURL:
http://m-cat.com/blog/mt-tb.cgi/115

コメント　φ(・ω・ )記念にかきかき

気軽に投稿して下さいね

＊

＊


保存しますか?


Copyright © 2003-2007 月影, All rights reserved.
Back ground Material by La　Mooｎ