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. jqTree

    JavaScript

    JSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」

    jqTreeはJSONデータを元にHTMLでツリー構造を作成できるjQ…

  2. Tiny Colorpicker
  3. MoveTo

    JavaScript

    軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」

    MoveToは軽量(圧縮版で1KBほど)なスムーススクロールを実装する…

  4. jQuery Page

    JavaScript

    モバイルに最適なスライドやフリップを実装できる「jQuery Page」

    jQuery Pageは、スマホなどモバイルに最適なスライドやフリップ…

  5. slimMenu
  6. Greedy Navigation

    JavaScript

    レスポンシブ対応でメニューのアイテム数がわかりやすい「Greedy Navigation」

    Greedy Navigationはレスポンシブ対応でメニューのアイテ…

コメント

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

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

最近の記事

  1. JOK-350 WH
  2. 1460 COLLAR ウォータープルーフ 8ホールブーツ
  3. スターバックス ハウスブレンド

アーカイブ

PAGE TOP