2005年04月15日

●テンプレートのバナーを設置

サイドバーに2/3カラムテンプレートのページへジャンプするバナー(というには大きいですが)を設置しました。今のところ個別エントリーアーカイブの右上に表示しています。


最近のトラックバックを拝見させていただくと、カスタマイズで当サイトを訪れて下さる方が多くなってきたようで、大変嬉しく存じます。で、訪問された際にダジャレテンプレートも積極的に紹介させて頂こう、というのが設置した目的です。またカスタマイズ記事で公開テンプレートのタグを出現させている割合が少なくないので、タグの構成が不明な場合にテンプレートのページへ速やかにジャンプできる配慮、という意味も含んでいます。


以前よりページ右下にテンプレートのテキストリンクは貼ってありますが分かりにくいので、もう少しアピールしてみようかと。

18:50 | Comments [0] | Trackbacks [0]

2005年04月03日

●トラックバック・ピープルのバナーをランダム表示する

ダジャレ・トラックバック・ピープルは3つのバナーを登録しておりまして、時々切り替えて使おうと思っていましたが手動で設定を変更するのはやや面倒なので、自動的にランダム表示できるよう細工してみました。
下記のように生成スクリプトにPHPを埋め込んでいます。確率の問題もありますが一応1クリック毎に切り替わるようになっています。

<?php
mt_srand((double) microtime() * 1000000);
?>

<script language="javascript">b=0<?php echo mt_rand(0, 2); ?>;</script><script type="text/javascript" src="・・・(略)・・・" ></script>

青色部分を追加します。消し線の数字はバナーの番号を示している部分で、この部分も青色のスクリプトに置き換えます。バナーが2種類の場合は
mt_rand(0, 1);

とすればOKです。
他の生成コードを利用されている場合も
b=n;

n の部分を置き換えれば良いと思います(試していませんので間違ってたらお許しを)。

22:10 | Comments [0] | Trackbacks [0]

2005年03月24日

●MTCollate を使って「最近のコメント」を表示する

デフォルトテンプレートや公開テンプレートのサイドバーメニューにある「最近のコメント」は、MTEntries タグや MTComments タグ等を用いて、表示するエントリー数と各エントリーに表示するコメント数を制御しています。この方法はスタンダードながら過去のコメントが含まれてしまうケースが少なくありません。


最近のエントリー例えば、左図では各エントリーに対して最大3コメントを表示する設定にしています。この例でお分かりの通り、「記事3」のコメントには既に読み終わった古いコメントが含まれています。
また「記事2」には実は新しいコメントが他にもあるのですが、現在の設定では表示することができません。隠れている記事を読めるようにするには表示するコメント数を増やさなければなりませんが、エントリーに対してのコメント数は予測できないので本来的な作業ではありません。また表示件数を増やせば、その分既読コメントが表示される可能性が高くなります。つまり意図しない情報が画面上に表示されるという点にいおいても好ましいものではないでしょう(といっても趣味の問題ですが)。


最近のエントリーMTCollate は Google で日本語ページを検索しても80件ほどしかヒットしない、どちらかといえば陽の目をみないプラグインです。最近 MTPingEntry との併用によるトラックバックのツリー表示で活躍していますが、それ以外の用途ではほとんど利用されていないようです。
でこの MTCollate を用いれば同じ件数でも図のように最近のコメントのみが表示されるようになります。「記事2」の隠れていたコメントも現れました。逆に「コメントが少ないので賑やかにしたい」という場合も、MTCollate を利用すれば、エントリーやエントリー内のコメント件数に依存しないので、最新のコメントからn件という形で常に表示させておくことができます。


と、偉そうに書きましたが、実は Ogawa::Memoranda さんの最近のトラックバックをエントリごとにまとめて表示にあった MTCollate タグを「最近のコメント」用に修正しただけです。すいません。
以下カスタマイズ方法です。


1.MTCollate のダウンロード
MT Extensions より MTCollate をダウンロード(ページの最初の方にある「Download」をクリック)してください。


2.プラグインの配置
ダウンロードしたアーカイブを解凍して、その中の MTCollate.pl を plugins フォルダに配置またはアップロードします。


3.「最近のコメント」のMTタグを変更
公開テンプレートを例に挙げると、本カスタマイズを利用したいテンプレートに設定されている

<div class="sidetitle">
Recent Comments
</div>

<div class="side">
<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<br/>
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTEntries>
</div>

をばっさり削除して、下のタグに置き換えてください。ここでは2つのパターンを挙げておきますのでいずれかお好きな方をお選びください。3.1は貼り付けるだけ(再構築は必要)ですぐ使えます。3.2はスタイルシートで ul タグと li タグの設定が必要です。ツリー化スクリプトを利用される場合は3.2をお使いください。


3.1 br タグと "└" で表示

<MTCollateCollect>
<MTComments lastn="10">
<MTCollateRecord>
<MTCollateSetField name="comment_id"><$MTCommentID$></MTCollateSetField>
<MTCollateSetField name="comment_author"><$MTCommentAuthor$></MTCollateSetField>
<MTCollateSetField name="comment_date"><$MTCommentDate format="%m/%d"$></MTCollateSetField>
<MTCommentEntry>
<MTCollateSetField name="entry_key"><MTComments lastn="1"><$MTCommentDate format="%y%m%d%H%M%S"$></MTComments></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle$></MTCollateSetField>
</MTCommentEntry>
</MTCollateRecord>
</MTComments>
</MTCollateCollect>

<div class="sidetitle">
Recent Comments
</div>

<div class="side">
<MTCollateList sort="entry_key:#:- comment_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>" title="<$MTCollateField name="entry_title" encode_html="1"$>"><$MTCollateField name="entry_title"$></a><br /></MTCollateIfHeader>
└ <a href="<$MTCollateField name="entry_link"$>#<$MTCollateField name="comment_id"$>" encode_html="1"><$MTCollateField name="comment_author"$></a> <$MTCollateField name="comment_date"$><br />
</MTCollateList>
</div>


3.2 ul タグと li タグで表示
<MTCollateCollect>
<MTComments lastn="10">
<MTCollateRecord>
<MTCollateSetField name="comment_id"><$MTCommentID$></MTCollateSetField>
<MTCollateSetField name="comment_author"><$MTCommentAuthor$></MTCollateSetField>
<MTCollateSetField name="comment_date"><$MTCommentDate format="%m/%d"$></MTCollateSetField>
<MTCommentEntry>
<MTCollateSetField name="entry_key"><MTComments lastn="1"><$MTCommentDate format="%y%m%d%H%M%S"$></MTComments></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle$></MTCollateSetField>
</MTCommentEntry>
</MTCollateRecord>
</MTComments>
</MTCollateCollect>

<div class="sidetitle">
Recent Comments
</div>

<div class="side">
<MTCollateList sort="entry_key:#:- comment_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>" title="<$MTCollateField name="entry_title" encode_html="1"$>"><$MTCollateField name="entry_title"$></a><ul></MTCollateIfHeader>
<li><a href="<$MTCollateField name="entry_link"$>#<$MTCollateField name="comment_id"$>" encode_html="1"><$MTCollateField name="comment_author"$></a> <$MTCollateField name="comment_date"$></li>
<MTCollateIfFooter name="entry_key"></ul></MTCollateIfFooter>
</MTCollateList>
</div>

設定が終わったら保存・再構築してください。


4.さらにカスタマイズ
表示したいコメント件数を変更するには、リスト中に赤字で示した数字を変更してください。デフォルトは10件表示するようにしています。

<MTComments lastn="10">

またデフォルトでは、エントリー表示順序は新しいものを上に、エントリー内のコメントは古いものを上に表示する設定にしています。
エントリーの表示順を、古いものを上にする場合は以下のように変更してください。
<MTCollateList sort="entry_key:#:+ comment_id:#:+">

エントリー内のコメントの表示順を、新しいものを上にする場合は以下のように変更してください。
<MTCollateList sort="entry_key:#:- comment_id:#:-">

またエントリーの表示順序は最新コメントを受け取った順番で表示するようにしています。

22:12 | Comments [9] | Trackbacks [6]

2005年03月03日

●ユーティリティスクリプト(その1:フォントサイズ切り替え)

汎用的に使えそうなプログラムを集めていく予定のユーティリティスクリプトを作ってみました。第1弾はブラウザ種別でフォントサイズを自動的に切り替えるスクリプトです。


私はIE系のブラウザをメインブラウザで利用しているのですが、Netscape や Firefox の Mozilla系ブラウザではサイドバーのフォントサイズがやや小さくなります。
以前はスタイルシート切り替えを用いてフォントを切り替えられるようにしていたのですが、一度切り替えるという必要があり、ユーザビリティ上好ましくないのでとりやめました。
それ以降放置状態になっていましたが、最近 JavaScriptのスキルがあがり(?)、フォントサイズを切り替えられることが分かりましたので、これに古典的手法であるブラウザ判定を加えて実装しました。
とりあえず私のサイトではMozilla系ブラウザの場合、1pxだけフォントサイズを大きくするように設定しています。設定もれでページによってJavaScriptエラーが出ているかもしれませんが予めご容赦ください。
以下、設定方法です。


1.util.js ダウンロード
下記のリンクをクリックしてスクリプトのページへジャンプしてください。そこで util.js をクリックし、同じファイル名でご自身のPCに保存してください。

本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合(Shift_JIS/EUC-JP等)は保存後、文字コードを適宜変更して再保存してください。この問題につきましては js ファイルのインクルード時、script タグにcharset 属性を指定することで文字コードを変更しなくても良いという記事を見つけましたが動作実績がありませんのでこのような記述にしています。


2.util.js 配置
util.js をローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。


3.テンプレート修正
フォントサイズを変更したいMTタグが存在する各テンプレートに util.js 起動スクリプトを追加します。起動スクリプトに設定する項目については後述します。
ここではメニューリストを対象に記していますが適用範囲はこの限りではありません。またダウンロードしたファイルを修正する必要はありません。


3.1 タグ名+クラス属性名による指定(changeFontSizeByTagNameAndClassName)
指定したタグおよびクラス属性部分に設定されているフォントサイズを変更します。

changeFontSizeByTagNameAndClassName(appId, 'tagName', 'tagAttribute', 'fontSize');

使用例(最近のエントリー・id 属性なし)
<div class="sidetitle">
Recent Entries
</div>

<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>

<script type="text/javascript">
<!--
changeFontSizeByTagNameAndClassName(1, 'div', 'side', '10px');
//-->
</script>

タグ+クラス属性指定なので、例えば div タグ+class 属性値が side の場合、ページの一番最後(または最後の該当指定タグの直下)に指定すれば対象のものを全て一括変換します。この方法を用いると設定は楽ですが設定箇所が後方になるため、ページ表示からフォントサイズ変換までに若干遅延が発生する場合がありますのでご注意ください。


3.2 id 属性による指定(changeFontSizeById)
指定した id 属性のタグに設定されているフォントサイズを変更します。

changeFontSizeById(appId, 'id', 'fontSize');

使用例(最近のエントリー・id 属性あり)
<div class="sidetitle" id="entryname">
Recent Entries
</div>

<div class="side" id="entrylist">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>

<script type="text/javascript">
<!--
changeFontSizeById(1, 'entrylist', '10px');
//-->
</script>

id 属性はページに1つしか設定できないため指定箇所が増えますが、折りたたみ等の起動スクリプトが既に存在するのであればその中に1行追加すればOKです。


3.3 id属性+内部タグ名による指定(changeFontSizeByIdAndTagName)
指定した id 属性のタグに括られたタグに設定されているフォントサイズを変更します。

changeFontSizeByIdAndTagName(appId, 'id', 'tagName', 'fontSize');

使用例(サブカテゴリーリスト)
<div class="sidetitle">
Categories
</div>

<div class="side" id="category">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>

<script type="text/javascript">
<!--
changeFontSizeByIdAndTagName(1, 'category', 'ul', '10px');
//-->
</script>

例の通り、サブカテゴリーリスト等の再帰的にタグが現れる場合に用います。


設定項目

appId

  • 名称:ブラウザ種別
  • 用途:対象ブラウザを"0"または"1"で指定
  • 設定値:0:IE系/1:Mozilla系
fontSize
  • 名称:フォントサイズ
  • 用途:変更するフォントサイズ
  • 設定値:任意(em指定/px指定)
id
  • 名称:id 属性名
  • 用途:フォントサイズ変更対象の id 属性名
  • 設定値:任意の id 属性名
tagAttribute
  • 名称:属性名
  • 用途:フォントサイズ変更対象のタグに属する class 属性名
  • 設定値:任意の属性名
tagName
  • 名称:タグ名
  • 用途:フォントサイズ変更対象のタグ名
  • 設定値:任意のタグ名
4.util.js インクルード文挿入
3項で設定した各テンプレートの <head>~</head> の間に下記のタグを追加してください。charset 属性は util.js の文字コードを指定してください。
<script type="text/javascript" src="<$MTBlogURL$>util.js" charset="utf-8"></script>



本記事の転載は設定例含めご自由に行ってください。「私はこう設定しました」という使用例を書いて頂けるとありがたいです。記事からのプログラムファイルへの直リンクもOKですが、予告なしにリンクを変更する場合がありますのでこの記事またはスクリプトのページへのリンクをお勧めします。
ブログ等でプログラム改変の記事を投稿される場合は util.js に基づいていることと、改変内容を明記してください。

19:17 | Comments [9] | Trackbacks [3]

2005年02月13日

●maketree.js 1.01 リリース

ツリー化スクリプトの maketree.js をマイナーバージョンアップしました。
今回の修正はツリー状のリスト(ul-li-ul-liという構造)に対する対処です。1.00ではサブカテゴリーリストにしか対応していなかったため、これを他のツリー状リストに対応させるように修正致しました。端的に申し上げますとユーザー・マニュアルメニューリストに対する対処です。
ユーザー・マニュアルを表示していない、またはツリー化表示しない場合、アップグレードの必要はありません。またアップグレードされても既存の動作には影響ありません。


アップグレードされる場合は下記のリンクでスクリプトのページへジャンプし、そこからダウンロードしてください。

以下、ユーザー・マニュアルで利用する場合のカスタマイズ方法を記します。


1.id 属性の変更
ユーザー・マニュアル表示用タグの id 属性(赤字部分)を、同ページの他の id 属性と重複しない任意の文字列に修正してください。ここでは hogehoge という id 属性にした例です。

<div class="sidetitle" id="manualname">
Official User's Manual
</div>

<div class="side" id="manuallist">
<div id="categorieshogehoge">


2.スタイルシートの追加
サブカテゴリー用のスタイル定義をコピー&ペーストして同じスタイルシートの任意の位置に追加し、id 属性(赤字部分)を1項で付与した名称に変更します。
.side #categorieshogehoge ul {
    padding-left: 15px;
    margin: 0px;
    margin-bottom: 0px;
}

.side #categorieshogehoge ul ul {
    margin-bottom: 0px;
}

.side #categorieshogehoge li {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: circle;
}


3.maketree.js起動スクリプト追加
ユーザー・マニュアル表示用タグの下に下記を追加します。
<script type="text/javascript" language="javascript">
<!--
generateTreeForTreeStructure('hogehoge');
//-->
</script>

以上です。

20:00 | Comments [6] | Trackbacks [2]

2005年02月11日

●「最近のエントリー」の日別表示

公開テンプレートの「Recent Entries(最近のエントリー)」というタイトルのメニューリストは、デフォルト状態では直近の10エントリーを単純に並べて表示するだけです。ここではこれを日別に分割して表示するためのカスタマイズをご紹介致します。
下記の記事を参考にさせて頂きました。ありがとうございました。

カスタマイズ方法ですが、各テンプレートにある「Recent Entries」を表示するMTタグの該当部分について、下記のように青色部分を追加します。修正後のリストは元記事からの引用です。
<div class="sidetitle">
Recent Entries
</div>

<div class="side">
<MTEntries lastn="10">
<MTDateHeader>
<$MTEntryDate format="%m/%d"$><br />
</MTDateHeader>

<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>

MTEntryDateのformat属性は "mm/dd"(例えば02/11)と表示されるように設定しています。この部分の修正で日付表示を変更することができます。フォーマットの詳細はユーザー・マニュアル:日付タグのフォーマットをごらんください。


先日投稿したサイドメニューのツリー化スクリプトに対応させる場合は下記をご利用ください。

<div class="sidetitle">
Recent Entries
</div>

<div class="side">
<MTEntries lastn="10">
<MTDateHeader>
<ul><$MTEntryDate format="%m/%d"$>
</MTDateHeader>
<li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>
<MTDateFooter>
</ul>
</MTDateFooter>

</MTEntries>
</div>

最初のリストとの主な変更点を青色で示しています。リスト表示用HTMLタグへの変更と、同日の複数エントリーを構造化する時に利用するMTDateFooterタグを加えています。div タグの id 属性は必要に応じて適宜追加してください。

13:50 | Comments [11] | Trackbacks [10]

2005年02月10日

●カテゴリーリストをサブカテゴリー表示に切り替える

公開テンプレートのサイドメニューのカテゴリーリストですが、デフォルト状態では一括表示するように設定しています。これをサブカテゴリー表示に変更する方法を本エントリーにて記します。


サブカテゴリー表示に変更する場合、サブカテゴリー表示にしたいテンプレートのカテゴリーリスト用MTタグを下記のいずれかの方法で変更します。
カテゴリーリスト表示用のMTタグは下記です。「Categories」で検索すると良いでしょう。

<div class="sidetitle">
Categories
</div>

<!-- 全カテゴリー用 -->
<div class="side">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a> [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
<!-- 全カテゴリー用 -->

<!-- サブカテゴリー用
<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
     サブカテゴリー用 -->


なんとなくお分かりかと思いますが一番上がメニューリストのタイトルです。その下がメニューリスト表示用MTタグで、一括表示用の部分とサブカテゴリー表示用の部分に分かれています。デフォルトではサブカテゴリー表示部分を無効にしておりますので、これを有効にすればOKです。


一括表示のMTタグを残しておかなくて良い場合は赤線部分の行を単純に削除します。

<div class="sidetitle">
Categories
</div>

<!-- 全カテゴリー用 -->
<div class="side">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a> [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
<!-- 全カテゴリー用 -->

<!-- サブカテゴリー用
<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
     サブカテゴリー用 -->


一括表示のMTタグを残しておきたい場合は下記の通り赤色部分を削除し、青色部分を追加します。これはHTMLの「コメントアウト」という機能を利用してMTタグの有効・無効を制御しています。
<div class="sidetitle">
Categories
</div>

<!-- 全カテゴリー用 -->
<div class="side">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a> [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
<!-- 全カテゴリー用 -->

<!-- サブカテゴリー用 -->
<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
<!-- サブカテゴリー用 -->


なおリストをサブカテゴリー表示に変更した場合、上記のMTタグをデフォルト状態で使用するとカテゴリーアーカイブページにジャンプした時、カテゴリーリストには表示されているカテゴリー配下のカテゴリーしか表示されません。この問題を解消するためには下記のエントリーを参照ください。またインポート(管理メニューの「読み込み/書き出し」)を利用してエントリーを読み込んだ場合は以前のサブカテゴリー構成が解除されておりますので、管理メニューの「カテゴリー」をクリックした次のページで再度サブカテゴリーの設定が必要になります。
設定方法は、まず別のカテゴリーのサブカテゴリーとして移動したいカテゴリーの右側にある「移動」をクリックします。クリックするとページが切り替わりますので、親カテゴリーにしたいカテゴリーの左側にあるラジオボタンをクリックすればOKです。

16:35 | Comments [10] | Trackbacks [2]

2005年02月09日

●サイドメニューのツリー化スクリプト(改)

サイドバーのメニューリストをツリー化するスクリプトです。このスクリプトの特徴は通常のリストだけでなく、画像のようにサブカテゴリーについてもツリー化が可能です(サブカテゴリーリストの折りたたみとの組み合わせも可能です)。本サイトのサブカテゴリーリストをツリー化しておりますので興味のある方はお試しになってみてください。
本カスタマイズに関してはsbのインストールページをヒントにさせて頂きました。ありがとうございました。
ツリー化スクリプトはJUGEMカスタマイズ講座が著名なのでここでは「改」と命名させて頂きましたが、JavaScriptにつきましてはDOMや再帰呼び出し(サブカテゴリーリスト用)を利用した全く異なる実装です。
以下カスタマイズ方法です。


1.maketree.js ダウンロード
下記のリンクをクリックしてスクリプトのページへジャンプしてください。そこで maketree.js をクリックし、同じファイル名でご自身のPCに保存してください。

本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合(Shift_JIS/EUC-JP等)は保存後、文字コードを適宜変更して再保存してください。この問題につきましては js ファイルのインクルード時、script タグにcharset 属性を指定することで文字コードを変更しなくても良いという記事を見つけましたが動作実績がありませんのでこのような記述にしています。
scriptタグの設定については3項に記してますのでお試し頂ければ幸いです。


2.maketree.js 配置
maketree.js をローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。


3.リスト表示用タグ修正およびJavaScript起動用スクリプト設定
ツリー化を行いたい各テンプレートのサイドバーのメニューリストのMTタグを修正します。MTタグは ul と li を用いたリスト形式になっていることが前提となります。
下記に主要なツリー化用メニューリストのMTタグサンプルおよびJavaScriptを掲載します。黒字部分がMTタグ(公開テンプレートからの変更イメージ)で、青字部分が新たに追加するid属性およびJavaScript起動スクリプトです。


Recent Entries(最近のエントリー)

<div class="side" id="entrylist">
<ul>
<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</div>

<script type="text/javascript" language="javascript">
<!--
generateNormalTree("entrylist");
//-->
</script>

Recent Entries(最近のエントリー:日別表示用)
<div class="side" id="entrylist">
<MTEntries lastn="10">
<MTDateHeader>
<ul><$MTEntryDate format="%m/%d"$>
</MTDateHeader>
<li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>
<MTDateFooter>
</ul>
</MTDateFooter>
</MTEntries>
</div>

<script type="text/javascript" language="javascript">
<!--
generateNormalTree("entrylist");
//-->
</script>

Recent Comments(最近のコメント)
<div class="side" id="commentlist">
<MTEntries recently_commented_on="5">
<ul>
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<MTComments lastn="5">
<li><a href="<$MTEntryLink$>#<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$></li>
</MTComments>
</ul>
</MTEntries>
</div>

<script type="text/javascript" language="javascript">
<!--
generateNormalTree("commentlist");
//-->
</script>

Recent Trackbacks(最近のトラックバック)
<div class="side" id="trackbacklist">
<ul>
<MTPings lastn="10">
<li><a href="<$MTPingURL$>" target="_blank"><$MTPingTitle$></a><br/>
from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
</div>

<script type="text/javascript" language="javascript">
<!--
generateNormalTree("trackbacklist");
//-->
</script>

Categories(カテゴリーリスト:一括表示用)
<div class="side" id="categorylist">
<ul>
<MTCategories>
<li><a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a> [<$MTCategoryCount$>]<br /></li>
</MTCategories>
</ul>
</div>

<script type="text/javascript" language="javascript">
<!--
generateNormalTree("categorylist");
//-->
</script>

Categories(カテゴリーリスト:サブカテゴリー表示用) *MTタグは修正不要です
<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>

<script type="text/javascript" language="javascript">
<!--
generateSubcategoryTree();
//-->
</script>

注:サブカテゴリーのツリー化ではdivタグにある"categories"というデフォルトの id 属性をスクリプトで使用しています。もしこの名称を変更されている場合は maketree.js で categories という文字を検索(1ヶ所しかありません)し、その部分を使用されている文字と置き換えてください。


Monthly Archives(月別アーカイブリスト)

<div class="side" id="monthlylist">
<ul>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
</div>

<script type="text/javascript" language="javascript">
<!--
generateNormalTree("monthlylist");
//-->
</script>


赤字部分は名称がそれぞれ一致するように指定してください。id 属性はサイドメニューの折りたたみ等で設定済であればそのままご利用ください。サブカテゴリーリストはMTタグの下にスクリプトを追加するのみで大丈夫です。またサブカテゴリーリストの折りたたみを利用されている場合は
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','on',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse max_depth="3">
</MTTopLevelCategories>
//-->
</script>

の前後どちらに起動スクリプトを挿入してくださってもかまいません。


ツリー構造リスト(ユーザー・マニュアル等)

<div class="sidetitle" id="manualname">
Official User's Manual
</div>

<div class="side" id="manuallist">
<div id="manual">
   :
  (中略)
   :
</div>
</div>

<script type="text/javascript" language="javascript">
<!--
generateTreeForTreeStructure('manual');
//-->
</script>


4.maketree.js インクルード文挿入
ツリー化スクリプトを利用する各テンプレートの <head>~</head> の間に下記のタグを追加してください。charset 属性は maketree.js の文字コードを指定してください。
<script type="text/javascript" src="<$MTBlogURL$>maketree.js" charset="utf-8"></script>

5.画像のダウンロード
下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。保存方法は、(IEの場合)リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。なお実線につきましては我楽さんより提供いただきました。ありがとうございました。
なお実線を公開テンプレートに適用した場合、Mozzila系ブラウザ(Netscape/Firefox)で線が途切れる事象が確認されています。スタイルシートの設定で解消されるかもしれませんが予めご了承ください。


6.画像の配置
ダウンロードした画像をローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。


7.スタイルシート追加
スタイルシート(styles-site.css)の.sideの下辺りに下記のクラス指定を追加します。

ul.tree {
    margin: 0px!important;
    padding: 0px!important;
    font-size: 9px;
    list-style: none!important;
}
ul.tree ul {
    margin: 0px!important;
    padding: 0px!important;
}
ul.tree li {
    margin: 0px!important;
    padding: 0px 0px 0px 16px!important;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat!important;
    list-style: none!important;
}
ul.tree li.end {
    background-image: url(tree_end.gif);
    list-style: none;
}

赤字部分については、先ほどダウンロードした画像のファイル名にそれぞれ変更するか、画像のファイル名をスタイルシートに設定されているファイル名に修正してください。また上の設定はスタイルシートと同じディレクトリ(=ローカル・サイト・パス)に画像を配置した場合です。異なるディレクトリに配置する場合は http://~ のようにURLで画像を指定してください。


8.スタイルシート修正(必要な場合のみ)
ツリー化するリストに改行されたリンクが存在する場合、IE系のブラウザではリンクをポイントした時、あるいはポイントを外した時に横にあるツリー画像が消えるという不具合が確認されています(これで3日ほど悩みました)。
その場合はスタイルシート(styles-site.css)の先頭の方にあるリンクの設定で

/* リンク文字設定 */
    :
a:link {
    color: #8FABBE;
    background: none;
}
a:visited {
    color: #8FABBE;
    background: none;
}
a:active {
    color: #8FABBE;
    background: none;
}
a:hover {
    color: #006699;
    background: none;
}

の赤字部分をコメントアウトまたは削除してください。


以上です。


2005.02.11 追記
「最近のエントリー」の日別表示用タグを追加しました。


2005.02.12 追記
サブカテゴリーリストのツリー化での注意書きを追記しました。


2005.02.13 追記
ツリー構造リストのツリー化について記述を追記しました。

23:59 | Comments [64] | Trackbacks [30]
 1  |  2  |  3  | All pages