MovableTypeは記事にタグをつけることができるので、私のサイトにもタグクラウドを設置してみました。タグの利用頻度に応じて、文字のサイズや色を変化させ、コンテンツを利用者に視覚的に理解してもらうことができます。タグクラウドを知らない方のために、はてなブックマークのタグクラウドの例を掲載してみました。 タグクラウドは文字のサイズ、色の濃淡があることで視覚的な理解を早めることができますね。 私のタグクラウドは、タグの使用回数に応じて文字サイズとフォントカラーを変えるようにしています。相対的にランク(6段階)決めを行い、それぞれのランクにCSSを指定して表示しています。 文字サイズは相対的に表示し、低いランクは薄いカラーリングを使い、高いランクには濃いカラーリングと font-weightにboldを加えました。 MT向けのタグクラウドソース <MTTags> <MTSetVarBloc
タグのレベルを設定するテンプレートソース <ul> <MTTags> <li class="tagLebel<$MTTagRank max="6"$>"> <a href="<$MTTagSearchLink$>" title="<$MTTagName$>"> <$MTTagName$></a></li> </MTTags> </ul> 文字のサイズに強弱を付けるCSSソース ul li.tagLebel1 { font-size: 200%; } ul li.tagLebel2 { font-size: 180%; } ul li.tagLebel3 { font-size: 160%; } ul li.tagLebel4 { font-size: 140%; } ul li.tagLebel5 { font-size: 120%; } ul li.tagLebel6 { font-si
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く