人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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


●質問者: dingding
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS はてなブックマーク タグ タグクラウド ロジック
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● armond
●27ポイント

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としている部分は、タグに応じた変数を読み込む。

◎質問者からの返答

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


2 ● armond
●27ポイント

色の方は、先ほどの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/

◎質問者からの返答

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

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


3 ● zebevogue
●26ポイント

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

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

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

要するに

class="size color"

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

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

例:

size1 {font-size:80%}

.

.

size6 {font-size:130%}

color1 {color:black}

.

.

color6 {color:whihte;}

データ的には

・タグ名

・タグの数

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

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ