現在、日々の日記はココに書いてます。↓
2006年10月16日 18時58分2006:10:16:18:58:00

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

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>

で、出来た画面は、これ。
タグ画面-後


まぁ、二番煎じなので、面白くもなんとも無いですが ^_^;
キーワードで関連記事検索:

カスタマイズ

タグクラウド

タグ

人気Blogランキング
(気づいたこと 感じたこと お気軽にコメントください。 疑問・質問・苦情も 大歓迎です。)
この記事へのコメント
ありがとうございました!!

>>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
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック

Seesaaブログのタグクラウドとページャーを見やすくする
Excerpt: 先日、カテゴリと過去記事の一覧ページを見やすくした。今回はその続き。 ■Seesaaブログのカテゴリと過去記事の一覧ページを見やすくする | 本質思考道場 1.タグクラウドを見やすくする ..
Weblog: 本質思考道場
Tracked: 2008-06-20 02:27
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。