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

    JavaScript

    超軽量で使い方もカンタンな日付ピッカー「flatpickr」

    flatpickrはjQueryなどのライブラリに依存することなく動作…

  2. Quill

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

  3. No Vacancy

    JavaScript

    ネオンサインのようなエフェクトを実装できるjQueryプラグイン「No Vacancy」

    テキストにネオンサインのようなエフェクトを実装することができるjQue…

  4. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

  5. InlineTweet.js

    JavaScript

    Webページのテキストにツイートリンクを作成できる「InlineTweet.js」

    InlineTweet.jsはWebページのテキストにツイートリンクを…

  6. jQuery Stick ‘em

    JavaScript

    スクロール時にその場所のコンテンツに応じたサイドバーが追従する「jQuery Stick ‘em」

    ちょっと使いどころがありそうなプラグインだったので使い方をメモしときま…

コメント

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

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

最近の記事

  1. 成城石井 フレンチロースト
  2. COMOLI カシミアシルクニットパーカ
  3. 橋
  4. 梅と久保田城
  5. マワマット26

アーカイブ

PAGE TOP