小粋空間: 折りたたみ: 2007年11月アーカイブ

Top ＞ Movable Type ＞カスタマイズ＞折りたたみ＞ 2007年11月

2007年11月 5日

タグクラウドの折りたたみ for Movable Type 4

November 5,2007 2:55 AM
Tag：[Customize, MovableType, MTIf, Tag]
Permalink

最近流行の「タグクラウド」ですが、タグの増加にしたがって表示される数が増えていきます。サイドバーにタグクラウドを表示していると膨大になる可能性があります。

そうならないよう、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;">続きを読む &#8811;</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;">&#8810; 続きを隠す</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;">続きを読む &#8811;</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;">&#8810; 続きを隠す</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>