小粋空間: エントリー・タグアーカイブ

Top ＞ Movable Type ＞カスタマイズ＞エントリー・タグ [全て開く]

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>

３．デフォルト表示数を変更する

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

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

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

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

Comments [5] | Trackbacks [0]

2006年12月26日

タグ検索でエントリーの画像を表示する

December 26,2006 1:25 AM
Tag：[Customize, MovableType, SearchResult, Tag]
Permalink

Movable Type のタグ検索機能で、エントリータイトル・概要の代わりに、エントリーに含まれる画像を検索結果画面に表示するカスタマイズです。

下のスクリーンショットは、デフォルトテンプレートで、"image" というタグを与えた3つのエントリーにそれぞれ異なる画像を表示させ、"image" タグで検索した検索結果画面のサンプルです。

タグ検索でエントリーの画像を表示する

デザインが大雑把で申し訳ありませんが、以前このカスタマイズについてのご質問を頂いていてからかなり時間が経ってしまいましたので、取り急ぎの公開です。

試してみたところ、Collect プラグインを利用すれば、タグ検索による画像表示が行えることが判明しました。

１．プラグインのダウンロード

下記のサイトにある「Download」のリンクをクリックして、Collect Plugin をダウンロード

staggernation.com：Collect Plugin for Movable Type

解凍した中にある Collect.pl を plugins フォルダ直下にアップロード。

２．検索結果テンプレートの修正

ここでは、デフォルトテンプレートを例にして <MTSearchResults>～</MTSearchResults> の修正箇所を示します。

リスト1 のように、赤色を削除して青色を追加します。

<MTSearchResults>
    <MTBlogResultHeader>
        <h3 class="search-results-header">
        <MTIfStraightSearch>
            ブログ: <$MTBlogName$> での検索結果
        </MTIfStraightSearch>
        <MTIfTagSearch>
            <$MTBlogName$>でタグ <$MTSearchString$> が指定されているエントリー
        </MTIfTagSearch>
        </h3>
        <div class="search-results-container">
        <MTIfTagSearch>
<ul>
        </MTIfTagSearch>
    </MTBlogResultHeader>
 
    <MTIfStraightSearch>
        <h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
        <p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
    </MTIfStraightSearch>
        <MTIfTagSearch>
            <div class="entry-tags">
                <h4 class="entry-tags-header">タグ:</h4> 
                <ul class="entry-tags-list">
                    <MTEntryTags>
                        <li class="entry-tag"><a href="<$MTTagSearchLink$>&amp;IncludeBlogs=<$MTSearchIncludeBlogs$>" rel="tag"><$MTTagName$></a></li>
                    </MTEntryTags>
                </ul>
            </div>
            <MTCollect tags="img">
                <MTCollectThis show="0">
                    <$MTEntryBody$>
                </MTCollectThis>
                <MTIfCollected tags="img">
                    <MTCollected tags="img" lastn="1">
<li style="display:inline"><a href="<$MTEntryPermalink$>"><img src="<$MTCollectedAttr attr="src"$>" /></a></li>
                    </MTCollected>
                </MTIfCollected>
            </MTCollect>
        </MTIfTagSearch>
 
        <MTIfStraightSearch>
        <p class="entry-footer">
            <span class="post-footers"><MTIfNonEmpty tag="EntryAuthorDisplayName">投稿者: <$MTEntryAuthorDisplayName$>  </MTIfNonEmpty>日時: <$MTEntryDate$></span>
        </p>
        </MTIfStraightSearch>
 
    <MTBlogResultFooter>
        <MTIfTagSearch>
</ul>
        </MTIfTagSearch>
        </div>
    </MTBlogResultFooter>
</MTSearchResults>

リスト1　検索結果テンプレート修正箇所

ここで行っている修正は主に下記の通りです。

タグ表示部分に Collect プラグインの MT タグを挿入
タグ検索は順序なしリスト（ul - li）で表示
タグ検索結果の ul 要素の開始タグは MTBlogResultHeader に、終了タグは MTBlogResultFooter に埋め込み（ここに埋め込まないと、検出されたエントリー数分表示されるため）
エントリータイトルおよび投稿者情報部分は通常検索時のみ表示されるよう、<MTIfStraightSearch>～<MTIfStraightSearch> で括る

修正方法は他にも色々ありますので、お試しになってください

３．エントリーに含まれる画像の表示数を変更する

エントリーに含まれる画像の件数を設定しているリスト2 の赤色部分を変更します。

<MTCollected tags="img" lastn="1">

リスト2　画像表示数変更方法

なお、エントリー表示数を制御することはできません（検索されたエントリー数分を全て表示）。

Comments [0] | Trackbacks [0]

2006年6月29日

Movable Type 3.3 エントリー・タグ詳説

June 29,2006 9:38 AM
Tag：[MovableType, Tag]
Permalink

Movable Type 3.3 から追加されたタグ機能の利用方法が下記のページに掲載されています。

Movable Type Beta Weblog：Everybody loves tags!

以下、元記事で紹介されているタグの機能や利用方法について超意訳で紹介します。

１．タグとは？

タグは、項目の特定の一部分を説明するための簡単な単語、あるいは語句です。例えば、私は（私自身に）

human, male, guy, sailor, product manager, san franciscan, shaved head, tall, joke-cracking, six apartisan, stressed-out, geek

というタグ付けをするかもしれません。それらのタグの全てが、私が誰であるかに関して、より良い情報を与えてくれます。

Movable Type ではエントリーにタグを与える機能を提供します。例えば、あなたはこの記事に関するエントリーを書き、エントリーに、

movable type 3.3, movable type, new release, beta, feature, tagging, entry tags

というタグを付与することができます。
そして後でこのエントリー（や他のエントリー）を見つけるのに使用することができる、特別なメタデータ（MTタグ）を提供します。

Movable Type 3.3 では「自動同義語」をサポートしています。例えば "Movable Type" は "movabletype" と同等であるとみなします。特定のタグを共有するエントリーは、自動的に関連づけられます。これで Movable Typeインタフェース、またはあなたの公開ブログから関連する内容を見つけることが簡単になります。

タグのデフォルト区切り文字はカンマですが、

メイン・メニュー > システム・メニュー > 投稿者 > [投稿者名]

の「タグ区切り」でスペース文字に変更することもできます。
エントリー編集画面のタグ・フィールドでは、使用済みのタグを利用した自動補完機能があります。

２．キーワードとの違い

キーワードはエントリーに括りつけられた、MTEntryKeywords によって出力される文字列で、検索することも可能ですが、エントリー・タグは強力かつ洗練されたタグのセットで、「タグサーチ」という機能で特定のタグが与えられたエントリーを検索します。
将来は XML-RPC API でエントリー・タグがサポートされる予定です。

３．カテゴリーとの違い

タグは関連するエントリーを分類・組織化し、検索を助けるという点においてはカテゴリーと同様ですが、下記の点に相違があります。

Model:: カテゴリは目次のようにトップダウン的な設定ですが、タグは本のインデックスのようにボトムアップで設定されます。

Specificity:: カテゴリは汎用的で、エントリーを副カテゴリに分配することで特性を獲得する場合に適しています。タグは限定的で、タグの組み合わせで（エントリーの）特性を獲得する場合に適しています。

Planning:: カテゴリは少ない数で計画性があり、時間の経過によって一貫性のあるものとなります。タグは計画性がなく、各項目の細部に基づいたものになります。

Archiving vs searching：: カテゴリーは「アーカイブ」として異なるページに各カテゴリーに関連するエントリーを静的に格納します。タグも1ページに特定のタグによるエントリーを表示しますが、それらのページはダイナミック（再構築不要）に表示されます。

４．エントリー・タグの追加と削除

タグを利用するには、エントリー編集画面の下にある「画面の表示設定を変更」をクリックして、ダイアログの「エディター・フィールド」欄の左側にあるラジオボタンが「基本」になっているので「すべて」または「カスタム」を選択します。
「すべて」を選んだ場合はそのまま右下の「保存」をクリックします。「カスタム」を選んだ場合は、「タグ」というチェックボックスにチェックをしてください。
追記：左下にある「アクション・バー」で「両方」を選択しておくと「保存」「確認」ボタンがエントリー上部にも表示されて便利です。

エントリー・タグフィールドについて

エントリー・タグフィールドにタグを設定します。タグを複数記述する場合はカンマで区切ってください。タグはカンマ以外のどのような文字列も許容しますが、

@ ! ` \ < > * & # / ~ ? ' " . , = ( ) $ { } [ ] ; : <space> + -

以外の文字列を入力することで正常に動作します。入力した英文字は最終的に小文字として扱われます。

例外的な利用方法として、タグに "@" を付加することでタグは「プライベート・モード」として機能します。プライベート・モードのタグはブログ上で表示されることはありませんが、検索インタフェースや管理インタフェースで使用することができます。

エントリー・タグの自動補完

エントリー・タグを入力フィールドにタイプした時、使用済みのエントリー・タグと一致する文字列で始まるのであれば、それらが候補としてドロップダウンリストで表示されます。リストを直接クリックするか上下キーで選択した後 Tab キーを押すと、エントリー・タグの入力が補完されます。

５．エントリー・タグの管理

エントリー・タグはブログ全体およびブログ単位のどちらでも管理可能です。それぞれの管理画面のサイドバーにある「タグ」をクリックすると管理画面に遷移します。

削除

削除したいタグの左側にあるチェックボックスをチェックして、削除ボタンをクリックします。

タグ名の変更

タグ名のリンクをクリックするとテキストボックスに切り替わるので、任意の名称を入力して「名前の変更」をクリックします。

タグのマージ

前記の「タグ名の変更」で、すでに存在するタグ名を設定すると「マージ（合体）しますか？」という旨のダイアログが表示されます。「OK」をクリックするとマージされます。

６．エントリー・タグの表示

Movable Type 3.3 ではエントリー・タグ表示のために、次のMTタグを提供します。

MTTags
MTTagName
MTTagID
MTTagCount
MTTagRank
MTTagSearchLink
MTEntryTags
MTEntryIfTagged

以下、テンプレートに対するエントリー・タグの設定方法です。関連タグを青色で示しています。

エントリーにタグを表示

<MTEntries>
    The entry "<$MTEntryTitle$>" is tagged:
        <MTEntryTags glue=", "><$MTTagName$></MTEntryTags>
</MTEntries>

エントリーにタグを表示（タグの有無判定あり）

<MTEntries>
    The entry "<$MTEntryTitle$>"
        <MTEntryIfTagged>
            is tagged: <MTEntryTags glue=", "><$MTTagName$></MTEntryTags>
        <MTElse>
            has no entry tags.
        </MTElse>
        </MTEntryIfTagged>
</MTEntries>

タグ検索用リンクを表示

<MTEntryTags glue=", ">
    <a href="<$MTTagSearchLink$>"><$MTTagName$></a></MTEntryTags>

tag 属性で指定したタグの有無で表示を制御

<MTEntries>
    [...MTEntry data...]
    <MTEntryIfTagged tag="important">
        <p><img src="/movabletype/docs/3.2/images/gold_star.gif"
            alt="This is important!" /></p>
    </MTEntryIfTagged>
</MTEntries>

ブログで使用されるすべてのタグを表示

<ul>
    <MTTags>
    <li>
        <a href="<$MTTagSearchLink$>"><$MTTagName$></a>
    </li>
    </MTTags>
</ul>

ブログで使用されるすべてのタグを表示（タグカウントつき）

<ul>
    <MTTags>
    <li>
        <a href="<$MTTagSearchLink$>"><$MTTagName$> (<$MTTagCount$>)</a>
    </li>
    </MTTags>
</ul>

タグクラウド（タグを雲のように表示）

<div class="module-tagcloud module">
    <h2 class="module-header">Tag cloud</h2>
    <div class="module-content">
        <ul class="module-list">
            <MTTags>
                <li class="module-list-item taglevel<$MTTagRank$>">
                    <a href="<$MTTagSearchLink$>"><$MTTagName$></a>
                </li>
            </MTTags>
        </ul>
    </div>
</div>

タグクラウドは下記のCSSが必要です。

.module-tagcloud .module-content {text-align: center; }
.module-tagcloud .module-content .module-list { list-style: none; }
.module-tagcloud .module-content .module-list .module-list-item { display: inline; }
.module-tagcloud .module-content .module-list li.taglevel1 { font-size: 19px; }
.module-tagcloud .module-content .module-list li.taglevel2 { font-size: 17px; }
.module-tagcloud .module-content .module-list li.taglevel3 { font-size: 15px; }
.module-tagcloud .module-content .module-list li.taglevel4 { font-size: 13px; }
.module-tagcloud .module-content .module-list li.taglevel5 { font-size: 11px; }
.module-tagcloud .module-content .module-list li.taglevel6 { font-size: 9px; }

特定のタグが与えられたエントリーのみ表示

<MTEntries tag="TAGNAME">
    [...]
</MTEntries>

特定のタグが与えられたエントリー最新1件をトップに表示

<!-- The "banner" entry -->
<MTEntries tag="Important" lastn="1">
    [...]
</MTEntries>
 
<!-- All other recent entries -->    
<MTEntries>
    [...]
</MTEntries>

注目して欲しいエントリー（"notable" というタグを付与）をサイドバーに表示

<div class="module-archives module">
    <h2 class="module-header">Notable entries</h2>
    <div class="module-content">
        <ul class="module-list">
            <MTEntries lastn="5" tag="notable">
                <li class="module-list-item">
                    <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>
                </li>
            </MTEntries>
        </ul>
    </div>
</div>

tag 属性にNOTオペレータが付与されたタグを用いてエントリーの公開を抑止する

<MTEntries tag="NOT noindex">
    [...]
</MTEntries>

アーカイブページでのタグクラウドのインクルード

再構築時のパフォーマンスの問題を回避するため、タグクラウドをアーカイブページに含める場合は、PHPによるモジュール化またはSSIを用いてください。

Comments [27] | Trackbacks [12]

小粋空間 - a cheap joke and a play on words site

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

１．折りたたみスクリプトの追加

２．タグクラウドの変更

２．１ 公開テンプレートの場合

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

３．デフォルト表示数を変更する

タグ検索でエントリーの画像を表示する

１．プラグインのダウンロード

２．検索結果テンプレートの修正

３．エントリーに含まれる画像の表示数を変更する

Movable Type 3.3 エントリー・タグ詳説

１．タグとは？

２．キーワードとの違い

３．カテゴリーとの違い

４．エントリー・タグの追加と削除

エントリー・タグフィールドについて

エントリー・タグの自動補完

５．エントリー・タグの管理

削除

タグ名の変更

タグのマージ

６．エントリー・タグの表示

エントリーにタグを表示

エントリーにタグを表示（タグの有無判定あり）

タグ検索用リンクを表示

tag 属性で指定したタグの有無で表示を制御

ブログで使用されるすべてのタグを表示

ブログで使用されるすべてのタグを表示（タグカウントつき）

タグクラウド（タグを雲のように表示）

特定のタグが与えられたエントリーのみ表示

特定のタグが与えられたエントリー最新1件をトップに表示

注目して欲しいエントリー（"notable" というタグを付与）をサイドバーに表示

tag 属性にNOTオペレータが付与されたタグを用いてエントリーの公開を抑止する

アーカイブページでのタグクラウドのインクルード

２．１公開テンプレートの場合

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