遊ぶブログ＋ Javaスクリプト小技集

ブログ
リンク
フリーエリア
動画･音楽
楽天

ブログ

Entries

件のコメント

[C63] はじめまして。

プラグイン公開ありがとうございます。

表示されるタグのソートに対応いただけませんでしょうか？記入したURLエントリでタグクラウドを使用すべく、四苦八苦しております。java 等の知識はありませんが、努力するつもりでおります。宜しくお願いします。

2007-05-18
投稿者 : a nomaly
URL
編集

[C64] ソートするタイプなら。

共有プラグインに他の方が作ったソートするタイプのタグクラウドが公開されていますので、そちら利用するのが早いかと思われます。
プラグイン名：ソートされたタグクラウド1.93

2007-05-19
投稿者 : Gamo
URL
編集

[C67] 早速の返答有り難うございます。

お教えいただいた「ソートされたタグクラウド1.93」ですが、導入したところサイドカラムには表示されるのですが、エントリ内では化けてしまい....おそらくテンプレとの兼ね合いかと思うのですが。。

と、こちらのタグクラウドのデザインがとても気に入っているということもあります＾＾。作者様の意向とご都合を重視の上で、選択肢の一つとして機能追加いただけるようでしたら、有り難いです。

2007-05-20
投稿者 : a nomaly
URL
編集

[C70] とりあえず。

考えておきますが、期待しないでください。＾＾;

2007-05-23
投稿者 : Gamo
URL
編集

コメントの投稿

件のトラックバック

トラックバックURL: http://blogsquare256.blog85.fc2.com/tb.php/126-f5b8e293; この記事に対してトラックバックを送信する（FC2ブログユーザー）

タグクラウド

タグ(ユーザータグ)のクラウドです。

文字サイズは記事中のタグ数に応じて4段階。

タグ数：文字サイズは、初期設定で次のようになっています。

1～5：12
5～10：14
11～20：18
20以上：26

サンプルはサイドバー参照。

function cloud(url,name,count) {
    var volume = 1;
    if (count>5) volume = 2;
    if (count>10) volume = 3;
    if (count>20) volume = 4;

var a = document.createElement('a');
    var span = document.createElement('span');
    a.href=url;
    span.className = 'cloud'+volume;
    a.appendChild(document.createTextNode(name));
    span.appendChild(a);
    document.getElementById('cloud').appendChild(span);

}

</script>

<script type="text/javascript">
cloud('<%ctag_url>','<%ctag_name>',<%ctag_count>)　
</script>

タグ数(変数count)の判定は以下のところでやっています。この部分を書き換えれば、タグ数に対応する文字サイズを変更できます。

var volume = 1;
if (count>5) volume = 2;
if (count>10) volume = 3;
if (count>20) volume = 4;

文字サイズの設定はスタイルシートの以下の箇所になります。

これは、連番cloud1～cloud4のように指定します。

#cloud span { margin:0 6px ; line-height:25px;}
#cloud span.cloud1 { font-size: 12px; line-height:25px;}
#cloud span.cloud2 { font-size: 14px; line-height:25px;}
#cloud span.cloud3 { font-size: 18px; line-height:25px;}
#cloud span.cloud4 { font-size: 26px; line-height:25px;}

たとえばクラウドを5段階にしたい場合

のように追加し、さらに、スクリプトを以下の部分を書き換えます。

var volume = 1;
if (count>5) volume = 2;
if (count>10) volume = 3;
if (count>20) volume = 4;
if (count>30) volume = 5;

スタイルシートの番号(#cloud span.cloud4 )とvolumeの番号(volume = 4)は対応するように同じ番号を付けます。