Top > HP作成> 隠居のBlog備忘録:MT4.1 で TagCloud ページをつくる

2008年7月22日

隠居のBlog備忘録:MT4.1 で TagCloud ページをつくる

 MT3.3 のときに、はじめて TagCloud を設置したときはかなり苦労した。

 MT4.1 では「小粋空間」さんのテンプレート・セットの "two-colomn-liquid-right" を使わせてもらっている。TagCloud は右サイドメニューの中で表示する仕様になっている。Msajii's Blog のようにタグ(キーワード)が多いと「小粋空間」さんの「タグクラウドの折りたたみ for Movable Type 4」を使わせてもらって、折りたたみができる。ただ、私の場合はメッシュを細かくしてタグ(キーワード)をつけたので700 ちかくになっているから、全てを表示すると縦に長くなってしまう。

 それで、MT3.3 のときのようにページで表示できないかネットをググッテみたが、適切なインストラクションがヒットしなかった。それでもいろいろなページを参考に、MT3.3 のときに使っていた「小粋空間」さんの「Movable Type 3.3 エントリー・タグ詳説」のコードを使って、TagCloud ページを作るとうまくいったので備忘録的に書き留めておきたい。

 わかってみれば設置は簡単である。
  1. 方法はインデックステンプレートを新しく作るのである。(追記:2013/1/22)。インデックステンプレートのメインページをまるまる C&P して、新しく名前は何でもいいのだが、TagCloud とでもし、出力ファイル名はこれも名前は何でもいいのだが tagcloud_page.php としてインデックス・テンプレートに保存する。
  2. このテンプレートページの下記の部分を削除し、
    <MTEntries>
       <$MTEntryTrackbackData$>
       <$MTInclude module="ブログ記事の概要"$>
    </MTEntries>
    

    「Movable Type 3.3 エントリー・タグ詳説」の下方にある次のコードを挿入する。
    <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>
    <h2> Tag Cloud </h2> の部分には、TagCloud の説明などに変更できる。
  3. スタイルシートには、次のCSS を追加する。
    /* (タグクラウド用) */
    
    .module-tagcloud .module-content a {text-decoration: none; }
    .module-tagcloud .module-content {text-align: left; }
    .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: 32px; }
    .module-tagcloud .module-content .module-list li.taglevel2 { font-size: 28px; }
    .module-tagcloud .module-content .module-list li.taglevel3 { font-size: 24px; }
    .module-tagcloud .module-content .module-list li.taglevel4 { font-size: 20px; }
    .module-tagcloud .module-content .module-list li.taglevel5 { font-size: 16px; }
    .module-tagcloud .module-content .module-list li.taglevel6 { font-size: 12px; }
    
    .module-tagcloud .module-content .module-list li.taglevel1 a{ color: #000000; }
    .module-tagcloud .module-content .module-list li.taglevel2 a{ color: #0000ff; }
    .module-tagcloud .module-content .module-list li.taglevel3 a{ color: #000000; }
    
    表示するフォントの大きさや色は、ここでいじれる。ランクの区分は6段階が初期値である。
  4. 作ったページへのパス(私の場合:http://n-shuhei.net/atelier/tagcloud_page.php )でブラウザに TagCloud ページが表示できれば成功である。
  5. あとは適当な位置に TagCloud ページへのリンクボタンを設定すれば終わりである。右サイドにボタンを置いたので、サンプルはそちらをみて欲しい。


トラックバックURL

このエントリーのトラックバックURL:
http://n-shuhei.net/cgi/mt/mt-tb.cgi/1611

トラックバック

» カストマイズの履歴 from Atelier
 このページでは 2006年の1月から私のHomePageに手を入れた事柄につい... 続きを読む

» 隠居のパソコン備忘録: (続)ブログ(MT4.1)の表示レイアウトを変更する from Atelier
 【隠居のパソコン備忘録: ブログ(MT4.1)の表示レイアウトを変更する】で... 続きを読む

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)
 MovableType または TypeKey のサインインができない方には、「匿名でコメントする」をクリックください。スパム・コメントを防止するためにコメント入力欄の下のCaptcha:画像で表示されている文字入力をお願いしています。
 できれば、MovableType または TypeKey の登録をしていただければ、Captcha:画像で表示されている文字入力の必要はありません。
MovableType のアカウントの取得は、下のサインインの文字をクリックするとでる画面で「サインイン画面のアカウントがないときはサインアップしてください。」のサインアップをクリックすれば登録画面が表示されます。「ウェブサイトURL」には、http://n-shuhei.net/atelier/ と入力ください。
 また、TypeKey は、 TypeKey サインインをクリックし新規登録ボタンから無料で取得できます。取得された TypeKey で他の多くのブログにコメントができます。)