はてなブックマークのタグリストでクラウド風な大小のメリハリを出す方法
そもそもはてブのタグ一覧にはリスト表示とクラウド表示の 2 種類があるのだが、ここではリスト表示のままで、登録ブックマーク数の多いタグの文字サイズを大きく、少ないタグは小さくとタグクラウド風な表示に変えてみる方法を記しておく。
第一に何故タグクラウドではあんなふうにフォントサイズを分別することができるのか
クラウド側のスクリプトが、登録されているアイテムの数ごとにランク分けなどをして異なる class 名を各タグにそれぞれ振っていて、それを CSS 側で class ごとにフォントサイズや色の濃さなどの設定をしている仕組み。登録数が少ない(=あまり使われない)タグの文字は小さくて、多くブックマークされたタグは大きいという例の説明は、以下に貼った自分のはてブタグクラウドのキャプチャで事足りる。
こんな感じの大小のメリハリを、デフォルトでは等間隔かつ等サイズな一覧で、このブクマはどんなタイプの記事をブックマークする傾向があるかということをタグを見ても一目ではわかりにくいタグリストに導入してみよう。
原理そして設定
はてなブックマークのシステム側が管理している CSS ファイル (はてブが読み込んでいる CSS は複数あるが、パスが http://b.st-hatena.com/css/users.css?[YOUR TOKEN] となっているもの、上からふたつめにある stylesheet) を見てみると .tag-cloud-size-XX (XX には 0 から始まる数)という複数の class 群があり、これがタグクラウドにフォントサイズを割り振っている。
ul.tag-cloud li.tag-cloud-size-0 a {
color: #9acc9a;
font-size: 80%;
}
ul.tag-cloud li.tag-cloud-size-1 a {
color: #8fc78f;
font-size: 80%;
}
ul.tag-cloud li.tag-cloud-size-2 a {
color: #83c183;
font-size: 90%;
}
・
・
・といった要領で延々と続いていっている。(終点については最後に説明)
ここでもうひとつ知っておくべきことに、リスト一覧のタグの文字列にもこれらの class 名が振られていることがある。振られてはいるのだが、デフォルト状態でそうであるようにリストの方ではタグ毎の表示に差が無い。だが、ユーザー設定の独自スタイルシートのフォームに改めて .tag-cloud-size-XX 群を追加すればリスト側でもフォントサイズの違いが反映される。入力して更新すればこんな感じになる。これでこの人は 2ch コピペブログとアニメとゲームのことばかりブックマークしていることがよくわかりましたね。
基本的に .tag-cloud-size-XX は上記の CSS ファイルからコピペしてくるだけでよいと思うが、一番使われているタグをもっと強調したい場合は、 XX の値が大きい class 順で font-size の値を上げたり、 font-weight: bold するとか。
XX の最大値は、タグの登録内容次第で変化するので誰しもが同じものではない。調べてみたところ自分は 11 が最大値だったが、その他のはてブのソースを見てみると 10 や 12 が最大の者も居る。登録数が最も多いタグと少ないタグの差が広い人ほど、最大値は大きくなる傾向にある。差が大きいほど割り当てられる class の数、ランクが多いということ。
