MovableTypeのススメ

タグクラウド（サイドバー）の折りたたみ

当サイトではサイドバーにタグクラウドを表示しているのですが、タグがこのまま増えていったら困るな～と思っていたところ・・・

小粋空間さんでタグクラウドの折りたたみ for Movable Type 4が公開されていました。ありがとうございます。

タグクラウドを途中で折りたたむことができるのでスッキリ！

設置方法は下記のとおり（外部ファイルとして設置）

１．下記コードをコピーしテキストとして保存（ファイル名：showhide.js）

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

２．showhide.jsをサーバにアップロード

３．ヘッダー部分に下記を追加

<script type="text/javascript" src="<$MTBlogURL$>showhide.js"></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>

※小粋空間さんで公開されているテンプレートの場合です。

以上です。

詳しくは下記エントリーを参照下さい。
タグクラウドの折りたたみ for Movable Type 4

この記事は期待通りの内容でしたか？

Ajaxでアクセスランキングを表示

MovableType備忘録さんで公開されているAjaxを用いたアクセスランキングの表示を試してみました。（当サイトではアクセスが多い上位５件を表示しています。）

これは、自サイトのページ毎のアクセスをカウントしてランキング表示してくれるというものです。（ログはテキストファイルに記録されます。）

prototype版とjQuery版が公開されています。

設置方法は下記を参照下さい。
Ajaxでアクセス・ランキングを表示する３

思った以上に設置にてこずりましたが、なんとか動くようになりました。

設置のポイントは解説中の４番のこの部分だと思います。おそらく（汗