ホーム » ブログ » 3D球体タグクラウド-javascriptでの実現する方法
このエントリーをはてなブックマークに追加
@2012/10/15
WPを使ってる方は3D球体タグクラウドのプラグインで簡単に実現できますね。
ここではjavascriptを使ってフルーカラーの3D球体タグクラウドの実現方法を紹介します。JSとCSSの知識をお持ちの方でしたら、5分以内で自分のサイトに実装できると思います。

それでは、タグクラウドの実現方法です。

(お役に立ちましたら、「SNSで共有をお願いします」)

①まず、必要なCSSとJSファイルをご用意します。
本サイトには直接にソースのダウンロードをご提供しておりません。ファイルをご入手したい方はhttp://wwwzanmai.net/others/demo/tag-cloud/tag_cloud.css と http://www.zanmai.net/others/demo/tag-cloud/tag_cloud.jsファイルをご利用してください。
※タグクラウドの動きをカスタマイズしたい方は、tag_cloud.jsで編集してください。

②<body>の中に、<div id=”tag-cloud”>…</div>を入れる。
 ここのDIVタグはタグを表示する場所です。本サイトでの例は以下になります。
 <div id="tag-cloud" style="float:center;border:1px solid green;margin:auto;"> 
		<a href="http://taobao.jp/blog/" class="red">ブログ</a> 
		<a href="http://taobao.jp/job/" class="orange">就職</a> 
		<a href="http://taobao.jp/bbs/" class="green">掲示板</a> 
		<a href="http://taobao.jp/test/" class="green">demo</a> 
		<a href="http://taobao.jp/mypage/" class="blue">個人</a> 
		<a href="http://taobao.jp/" class="indigo">買い物</a> 
		<a href="http://taobao.jp/sitemap.html" class="violet">地図</a> 
		<a href="http://taobao.jp/blog/" class="red">ブログ</a> 
		<a href="http://taobao.jp/job/" class="orange">就職</a> 
		<a href="http://taobao.jp/bbs/" class="green">掲示板</a> 
		<a href="http://taobao.jp/test/" class="green">demo</a> 
		<a href="http://taobao.jp/mypage/" class="blue">個人</a> 
		<a href="http://taobao.jp/" class="indigo">買い物</a> 
		<a href="http://taobao.jp/sitemap.html" class="violet">地図</a> 
		<a href="http://taobao.jp/blog/" class="red">ブログ</a> 
		<a href="http://taobao.jp/job/" class="orange">就職</a> 
		<a href="http://taobao.jp/bbs/" class="green">掲示板</a> 
		<a href="http://taobao.jp/test/" class="green">demo</a> 
		<a href="http://taobao.jp/mypage/" class="blue">個人</a> 
		<a href="http://taobao.jp/" class="indigo">買い物</a> 
		<a href="http://taobao.jp/sitemap.html" class="violet">地図</a> 
		<a href="http://taobao.jp/blog/" class="red">ブログ</a> 
		<a href="http://taobao.jp/job/" class="orange">就職</a> 
		<a href="http://taobao.jp/bbs/" class="green">掲示板</a> 
		<a href="http://taobao.jp/test/" class="green">demo</a> 
		<a href="http://taobao.jp/mypage/" class="blue">個人</a> 
		<a href="http://taobao.jp/" class="indigo">買い物</a> 
		<a href="http://taobao.jp/sitemap.html" class="violet">地図</a> 
		<a href="http://taobao.jp/blog/" class="red">ブログ</a> 
		<a href="http://taobao.jp/job/" class="orange">就職</a> 
		<a href="http://taobao.jp/bbs/" class="green">掲示板</a> 
		<a href="http://taobao.jp/test/" class="green">demo</a> 
		<a href="http://taobao.jp/mypage/" class="blue">個人</a> 
		<a href="http://taobao.jp/" class="indigo">買い物</a> 
		<a href="http://taobao.jp/sitemap.html" class="violet">地図</a> 
		<a href="http://taobao.jp/blog/" class="red">ブログ</a> 
		<a href="http://taobao.jp/job/" class="orange">就職</a> 
		<a href="http://taobao.jp/bbs/" class="green">掲示板</a> 
		<a href="http://taobao.jp/test/" class="green">demo</a> 
		<a href="http://taobao.jp/mypage/" class="blue">個人</a> 
		<a href="http://taobao.jp/" class="indigo">買い物</a> 
		<a href="http://taobao.jp/sitemap.html" class="violet">地図</a> 
		</div> 

以上、javascriptを使って3D球体のタグクラウドを実現しました。サンプル


♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
0人
このエントリーをはてなブックマークに追加


◎zanmai.netサイト記事の転載・複製(コピー)は、zanmai.netへのリンクであることを明記してください!
◎本記事URL: http://www.zanmai.net/blog/data/89.html

コメント@2013年03月22日
Gravatar-グローバルに認識されるアバター_zanmai.net
すごいです。

お名前:

 

EMAIL:

 

URL:

 

認証コード:

zanmai.net-safecode

 


※会員の方は認証コードを要らないから、新規登録をオススメ!

アーカイブ @zanmai.net
check