JavaScript

とても簡単にカッコいいタグクラウドを実装することができるjQueryプラグイン「jQCloud」

とってもカッコいいタグクラウドを実装することができるjQueryプラグイン「jQCloud」を使ってみました。これを使うとクールでスタイリッシュなタグクラウドがあっという間に出来上がります。自分のサイトのタグクラドがちょっと味気ないなぁと思っている人には使ってみる価値がありそうなプラグインですね。以下、使い方です。

[ads_center]

使い方

使い方はとてもわかりやすいかと思います。まずはjQuery本体とプラグインファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="jqcloud.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="jqcloud-1.0.0.js"></script>

そして、word_listという配列に各タグを指定していきます。ここで、タグのURLや任意のCSSのクラスなんかも設定することができます。

<script type="text/javascript">
var word_list = [
    {text: "sample1", weight: 18, link: "http://bl6.jp"},
    {text: "sample2", weight: 12, html: {title: "好きなタイトル", "class": "sample-class"}, link: {href: "http://bl6.jp", target: "_blank"}},
    {text: "sample3", weight: 9},
    {text: "sample4", weight: 8},
    {text: "sample5", weight: 7},
    {text: "sample6", weight: 6},
    {text: "sample7", weight: 5},
    {text: "sample8", weight: 5},
    {text: "sample9", weight: 5},
    {text: "sample10", weight: 4},
    {text: "sample11", weight: 4},
    {text: "sample12", weight: 3},
    {text: "sample13", weight: 3},
    {text: "sample14", weight: 3},
    {text: "sample15", weight: 2},
    {text: "sample16", weight: 2},
    {text: "sample17", weight: 2},
    {text: "sample18", weight: 2},
    {text: "sample19", weight: 1},
    {text: "sample20", weight: 1},
];
</script>

タグクラウドを内包するボックスの縦横サイズを指定する場合は以下のオプションを記述します。

$(function() {
    $("#tagcloud").jQCloud(word_list, {
        width: 450,
        height: 300
    });
});

で、あとはタグクラウドを表示させるHTMLタグを置くだけです。

<!-- Tag Cloud -->
<div id="tagcloud"></div>

こんな感じでタグクラウドを手軽にお洒落にデザインしたいっていう時に重宝しそうなプラグインですね。以下のサイトからダウンロードできます。

iPhoneでWebページ全体のスクリーンショットを一発で撮れるアプリ「Web Scroll Capture」を使ってみた前のページ

WordPressでthe_author()を使えば記事に簡単に投稿者名を表示させることができる次のページWordPressのログイン時のツールバー

関連記事

  1. NO IMAGE
  2. jCorner

    JavaScript

    フラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」

    jCornerというjQueryプラグインを使ってみました。フラットデ…

  3. Tip

    JavaScript

    シンプルなUIで使いやすいツールチップ実装「Tip」

    TipはシンプルなUIによる使いやすいツールチップを実装することができ…

  4. Foxholder
  5. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

  6. busy-load

    JavaScript

    シンプルでフレキシブルなローディングマスクプラグイン「busy-load」

    busy-loadはシンプルでフレキシブルなローディングマスクを実装す…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ベルボン Mシリーズ
  2. ネック冷却ファン NRF10
  3. Kindle 8GBモデル
  4. プロテクティングクロス PC-E2
  5. インナーソフトボックス 02

アーカイブ

PAGE TOP