タグクラウド−タグ画面で遊ぶ

2006/10/16：バグってました。ソース中の",2"を追加してください。
これが無いと、日本語TAGがジャンプできません。(-_-;)
(オペラOK,フォックスOK,IEだけダメ)


調子に乗って、タグ画面で遊んでみました。

ここで言うタグ画面とは、下の画面の、真ん中の枠の事を言っています。


この画面は、カテゴリ−タグクラウド(上の画面の右上のカテゴリ)の一つを選択するか、このブログの場合だと、http://dai-kasegeruka.seesaa.net/tag/の様に、自SeeSaaブログのURL＋tag/ で開きます(tagの設定をしていないブログはどぉなるのかなぁ。教えて下さい)。

今回は画面も大きいので、SeeSaa初期値のフォントの大きさ変更後に、並べ替えをしてみました。

変更は、メインのHTML(デザイン⇒HTML)です。

場所は、

<% if:page_name eq 'tag' -%>
<div class="tag">
<script type="text/javascript" language="javascript" 
src="<% site_info.blog_url %>/js/tag_cloud.js"></script>
<div id="tag_cloud"><% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" class="_tag" title="<% tag.word | html %>/<% count %>"><% tag.word | html %></a> <% /loop -%></div>
<script type="text/javascript" language="javascript"><!--
tag_cloud("tag_cloud");
--></script>
<!-- ここ -->
<br />

です。

そして、<!-- ここ -->に、以下を追加します。

<script type="text/javascript">
<!--
sort2();
function sort2()
{
    var count;                      //  登録数

    var counter     = new Array();  //  件数の配列 保管エリア
    var titleOnly;                  //  タイトル(件数除く) 保管エリア
    var max=0;                      //  件数の最大値保持

    var aString     = new Array();  //  <a>〜</a>の配列 保管エリア

    var tmp1;                       //  タグクラウド全体
    var tmp2;                       //  Aタグの配列
    var i,j;                        //  汎用Loopカウンタ

    tmp1=document.getElementById("tag_cloud");
    
    tmp2=tmp1.getElementsByTagName('a');

    count=tmp2.length;
    for(i=0;i<count;i++)
    {
        titleOnly = tmp2[i].title.substring(0, tmp2[i].title.indexOf("/"));
        counter[i] = parseInt(tmp2[i].title.substring(tmp2[i].title.indexOf("/")+1,tmp2[i].title.length));
        //  parseInt:文字列を数値に変換する
        //
        //  substring:文字列を抽出する
        //      開始位置(0〜)
        //      終了位置+1(0〜)
        //  indexOf:引数文字の位置を返す(0〜)

        //  最大値の保持
        if(counter[i]>max)
        {
            max = counter[i];
        }

        //  各Aタグの保持
        aString[i] =    "<a " +
                        "class='" +
                        tmp2[i].className +
                        "' title='" +
//                      tmp2[i].getAttribute("title") +
                        titleOnly + "(" + counter[i] + ")" +
                        "' style='" +
                        tmp2[i].style.cssText +
                        "' href='" +
                        tmp2[i].getAttribute("href",2) +
                        "'>" +
//                      tmp2[i].innerHTML +
                        "<nobr>" + titleOnly + "(" + counter[i] + ")" + "</nobr>" +
                        "</a>";
    }
    
    //出力
    var tmpHTML="";
    for(i=max;i>0;i--)
    {
        for(j=0;j<count;j++)
        {
            if(counter[j] == null)
            {
                continue;
            }

            if(counter[j] == i)
            {
                tmpHTML += (aString[j] + " ");
                counter[j] = null;
            }
        }
    }
    tmp1.innerHTML=tmpHTML;
}

// -->
</script>

で、出来た画面は、これ。


まぁ、二番煎じなので、面白くもなんとも無いですが ^_^;

(気づいたこと 感じたこと お気軽にコメントください。 疑問・質問・苦情も 大歓迎です。)

Comments

ありがとうございました！！ >>tagの設定をしていないブログは タグ実装前にHTMLを悪戯していた人の場合は、記事検索でノーヒットの時と同じようになりましたよ。・・経験者語る 新しく作りかけのブログで確認してみると、悪戯してない場合も真っ白でした。

Posted by 茨城に住む男のブログ＠おみたこ at 2006年10月17日 01:33

おみたこさん いらっしゃいませ。

＞＞＞tagの設定をしていないブログは
ありがとうございます。
NoHitで、データ0ですね。

じゃ！

Posted by 大 at 2006年10月17日 08:24

こんにちは。 タグクラウドの表示がどうも気に入らなくて、検索してこちらへ伺いました。 見やすく解りやすい記事と、すっきりしたカスタマイズ、非常に助かりました！ ありがとうございました。

Posted by 銀 at 2008年05月25日 08:35

銀さん。お役に立ててなによりです。^^;

最近は、あまりブログカスタマイズに凝ってませんが、調べるのは好きなんで、何かあったら聞いてみてくださいね。

Posted by 大 at 2008年05月25日 19:36