はてなブックマークの右下にあるタグクラウドの表記についてのロジックを予想でもいいので教えてください。


たとえば以下です。
タグの数が多い→文字が大きい
最近1週間でのタグの数→色が濃い
のようなロジックが知りたいです。

また可能であれば、そのCSSの中身の解説をいただければすごくありがたいです。

回答の条件
  • 1人2回まで
  • 登録:2007/06/14 14:46:28
  • 終了:2007/06/15 11:33:27

回答(3件)

id:armond No.1

armond回答回数49ベストアンサー獲得回数42007/06/14 17:14:32

ポイント27pt

http://www.sixapart.jp/movabletype/manual/3.3/a_template_tag_ref...

MovableTypeにも同様の機能がありますが、これは登録されているタグの頻度を、任意の段階に分割して整数で出力するようです。

CSSでは、この数値に応じて文字のポイントサイズを指定してあげればタグクラウドが実装出来ます。例えば下記のような方法が考えられます。

<span style="font-size: ※pt;">タグテキスト</span>

※の部分に、タグに応じた変数を読み込む。

タグの出現頻度を表す段階が固定されているのであれば、これをCSSのクラスとして定義することも出来ると思います。

<strong class="tag6">タグテキスト</strong>

仮に6としている部分は、タグに応じた変数を読み込む。

id:dingding

タグの頻度で大きさのかえるまではなんとなく理解できているのですが、色の濃さが何なのかなと思っています。

2007/06/14 19:44:42
id:armond No.2

armond回答回数49ベストアンサー獲得回数42007/06/14 20:14:03

ポイント27pt

色の方は、先ほどのclassのそれぞれに対して定義を行っておけば実装出来そうです。

tag6 { font-size: 130%; color: #000000; }
tag5 { font-size: 120%; color: #333333; }
tag4 { font-size: 110%; color: #666666; }
tag3 { font-size: 100%; color: #999999; }
tag2 { font-size: 90%; color: #CCCCCC; }
tag1 { font-size: 80%; color: #E5E5E5; }

http://q.hatena.ne.jp/

id:dingding

これでは、大きさと濃さはセットになりますよね。

はてなのタグクラウドを見てみると、大きくても薄いものがあったりします。

2007/06/14 21:03:44
id:zebevogue No.3

zebevogue回答回数65ベストアンサー獲得回数72007/06/15 02:21:03

ポイント26pt

他の人が指摘していますが、サイズは頻度でしょう。

質問本文にもありますが、全体の頻度と過去1週間以内の頻度を

別のクラスで実装していると思います。

要するに

class="size color"

として複数のクラスを割り当ててるんじゃないでしょうか。

それぞれsizeには大~小、colorに濃~薄とあるとして。

例:

size1 {font-size:80%}

.

.

size6 {font-size:130%}

color1 {color:black}

.

.

color6 {color:whihte;}

データ的には

・タグ名

・タグの数

・タグの数(直近1週間)

という風に保存しているのかも知れません。

id:dingding

なるほど。別のクラスを割り当ててるんですね。参考になります。

2007/06/15 11:33:02
  • id:armond
    http://b.hatena.ne.jp/

    はてなのHTML構造をみてみると、クラウドの一つ一つの要素を囲むaタグに、下記のようなソース(指定)が吐き出されているのがわかります。

    >||
    style="font-size: 16.3471074380165pt;" class="tag-latest
    ||<

    ここから推測するに、
    はてなのシステムは、登録数(頻度)と、登録のタイミング(タイムスタンプ?)の、2つのパラメータ(仮にa,b)を保持しているようです。

    文字の大きさは、頻度(a)から、おそらく単純な計算によって導き出された数値を、インラインcssで記述。

    文字色については、
    >||
    class="tag-later"
    class="tag-latest"
    class="tag-earliest"
    ||<
    などとなっているので、投稿のタイミング(b)から判別しclassを書出ししているものと思われます。


    なので、これを再現するためには、
    CSSの構成はどのような方法でも良いのですが、まずシステム上での複数のデータ保持と、吐き出しに当たっての計算が必要になってくると考えられます。
  • id:dingding
    ありがとうございます。
    クラス名から見ても、時期によって、色を決めているのは確かですね。
    とても参考になります。ありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません