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

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

Posted at November 5,2007 2:55 AM
Tag:[Customize, MovableType, MTIf, Tag]

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

そうならないよう、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は別途掲載します。すいません。

関連記事
zenback
人気エントリー
トラックバックURL


コメント

初めまして。

今回、MT4を導入し、"Movable Type WEBデザインの新しいルール"も購入。
ほとんど初心者に近いため、まずは本に沿って進めており、
現在、カラムサイズをいじったところです。(141ページくらいまで)

そういえば、と思い
普段常用しているFirefoxだけでなく、IEでも確認してみようと思い
サイトを開いたら、
FireFoxでは全く問題なく表示されていた画像がいくつか表示されていません。

タイトルロゴのJPG画像などが主たるものですが。

ググって調べてみたのですが、原因がわからず、作業がこれ以上進みません。
何かアドバイスを頂ければ幸いです。

サイトは、http://ai-kon.info/main です。
よろしくお願い致します。

場違いコメントでしたら申し訳ありません、削除願います。

[1] Posted by ごろ太 : November 15, 2007 11:34 AM

>ごろ太さん
はじめまして。
拙著購入くださりありがとうございます。
ご質問の件ですが、スタイルシート(メイン)のヘッダ用スタイルに追記した

#header {
    :
    background: url(images/ai-kon.png)no-repeat;
    :
    outline-wigth: 0;
}

で、no-repeat の前に半角空白を挿入してください。
また、outline-wigth にスペルミスがありますので、outline-width に修正願います。

3章扉の右下にサンプルデータダウンロードのURLが書かれてますので、そちらをご利用くださるといいかもしれません。
それではよろしくお願い致します。

[2] Posted by yujiro logo : November 15, 2007 1:05 PM

>yujiroさま

あぁ、お恥ずかしいケアレスミスも丁寧にご指摘くださり、本当に助かります。
僕のような、MTの経験はちょっとはあるけれど…というような者にとっては、
本当に素晴らしい本です!

まずは、本の内容を一通り試させていただき、
あとはちょっとずつカスタマイズしていけたら、と思っています。

このたびは有難うございました。

[3] Posted by ごろ太 : November 15, 2007 3:37 PM

先ほどは有難うございました。
仕事から帰宅し、早速作業再開しまして、
グローバルナビゲーションの記述を正確にコピペ&修正したつもりなのですが…
突如、デザインが乱れてしまいました。

本体部分の幅が狭くなり、
全体が左寄せになり、しかしながらブログ記事とサイドバーのタイトルや本文がセンタリングされています。

お手数をおかけしますが、
どこを直したらよいのか、またソースを見てアドバイスをいただけたら幸いです。

そもそも、テキストエディタにバックアップを取っていれば済む問題で
大変申し訳ありません。ご教授願います。

[4] Posted by ごろ太 : November 16, 2007 12:30 AM

>ごろ太さん
こんにちは。
左記のご質問、無事に直ったようで良かったです。
次のご質問の件ですが、下記の部分の一番最後に div の終了タグ(赤色)が余分に記述されてますので、これを削除してください。

<dl id="navi">
<dt>主なメニュー</dt>
<dd>
<ul class="clearfix">
<li><a href="http://ai-kon.info/main/">ホーム</a></li>
<li><a href="http://ai-kon.info/main/about.html" class="about">あい混とは</a></li>
<li><a href="http://ai-kon.info/main/cat13" class="cat13">トピックス</a></li>
<li><a href="http://ai-kon.info/main/maestro.html" class="maestro">指導者紹介</a></li>
<li><a href="http://ai-kon.info/main/cat6" class="cat6">活動の記録</a></li>
<li><a href="http://ai-kon.info/main/cat1" class="cat1">団員向け</a></li>
<li><a href="http://ai-kon.info/main/contact.html" class="contact">お問い合わせ</a></li>
</ul>
</div>
</dd>
</dl>

あとは、body タグの class 属性が layout-three-column になるように設定を進めていけば大丈夫だと思います。
それではよろしくお願い致します。

[5] Posted by yujiro logo : November 16, 2007 2:51 PM

いつも、参考にさせて頂いています。ありがとうございます。

タグクラウド 折りたたみの記事中にある、「CSSは別途掲載します。すいません。」を読んで、別途掲載されているCSSを探したのですが、どうしても見つかりませんでした。

折りたたみは成功したのですが、単なるリスト表示になってしまいました(苦笑)

自分でも、色々とCSSをいじってみたのですが、どうも当初の見た目に戻りません。

テンプレートはMT標準のものを使っています。

もし、お時間があれば、CSSの解説を追記なりして頂けると嬉しく思います。

[6] Posted by Nori : July 7, 2008 11:35 AM

>Noriさん
こんばんは。
ご返事遅くなり申し訳ありません。
ご質問の件ですが、CSSはまだ未掲載でした。すいません。ただし、掲載予定のCSSは折りたたみマークのCSSのみであって、タグクラウドのCSSは元のCSSを使うようにしています(が何か間違っているかもしれません)。
カスタマイズされているブログのURLをご連絡頂ければ、適切な回答ができると思います。
それではよろしくお願い致します。

[7] Posted by yujiro logo : July 21, 2008 1:51 AM

たびたびすみません。
MT4にタグクラウドの折りたたみを上記の様に設定した場合、
タグの利用頻度で並び替えする事は可能でしょうか。

<MTTags sort_by="count | rank">

と記述すると、何故か降順で表示されてしまいます。
公開テンプレートを利用させていただいています。

もし可能でしたら教えてくださると助かります。
よろしくお願いします。

[8] Posted by しほ : February 9, 2009 11:48 PM

>しほさん
こんばんは。
ご質問の件ですが、

<MTTags sort_by="count">

でいかがでしょうか。
それではよろしくお願い致します。

[9] Posted by yujiro logo : February 15, 2009 11:52 PM

>yujiroさま
ありがとうございます!できました〜!!

[10] Posted by しほ : February 16, 2009 11:54 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)