- 2007年10月20日 14:28
- 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で開き、メニューの「イメージ」から「色調補正」「色相・彩度」のパネルでいじると、配色などを相対的に変更できます。気に入った表示になったらカラーボックスから色とってはめこめばおk!

4つの画像は左上から「明暗のみ」右上が「彩度」左下が「色相(小)」右下が「色相(大)」です。
色相つまみをひねれば、以下のようにそれぞれ勝手に色が変わります。自分だけのタグクラウドを作ろう。とかなんちゃって。

- Newer: レイアウト切り替えスクリプト
- Older: お絵かき過去倉庫
Comments:16
- wu 2007年10月21日 05:15
割とコメントを投稿してくれる方が多かった3ping.orgで、
MT4にしたとたん、これだけコメントが減ったってことは、
フォームが最初から隠れてることが凄い抵抗になっているんだろうなぁ。
あるいは目立たなくなったので、スルー率があがってる。
これは勉強になりました。- wu 2007年10月21日 05:36
Tag Cloud 10,11,12は確かにタグは重なって、クリックし辛いものが発生しますね。
ただ、完全に重なる状態になることは無いのと、弱いレベルのタグがz-indexで後ろのほうにいくことになるんで、弱いレベルが見辛いにしても、クリックできなくなるってことはないですよ。- kotarok 2007年10月21日 06:23
ナイスまとめ。11と12なんかは特にいい感じで背景画像使いには「おおっ」と思いました。
しかしそんなことより「にっこりスケベ」が気になってしょうがありません。
あとこのコメント入力フォーム、「Remember personal info?」のチェックを切り替えると入力済みのName、Mail、URI欄がクリアされるのは仕様ですか!?(@opera)
- wu 2007年10月21日 07:08
おー、kotarokさん、おはようございます。お久しぶりです!
ありがとうございます。凄い時間かけて作った甲斐がありました。
URI欄などがクリアされるの、「忘れちまえ」ボタンなのですがどうでしょうか。
きっと僕にも、そしてkotarokさんにも、「ニッコリスケベ」タグついてますよー。- wu 2007年10月21日 07:20
あ、全部入力した後に、空っぽにされちゃうのか‥。
- Cosmo 2007年10月21日 13:46
ul.tagCloudにtext-align: centerしたらなかなか良い感じに「雲」っぽくなりましたよー。liのボックスがtext-align: centerで真ん中にくるのはなんでだろ。IEでもFirefoxでも大丈夫でした。
- wu 2007年10月21日 14:16
あ、ほんとですね。左揃えで片方に寄ってしまうので、このほうがごちゃごちゃ感が(ry
liはdisplay: inlineでインラインブロックとして振舞ってるのでtext-align: centerが効いているんですよー。
- wu 2007年10月21日 17:11
WordPressでこのタグクラウドに関する記事を、spais.jpのnicが、解説してくれました! ありがとー!
- zio 2007年10月22日 09:24
CSSで綴りが間違っているようです。
確認してみてください。
Tag Cloud1のul.tagCloudに
"marin"というのがあります。
たぶんmarginではないかとおもうのですがどうでしょうか?あと、このコメント欄プレビュー押したあと
ポストする方法がわからなかったんですがどうなんでしょう?- wu 2007年10月22日 13:17
zioさん、書き込みありがとうございます。
確かに綴りを間違えていました。マーリン。コメントプレビューの件、気づきませんでした。
このブログはテンプレートのテスト用のものを使って表示確認おしており、他にも色々とおかしなところがあるかもしれません。今回、チェックボックスで欄が空になることと、プレビューページにPostボタンが表示されないという問題、コメント投稿が減ってきたのはこれらが原因の1つになっているんですね。
ご報告、どうもありがとうございます!
- Citrocube 2007年10月24日 13:44
おおお、かわいいです!
タグクラウド、すごい見づらくて苦手だったんですが、これは宝探しぽくて楽しいですね。- フジイ 2007年10月26日 05:05
これすごくいいです。どうもありがとう!
- sasori 2007年10月26日 20:26
とても勉強になりました!
ありがとーございます!!- oscar 2007年11月 4日 00:01
現状のVicunaスキンだと、タグクラウド用の見た目のCSSが、2-class.cssに埋め込まれちゃってますが、簡単に入れ替えられるように、モジュールにしても良いですね。
属性によっては、上書きしづらいケースがありそうです。私は12が好きだなぁ。
- Anonymous 2007年11月 5日 16:35
確かにいろんなパターンをモジュール化して、簡単に切り替えれるとうれしいですねー。
- Anonymous 2009年8月12日 02:47
これはよい!!
Trackbacks:4
- TrackBack URL for this entry
- http://3ping.org/mt2/mt-tb.cgi/105
- Listed below are links to weblogs that reference
- Tag Cloudのスタイル from 3.5ping.org
- Tag cloudのスタイルを変更した。 from White Wing version2.0 2007-10-27 (土) 23:43
- TagsページのTag cloudの表示スタイルを変更しました。 Copyri...
- TagCloudページのスタイル変更 from 自転車少年になろう。 2008-05-16 (金) 16:01
- 以前、「TagCloudページの設置」で設置した TagCloud のスタイルを...
- タグクラウドのカスタマイズ from Seesaaブログカスタマイズ 2009-08-19 (水) 08:32
- Seesaaブログのタグクラウドと言うとゴチャゴチャしているイメージがありますが、サイズだけでなくスタイル(色、フォント‥)にも変化をつけると、以下のよう...
- タグクラウドのデザイン(CSS)を変えてみました。 from high booster -小型水槽でアクアリウム- 2009-08-19 (水) 12:51
- タグクラウドのデザインがいまいちだったので、CSSを変えてみました。 参考にさせ...











