- October 20, 2007 2:28 PM
- Movable Type | XHTML CSS
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。
Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。
表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。
- 2007.10/21 追記・編集
-
- Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正
- 応用編としてTag Cloud 13を追加
単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので
- サイズ
- 色
- 明暗
- 彩度
- 色彩
- 形
というところでタグの強弱をより強調してみました。
HTMLは以下のような要素とクラス名で作ってあるので、もし自分のブログにくっつけたい場合は適切にどちらかを編集してください。
<ul class="tagCloud"> <li class="level1">Tag Name1</li> <li class="level3">Tag Name2</li> <li class="level2">Tag Name3</li> <li class="level6">Tag Name4</li> . . </ul>
タグの強さは.level1～.level6で、level1が最も強くなります。
Tag Cloud10
- 強弱の付け方
- サイズ
- 明暗
- 形
- Z軸
- タグクラウド10 実際の表示例
- Download
10,11,12は、z-indexプロパティを使い、強いレベルのものほど前面にくるようになっている。
また、よりごちゃごちゃ感を出すために、レベルによってposition: relativeで上下へ5pxほどずらしてる。
実用性とはちょっぴり距離を置いたデザインだけど、そこまで使い勝手は悪くないと思う。
Tag Cloud11
- 強弱の付け方
- サイズ
- 明暗
- 形
- Z軸
- タグクラウド11 実際の表示例
- Download
ついでに親要素となるul.tagCloudに以下のような背景画像(もうちょっと濃いほうが良かった)をbackground-position: top rightで置いておくと、よりごちゃごちゃ感が出て良い。
かすたまいず
CSSは結構判りやすいと思うので、行間や文字サイズなど好みに変えてください。また既存のデザインに組み込む場合は、すでにあるulやliのスタイルに上書きされる可能性もあるので、適度調整してください。
使いたいけど好みの配色が無くて、自分で考えるのもダルイ人は、以下の画像を保存してPhotoshopで開き、メニューの「イメージ」から「色調補正」「色相・彩度」のパネルでいじると、配色などを相対的に変更できます。気に入った表示になったらカラーボックスから色とってはめこめばおｋ!
4つの画像は左上から「明暗のみ」右上が「彩度」左下が「色相(小)」右下が「色相(大)」です。
色相つまみをひねれば、以下のようにそれぞれ勝手に色が変わります。自分だけのタグクラウドを作ろう。とかなんちゃって。
- Newer: レイアウト切り替えスクリプト
- Older: お絵かき過去倉庫
