タグクラウドのスタイル設定方法

タグクラウドのスタイル設定にCSSを使用する

タグクラウドは、アイテムのリストを視覚的に表したものです。 あなたはしばしばブログにタグの雲を見るでしょう。 それはFlickrのようなサイトで人気がありました。

タグクラウドは、いくつかの測定可能な属性に応じて、サイズと重量が変化する（時には色も変わる）リンクのリストです。 ほとんどのタグクラウドは、その特定のタグでタグ付けされた人気数またはページ数に基づいて構築されます。 しかし、少なくとも2つの方法を表示しているアイテムのリストからタグクラウドを作成することができます。 例えば：

• アルファベット順の記事のリスト。記事の人気を示すスタイル。
• アルファベット順のWebサイトのリスト。どのスタイルが最良のものかを示します。
• Webエディタのリストで、価格順にリストされ、それぞれのスタイルがあらかじめ定義された基準のどれに近づいているかを示します。
• 自宅から自宅までの距離を示すスタイルの友人のリスト。

タグクラウドを構築するためには何が必要ですか？

タグクラウドを構築するのは簡単ですが、必要なのは次の2つだけです。

• アイテムのリスト（Web記事、Webサイト、またはあなたの友人のようなもの）
• 各アイテムの測定値（1日あたりのページビュー数、ランキング1〜10、またはあなたの家までの距離など）。

ほとんどのタグクラウドはリンクのリストなので、各項目にURLが関連付けられている場合に役立ちます。 しかし、これは視覚的な階層を作成する必要はありません。

人気リンクのタグクラウドを構築する手順

私のサイトには毎日ページビューを取得する記事があり、これはタグクラウドの作成に使用するための簡単な指標です。 この例では、記事のリストからタグクラウドを作成します。このタグクラウドは、2007年1月1日の週の私のサイトのトップ25の記事です。

1. 階層内にいくつのレベルを設定するかを決めます。
   1. あなたのリストに項目を置くのと同じくらい多くのレベルをあなたのクラウドに持たせることは可能ですが、これはコードが面倒になり、違いはごくわずかです。 私はあなたの階層に10レベル以下を持つことをお勧めします。
2. 各レベルのカットオフポイントを決定します。
   1. 1日あたりのページビューを1/10スライスにカットするのと同じくらい簡単かもしれません。 あなたのサイトの一番大きいページが1日に100ページのビューを取得した場合、100+、90-100,80-90,70-80などのようにスライスすることができます。
3. アイテムをページビューの順序でリストし、ステップ2に基づいてランクを付けます
   1. いくつかのスロットにアイテムがないと心配しないでください。クラウドをもっと面白くするだけです。
4. あなたのリストをアルファベット順に並べ替えてください（または、あなたが使用したい第2の並べ替え）。
   1. これがクラウドを興味深くする理由です。 あなたがランクでソートされたままにしておけば、それは一番上のものが一番小さいものから一番下のものまでのリストになります。
5. ランクがクラス番号になるようにHTMLを記述します。 class = "tag4">ストリーミングオーディオファイルの追加

個々のリスト項目ごとにHTMLを表示し、表示する順序を決定したら、決定する必要があります。 あなたは段落にリンクを置くことができます。 しかし、これは意味的にマークアップされず、CSSを持たない人はタグクラウドに来るとリンクの大きな段落が表示されます。 このタイプのリストのHTMLは次のようになります。

ストリーミングオーディオファイルの追加 Webサイトの基本タグ ベストWebデザインソフトウェア 色の象徴主義完全に失われたWebページの構築 < a>

代わりに、順序付けられていないリストを使用してタグクラウドを作成することをお勧めします。 それはHTMLとCSSコードのほんの数行ですが、誰がそれを見に来ても内容が読めるようにします。 HTMLは次のようになります。