タグクラウドの折りたたみ for Movable Type 4
最近流行の「タグクラウド」ですが、タグの増加にしたがって表示される数が増えていきます。サイドバーにタグクラウドを表示していると膨大になる可能性があります。
そうならないよう、Movable Type のデフォルトテンプレートのサイドバーに表示するタグクラウドは、MTTags タグに limit 属性をつけることで表示数を制限していますが、全てのタグが確認できないのが難点です。
ということで、タグクラウドを途中で折りたたむことによって、表示領域を占有せず、かつ折りたたみのリンクをクリックすれば全てのタグを確認できるカスタマイズを紹介します。
このカスタマイズを行うことで、下のように、タグクラウドに折りたたみリンクが表示され、
リンクをクリックすると残りのタグが表示されます。
１．折りたたみスクリプトの追加
ブログ管理画面の「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」を開き、追記文章の折りたたみで使用しているスクリプト（下記）を head 終了タグの直前に追加します。
<script type="text/javascript">
function showHide(entryID, entryLink, htmlObj) {
extTextDivID = ('Text' + (entryID));
extLinkDivID = ('Link' + (entryID));
if( document.getElementById ) {
if( document.getElementById(extTextDivID).style.display ) {
if( entryLink != 0 ) {
document.getElementById(extTextDivID).style.display = "block";
document.getElementById(extLinkDivID).style.display = "none";
htmlObj.blur();
} else {
document.getElementById(extTextDivID).style.display = "none";
document.getElementById(extLinkDivID).style.display = "block";
}
} else {
location.href = entryLink;
return true;
}
} else {
location.href = entryLink;
return true;
}
}
</script>上記は外部ファイルにしても構いません。
２．タグクラウドの変更
サイドバーのタグクラウドを下記の内容に変更します。
２．１ 公開テンプレートの場合
<MTIf name="main_index">
<dt class="sidetitle">
Tag Clouds
</dt>
<$MTSetVar name="foldflag" value="0"$>
<dd class="side">
<ul id="tags">
<MTTags>
<MTIf name="__counter__" eq="8">
</ul>
<div class="list_more" id="LinkEntry">
<a href="javascript:void(0)" name="<$MTTagID$>" onclick="showHide('Entry','<$MTBlogURL$>',this);return false;">続きを読む ≫</a>
</div>
<div id="TextEntry" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Entry',0,this);return false;">≪ 続きを隠す</a></div>
<ul id="tags">
<$MTSetVar name="foldflag" value="1"$>
</MTIf>
<li class="module-list-item taglevel<$MTTagRank$>"><a href="<$MTTagSearchLink$>"><$MTTagName$></a></li>
</MTTags>
</ul>
<MTIf name="foldflag"></div></MTIf>
</dd>
</MTIf>２．２ デフォルトテンプレートの場合
<$MTSetVar name="foldflag" value="0"$>
<MTIf name="main_index">
<div class="widget-cloud widget">
<h3 class="widget-header">タグクラウド</h3>
<div class="widget-content">
<ul class="widget-list">
<MTTags sort_by="rank">
<MTIf name="__counter__" eq="8">
</ul>
<div class="list_more" id="LinkEntry">
<a href="javascript:void(0)" name="<$MTTagID$>" onclick="showHide('Entry','<$MTBlogURL$>',this);return false;">続きを読む ≫</a>
</div>
<div id="TextEntry" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Entry',0,this);return false;">≪ 続きを隠す</a></div>
<ul class="widget-list">
<$MTSetVar name="foldflag" value="1"$>
</MTIf>
<li class="rank-<$MTTagRank max="10"$> widget-list-item"><a href="<$MTTagSearchLink$>"><$MTTagName$></a></li>
</MTTags>
</ul>
<MTIf name="foldflag"></div></MTIf>
</div>
</div>
</MTIf>３．デフォルト表示数を変更する
いずれのテンプレートも、２項にある下記の数字（赤色）を変更してください。
<MTIf name="__counter__" eq="8">デフォルトで表示されるタグ数は「設定した値-1」になります。
CSSは別途掲載します。すいません。
サブカテゴリーリストの折りたたみ+ツリー化 for Movable Type
以前、Movable Type のツリー化記事で「JavaScript 不要なサイドメニューのツリー化 for Movable Type」を紹介しましたが、当サイトで定番カスタマイズとなっている「サブカテゴリーリストの折りたたみ」と併用する場合の設定方法についてご質問を頂きましたので、本エントリーにて改めてご紹介致します。
このエントリーのカスタマイズを行うことで、スクリーンショットのようにサブカテゴリーリストを折りたたみ+ツリー化することができます。
なお、JavaScript が不要なのはツリー化のみで、折りたたみ動作には必要です。
１．スクリプトのダウンロード
下記のリンクをクリックし、リンク先のページにある menufolder.js のリンクをクリックしてダウンロードしてください。
２．menufolder.js の設定変更
ダウンロードした menufolder.js を任意のエディタで開き、下記の該当部分を青色の内容であることを確認（または修正）してください。
// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応：true
// 従来のカテゴリーに対応：false
var subCategoryCount = true;
：
// サブカテゴリーフラグ
// サブカテゴリーの折りたたみを有効にする(テンプレート要設定)
// 有効にする：true
// 無効にする：false
var subCategory = true;
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories = '▼';
var closeMarkForSubCategories = '▲';
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;設定内容の詳細は下記の通りです。
subCategoryCount
- 名称：カテゴリーリスト数計算方法
- 用途：カテゴリーリスト数計算方法を li タグ（サブカテゴリー表示）で計数するか、a タグ（従来の一括表示）で計数するかを指定します。
- 設定値： true：li タグで計数／false：a タグで計数
subCategory
- 名称：サブカテゴリーの折りたたみ有効フラグ
- 用途：サブカテゴリーの折りたたみの有効／無効を設定します。ここでは有効にします。
- 設定値： true：有効／false：無効
openMarkForSubCategories/closeMarkForSubCategories
- 名称：サブカテゴリーの折りたたみマーク
- 用途：サブカテゴリー名横に表示する折りたたみ用リンクのマーク
- 設定値：任意の文字（設定したマークを''で括るように）
offsetForTitleAndMarkOfSubcategory
- サブカテゴリーのタイトルとマークのスペース
- 用途：サブカテゴリーのタイトルとマークの間に挿入する半角空白文字数を指定
- 設定値：0以上
３．スクリプトのアップロード
menufolder.js の修正が終わったら保存し、メインページと同じディレクトリにアップロードしてください。
４．テンプレートに script 要素追加
サブカテゴリーリストの折りたたみを利用する各テンプレートの </head> の直前に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください（分からなければとりあえずサンプルのまま貼り付けてください）。
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>５．テンプレートにサブカテゴリーリスト表示用タグを追加
折りたたみ+ツリー化用のサブカテゴリーリスト表示用タグ（下記）をテンプレートの任意の位置に設定します。
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryID$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]<MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel><MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>青色は「JavaScript 不要なサイドメニューのツリー化 for Movable Type」のサブカテゴリーリストとの差分を参考までに示しています。
赤色部分は下記を参照して適宜変更してください。
initState
- 名称：初期状態
- 用途：ページを最初に表示した時の折りたたみ状態を指定します
- 設定値： on：開いた状態／off：閉じた状態
またカテゴリーアーカイブページで、どのページでも同じカテゴリーリストを表示したい場合は、上記サブカテゴリーリストの先頭および末尾にある MTSubCategories タグを MTTopLevelCategories タグに変更してください。
６．CSS追加
下記を styles-site.css に追加してください。
ul.tree {
margin: 0 0 0 5px;
padding: 0;
font-size: 9px;
list-style: none;
}
ul.tree ul {
margin: 0;
padding: 0;
}
ul.tree li {
margin: 0;
padding: 0 0 0 13px;
background: url(tree_lst.gif) no-repeat 2px 0;
list-style: none;
}
ul.tree li.tree_end {
background: url(tree_end.gif) no-repeat 2px 0;
list-style: none;
}
.subcategories a.foldmark {
font-size:9px; /* マークのフォントサイズ */
text-decoration: none; /* マークの文字装飾（装飾なし） */
}７．ツリー画像のダウンロード
下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。
保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。
ツリー画像のファイルは６項の CSS（青色部分）で読み込まれますので、ファイル名は一致させてください。つまり、tree_lst_solid.gifをダウンロードする時（またはダウンロード後）、ファイル名は tree_lst.gif に変更してください。
８．画像のアップロード
ダウンロードした画像をメインページと同じディレクトリにアップロードしてください。
以上です。
これでサブカテゴリーリストに折りたたみマークとツリーが表示されればOKです。
2008.10.14
リストの MTSubCategories タグを MTTopLevelCategories タグに変更しました。
月別アーカイブリストの年毎の折りたたみ for Movable Type
ここではスクリーンショットのように、月別アーカイブリストで年毎に折りたたみマークを付与する方法をご紹介します。当サイトの右サイドバーに設定していますので、動作をご確認ください。 なおアーカイブリストのツリー化については「月別アーカイブリストのツリー化 for Movable Type」のカスタマイズを行ってください（本記事と内容が一部重複しています）。 |
アーカイブリストを年毎に折りたたむカスタマイズです。折りたたみとツリー化を同時に行ないたい場合は「JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ」をご覧ください。
１．事前準備
このカスタマイズを行うには下記のプラグインをインストールし、MTArchiveDateHeader および MTArchiveDateFooter タグが動作するようにしてください。
ArchiveDateHeader プラグイン
ArchiveDateFooter プラグイン
２．スクリプトのダウンロード
下記のリンクより menufolder.js をダウンロードしてください。今回のアーカイブリスト折りたたみ用にバージョンアップしていますので、すでに menufolder.js をお使いの方も再度ダウンロードしてください。
３．スクリプトの修正
menufolder.js の中間辺りにアーカイブリスト表示用の設定項目がありますので、赤色部分 *1 を適宜修正してください。デフォルトの状態では各年の後方に折りたたみマークが表示されるようになっていますので、そのままでもお使いになれます。
// アーカイブリストフラグ
// サブカテゴリーの折りたたみを有効にする(別途テンプレート設定が必要)
// 有効にする：true
// 無効にする：false
var archives = true;
// アーカイブリスト用折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForArchives = '▼';
var closeMarkForArchives = '▲';
// アーカイブリスト用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置：true
// カテゴリー後に折りたたみマークを配置：false
var preMarkForArchives = false;
// アーカイブリストのタイトルとマークのスペース
var offsetForTitleAndMarkOfArchives = 1;４．スクリプトのアップロード
menufolder.js を index.html のあるディレクトリにアップロードします。
５．テンプレートの修正（script タグ追加）
アーカイブリストを表示したいテンプレートの <head> ? </head> の間に下記のタグを追加します（すでに設定済の方はこの項をスキップしてください）。
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>６．テンプレートの修正（折りたたみつき月別アーカイブリスト追加）
月別アーカイブリストを表示したいテンプレートに下記のタグを設定します。サンプルは公開テンプレートに設定したものです。
青色で示した部分が月別アーカイブリストの表示で使用するタグになります。タグの構造がお分かりでない場合はこの部分に修正を加えたり改行を挿入しないでください。
その他の部分はご自身のテンプレートに併せて適宜修正してください。
<div class="sidetitle">
Monthly Archives
</div>
<div class="side">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list"></MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>" title="<$MTArchiveDate format="%Y年%B月"$>のアーカイブページへ"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
//]]>
</script>*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください（アクセシビリティ向上のため、1年ほど前からこの機能を提供していましたが、パフォーマンスの関係で停止していました）。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
サイドバーの折りたたみ方式変更
本サイトのサイドバー折りたたみ方式を変更しました。具体的には display: block によるリンクに変更しています。本当はカスタマイズ方法を今日公開する予定でしたが不具合が残っていることが発覚しましたので、すいませんがお披露目だけに留めさせてください。
デバグが完了次第、カスタマイズ方法を公開致しますのでしばしお待ちください。
