Home > Movable Type > | XHTML CSS > Tag Cloudのスタイル

Tag Cloudのスタイル

タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。

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 Cloud1

Tag Cloud Sample

Tag Cloud2

Tag Cloud Sample

弱いレベルほど彩度を低くしてある。

Tag Cloud3

Tag Cloud Sample

Tag Cloud4

Tag Cloud Sample

Tag Cloud5

Tag Cloud Sample

Tag Cloud6

Tag Cloud Sample

Tag Cloud7

Tag Cloud Sample

Tag Cloud8

Tag Cloud Sample

Tag Cloud9

Tag Cloud Sample

Tag Cloud10

Tag Cloud Sample

10,11,12は、z-indexプロパティを使い、強いレベルのものほど前面にくるようになっている。

また、よりごちゃごちゃ感を出すために、レベルによってposition: relativeで上下へ5pxほどずらしてる。

実用性とはちょっぴり距離を置いたデザインだけど、そこまで使い勝手は悪くないと思う。

Tag Cloud11

Tag Cloud Sample

ついでに親要素となるul.tagCloudに以下のような背景画像(もうちょっと濃いほうが良かった)をbackground-position: top rightで置いておくと、よりごちゃごちゃ感が出て良い。

背景ダミー

Tag Cloud12

Tag Cloud Sample

Tag Cloud13

Tag Cloud Sample

応用編。

かすたまいず

CSSは結構判りやすいと思うので、行間や文字サイズなど好みに変えてください。また既存のデザインに組み込む場合は、すでにあるulやliのスタイルに上書きされる可能性もあるので、適度調整してください。

使いたいけど好みの配色が無くて、自分で考えるのもダルイ人は、以下の画像を保存してPhotoshopで開き、メニューの「イメージ」から「色調補正」「色相・彩度」のパネルでいじると、配色などを相対的に変更できます。気に入った表示になったらカラーボックスから色とってはめこめばおｋ!

調整用

4つの画像は左上から「明暗のみ」右上が「彩度」左下が「色相(小)」右下が「色相(大)」です。

色相つまみをひねれば、以下のようにそれぞれ勝手に色が変わります。自分だけのタグクラウドを作ろう。とかなんちゃって。

調整用

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

あ、ほんとですね。左揃えで片方に寄ってしまうので、このほうがごちゃごちゃ感が（ｒｙ

liはdisplay: inlineでインラインブロックとして振舞ってるのでtext-align: centerが効いているんですよー。

wu 2007年10月21日 17:11

WordPressでこのタグクラウドに関する記事を、spais.jpのnicが、解説してくれました!　ありがとー！

・Wordpress向け3ping.org発Tag cloudスタイルシート用カテゴリリスト抽出スクリプト

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

これはよい！！

Comment Form

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を変えてみました。 参考にさせ...

Home > Movable Type > | XHTML CSS > Tag Cloudのスタイル

Recent Entries
Categories
Tag Cloud
Book

実践 Web Standards Design

「実践 Web Standards Design」ではXHTMLやCSSの仕様からマークアップの手法・考え方をはじめ、レイアウトや実践的なWebサイト構築のワークフロー、そしてCSSを利用したさまざまな技術的Tipsを解説しています。

Products
Search
Feeds

Return to page top