タグクラウドをいじる[MT5]

2012年6月 6日

長いこと、いじろうと思っててほったらかしになってたタグクラウドをいじることにしました。

一応2011年5月31日の記事で、自分が描いてたタグクラウドが表示されていたので、それはそれでよかったんです。

記事を書くたびにタグはきっちり付けていこうと思っていたので、その数はどんどん増えていくだろうと思っていました。実際増えていってます。

そこで、トップページには少数のタグだけ表示しておき、全部のタグ別のページに表示したいと前から思ってたわけです。で、ほったらかしになってたんですな。

↓ これが現在の状態。「もっと見る」のリンクは貼られていません。

 120606-01.gif

 

あら?削除されてる

それで、以前からちょくちょく参考にさせていただいてたブログがありまして、別ページにタグクラウドを表示するってことをされてました。bzbellさんのMovable Type 備忘録というブログだったんですが、削除されていて表示できませんでした。

実は6/4に書いた「関連記事を付けてみた」で使用したプラグインが、このタグクラウドを別ページに表示させる方法でも使われていたのです。一石二鳥!っと思ってたのに。

でまぁ、色々検索してみたんやけど・・・実際にページに施したって人は見つかったけど、とうとう詳しくはわかりませんでした。

もう1つの問題はトップページのそのタグクラウド、8段階40単語表示なんやけども、現在名前順に並んでいます。数ある中から抜粋して40個出してるのに、名前順て!と思うことです。リファレンスにも 書いてますが、他のソート方法はあるけど、あまり良さそうじゃないな~って感じ。

 

結論

  • 別ページ表示の全タグは、最初何か凝ろうと思ってたけど、それはやめて、名前順にして普通に表示。
  • トップページのタグクラウドは、なにか違った条件でソートするようにする。

・・・となりました。

 

別ページに全タグ表示

この方法が正しいかということは置いといて、うまく表示できたのでその方法を。

1)インデックステンプレートでアーカイブインデックスにチェックを入れ、「テンプレートの複製」をする。コピーが出来上がる。

2)コピーを開いて、下記のように書き換える。

  •  タイトル: タグ一覧
  • 出力ファイル名: tagcloud.php
  • 種類: アーカイブインデックス 

内容は、赤字部分をゴッソリ削除し、ウィジェット「タグクラウド」の青字部分を入れ替えて保存。

<div id="content">
<div class="blog">
<mt:IfArchiveTypeEnabled archive_type="Category">
…
</mt:IfArchiveTypeEnabled>
</div>
</div>

<div id="content">
<div class="blog">
<ul id="tags">
<mt:tags limit="0" sort_by="name">
    <li class="module-list-item taglevel<mt:tagRank max="8" />">
        <a href="<mt:tagSearchLink />"><mt:tagName /></a>
    </li>
</mt:tags>
  </ul>
</div>
</div>

 

 トップページのタグクラウド変更

最新記事に使われたタグを表示することにしました。

[参考サイト]

最新10件の記事で使われているタグのうち5つのタグをタグクラウドで表示

ウィジェットのタグクラウドで、赤字部分を青字部分に書き換え。変更は、20単語表示にしていることと、すでに記述されているスタイルシートでスタイルが反映されるようにしました。

<dd class="side">
<ul id="tags">
<mt:tags limit="40" sort_by="name">
    <li class="module-list-item taglevel<mt:tagRank max="8" />">
        <a href="<mt:tagSearchLink />"><mt:tagName /></a>
    </li>
</mt:tags>
  </ul>
</dd>

<dd class="side">
<MTSetVar name="i" value="20">
<MTEntries lastn="30">
<MTEntryTags>
    <$MTTagName setvar="tagname"$>
        <MTUnless name="seen{$tagname}">
        <MTIf name="i" gt="0">
            <MTSetVar name="i" op="--">
            <MTSetVar name="seen" key="$tagname" value="1">
            <MTSetVarBlock name="push(tag_htmls)">
                <li class="module-list-item taglevel<$mt:TagRank max="8"$>"><a href="<$mt:TagSearchLink$>"><$mt:TagName$></a></li>
            </MTSetVarBlock>
        </MTIf>
        </MTUnless>
    </MTEntryTags>
    </MTEntries>
       <ul id="tags">
        <MTLoop name="tag_htmls">
            <MTVar name="__value__">
        </MTLoop>
       </ul>
</dd>

↓ 仕上がった感じ。

 120606-02.gif

 

仕上げ

ちょっと文字が詰まってしまってるので、スタイルシートを変更して間隔を開けて、下のような背景を用意して、隙間を埋めました。赤字が変更部分。

ul#tags {
    margin-top: 5px;
    padding: 0.5em 0px;
    line-height: 1.3;
    background-image: url(<$mt:BlogURL$>image/tagback.gif);
}

↓ 使用背景。ゴチャゴチャ感が出ますね。

 120606-03.gif

↓ 仕上がった感じ

 120606-04.gif

カテゴリリストのツリー化[MT5]

2010年3月16日

カテゴリーが異様に長くなってるので、いい手はないかと思っていた。まぁ以前のブログ記事も後々持ってこようなんて思ってるから、最初にカテゴリを作りすぎたってこともあったりして・・・。bleah

前からいじるならこれ!と決めていたので早速お世話に。

[参考サイト]

この方すごいね。ブログいじり始めた当初からよく記事読ませていただいてます。解説もよくわかるし・・・。( ゚д゚)ハッ! それよか作業進めよ。sweat01

 

menufolder.jsのダウンロードと設定

menufolder.jsをダウンロードしてきた。バージョン7.00が最新なんかな?ほんで中身確認。

若干書いてある内容は違ってたりするけど、要はvarの文字の指定があってたらええねんな。1か所だけ、記事と違うとこがあったので変更した。

→ var offsetForTitleAndMarkOfSubcategory = 1;

そんで、メインページと同じとこにUP。

 

各ページにscript 要素追加

メインページ・カテゴリ別ブログ記事リスト・ブログ記事・月別ブログ記事リストの4つに追加。

 

カテゴリアーカイブの内容を変更

実は本(レッスンブック)見て1から書いたので、タグの順序とか若干違っているのであった。

いくら考えても、その違いがなぜあるのかわからんかったので、思い切って全部削除し、小粋さんが表示されているソースにそっくり書き換えた。sweat02

 

CSS追加

メニューのフォントサイズが少しこのままだと小さいので、9pxやめて11pxにしました。

これもこのままコピーして追加。(青字が変更箇所)

ul.tree {
    margin: 0 0 0 5px;
    padding: 0;
    font-size: 11px;
    list-style: none;
}

 

ツリー画像のUP

で、完成。

 

記事が古かったので、不具合出たらどうしよう・・・とか思ったけど、MT5でもいけたみたい。

 

最近思うんやけど、こないいじるのに苦労するんやったら、小粋さんの公開されているテンプレートをそのままもらって、いじった方がよかったかなーと思ったりしてる。

次・・・バージョン上がって、1からやり直す時は、小粋さんのテンプレートもらうことにしよう・・・。happy02

タグクラウドをいじってみる[MT5]

2010年3月14日

タグクラウドをかっこよく、デザイン性にあふれるものにできないかと、検索していたら次のサイトが見つかりました。flair

[参考サイト]

3.5ping.org>>Tag Cloudのスタイル

 

いやーカラフルで、このごちゃごちゃ感よくて、早速導入を。

ほんで、スタイルシートの設定だけで済むとこがええ。とりあえず、6色で段階的に頻度を表すとこは、8色に変更してみました。

色は、PCCS色相環を採用し、2:Rの赤から青方向に8色取って、フォトショップで色相と明度を少しいじりました。以下が使用した8色。赤が強くなるにつれて、タグの頻度が高くなります。

100314-1.jpg

そして、スタイルシートも、ダウンロードしたデータを参考に、少しいじりました。

/*タグクラウド*/
ul#tag {
  margin: 0 0 20px;
  padding: 0.5em 10px;
  line-height: 1.1;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

ul#tag li {
  margin: 0;
  padding: 0;
  display: inline;
  font-size: 100%; /* ここで相対的に文字サイズを変更 */
}

ul#tag li a {
  padding: 2px 5px;
  border-width: 1px;
  border-style: solid;
  position: relative;
  text-decoration: none;
  background-color: #ffffff;
}

ul#tag .rank-1 a {
  z-index: 8;
  border-color: #d74984;
  color: #d74984;
  font-size: 175%;
  font-weight: bold;
  top: 5px;
}

ul#tag .rank-2 a {
  z-index: 7;
  border-color: #c2478e;
  color: #c2478e;
  font-size: 160%;
  font-weight: bold;
}

ul#tag .rank-3 a {
  z-index: 6;
  border-color: #bd479e;
  color: #bd479e;
  font-size: 145%;
  font-weight: bold;
  top: 5px;
}

ul#tag .rank-4 a {
  z-index: 5;
  border-color: #a44da3;
  color: #a44da3;
  font-size: 130%;
}

ul#tag .rank-5 a {
  z-index: 4;
  border-color: #85549c;
  color: #85549c;
  font-size: 115%;
}

ul#tag .rank-6 a {
  z-index: 3;
  border-color: #7861a5;
  color: #7861a5;
  font-size: 100%;
  top: 5px;
}

ul#tag .rank-7 a {
  z-index: 2;
  border-color: #6e7db0;
  color: #6e7db0;
  font-size: 85%;
}

ul#tag .rank-8 a {
  z-index: 1;
  border-color: #4891b6;
  color: #4891b6;
  font-size: 70%;
}

ul#tag li a:hover {
  border-color: #ffffff;
  z-index: 10;
  color: #ffffff;
  background-color: #cc0063;
}

 

どない?右のサイドに表示されてると思うんやけど。大成功!catface

 

で、ちょっとショックなことが・・・。

タグをクリックしたら、そのワードで検索がかかるんやね。検索結果のページ覗くと案の定レイアウトが乱れてた。

前回の記事(PHPモジュール化その2)で、システムテンプレートの検索結果をPHP化したんやけども、その際、formタグに仕掛けする方法を取った。よー考えたら、このタグクラウドの場合、form使ってないから、そのまま検索結果のページが開かれるのであった。sweat02

ウキウキしてたのもつかの間、いつかここを直さないとアカンわなぁ・・・。検索できてるみたいやし、しばらくこのままでいこかなとは思てるけど。