TopMovable Typeカスタマイズ折りたたみ > 2007年11月
2007年11月 5日

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

November 5,2007 2:55 AM
Tag:[, , , ]
Permalink

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

そうならないよう、Movable Type のデフォルトテンプレートのサイドバーに表示するタグクラウドは、MTTags タグに limit 属性をつけることで表示数を制限していますが、全てのタグが確認できないのが難点です。

ということで、タグクラウドを途中で折りたたむことによって、表示領域を占有せず、かつ折りたたみのリンクをクリックすれば全てのタグを確認できるカスタマイズを紹介します。

このカスタマイズを行うことで、下のように、タグクラウドに折りたたみリンクが表示され、

タグクラウド

リンクをクリックすると残りのタグが表示されます。

タグクラウド

1.折りたたみスクリプトの追加

ブログ管理画面の「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」を開き、追記文章の折りたたみで使用しているスクリプト(下記)を 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>

上記は外部ファイルにしても構いません。

2.タグクラウドの変更

サイドバーのタグクラウドを下記の内容に変更します。

2.1 公開テンプレートの場合

<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>

2.2 デフォルトテンプレートの場合

<$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>

3.デフォルト表示数を変更する

いずれのテンプレートも、2項にある下記の数字(赤色)を変更してください。

<MTIf name="__counter__" eq="8">

デフォルトで表示されるタグ数は「設定した値-1」になります。

CSSは別途掲載します。すいません。

Comments [10] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3