『Seesaa』ブログに『3D球体タグクラウド』を設置してみた: パソコン・FXなどに関する日記

« Prev 『FLET'S』で買った『ゆらゆらフラワー』 | TOP | 『NEC』製の『Express5800/S70 タイプhf』が12,980円で販売されてます Next »

Thursday 2012/12/20 20:06

『Seesaa』ブログに『3D球体タグクラウド』を設置してみた

【カテゴリ：パソコン　ブログカスタマイズの記録】

この『Seesaa』ブログのサイドバーに『3D球体タグクラウド』を設置してみました。

以下は設置後の表示内容をキャプチャーした画像です。

今回参考にさせていただいたのは、以下のページです。

3D球体タグクラウドの設置の仕方：So-netブログのカスタマイズ：So-netブログ:
http://blog-customize.blog.so-net.ne.jp/2011-12-17

3D球体タグクラウド - 右京武彦の完全自動デイトレードシステム構築実践虎の巻:
http://autodaytrade.blog.fc2.com/blog-entry-30.html

両方とも同じ作者様のページであり、前者のページはオリジナル（＝後者）の『3D球体タグクラウド』を『So-netブログ』に設置する方法として書かれているページです。

今回自分は、試しにこの『So-netブログ』用のコードを単純に『Seesaa』ブログ用に置き換えてみることにしました。

結果、『So-netブログ』とはサイドバーコンテンツのクラス名が微妙に異なるだけであり、ほとんどそのままのコピーで問題なく動きました。

というわけで、せっかく動かすことができたので、この『Seesaa』ブログに設置する場合の手順を書いておくことにしました。

尚、JavaScript のロジックに関しては、自分はまだよく理解できていませんので、前記作者様のページを参照してください。

以下、設置の手順です。

(1)『ブログの管理メニュー』⇒『デザイン』の『デザイン > PC > デザイン一覧』画面から『コンテンツ』をクリックします。

(2) 以下のような画面が表示されるので、『タグクラウド』のコンテンツを追加します。

(3) 『タグクラウド』のコンテンツをクリックすると、以下のような画面が表示されるので、右上の『コンテンツHTML編集』をクリックします。

(4) 『コンテンツHTML編集』をクリックすると、以下のような編集画面が表示されます。

(5) HTMLのソースコードを変更します。

　以下はオリジナル（＝デフォルト）のHTMLソースコードです。

<script type="text/javascript" language="javascript" src="<% site_info.blog_url %>/js/tag_cloud.js"></script>
<div class="sidetitle"><% content.title %></div>
<div class="side-tag">
<% content.header -%>
<div id="tag_cloud_<% content.id %>" style="word-break:break-all;">
<% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" class="_tag" title="<% tag.word | html %>/<% count %>"><% tag.word | html %></a> <% /loop -%>
</div>
<script type="text/javascript" language="javascript"><!--
tag_cloud("tag_cloud_<% content.id %>");
--></script>
<% content.footer -%>
</div>

　上記の中の赤色の行を削除します。

　参考にさせていただいたページ（＝http://blog-customize.blog.so-net.ne.jp/2011-12-17）に掲載されているコードから、<% content.header -%>　と　<% content.footer -%>　で囲まれた内容をそっくりコピーし、それをそのまま編集画面に表示されている　<% content.header -%>　と　<% content.footer -%>　の間に貼り付けます。

(6) 『保存』ボタンをクリックして保存します。

↑『保存』ボタンをクリック後、『編集を完了しました。』と表示されます。

(7) 右上の『タグクラウドの設定に戻る』をクリックします。

(8) 以下のような画面に戻るので『表示件数』を任意の値に変更します。

　初期値は 5 でしたが、自分の場合はとりあえず 30 に増やしました。

(9) 『保存』ボタンをクリックして保存します。

↑『保存』ボタンをクリック後、『設定を完了しました』と表示されます。

(10) 右上に表示されている『×』マークをクリックして画面を閉じます。

(11) 『保存』ボタンをクリックして保存します。

↑『保存』ボタンをクリック後、『設定を変更しました。』と表示されます。

以上で基本的な設置手順は終了です。

あとは、個々のブログの環境に合わせるために必要に応じてHTML内で定義しているパラメータの値などをカスタマイズします。

例として自分の場合は、以下のように変更しました。

変更前（変更箇所のみの抜粋）

var cloudSize  = 180;       // px クラウドサイズ(縦横共通) カラムの幅(width)と同じ値を設定してください。
var maxTagNum  =  30;       // タグの最大表示件数 -1:全件表示
var rewriteSec = 10;        // 再描画間隔(ミリ秒)

変更後

var cloudSize  = 220;       // px クラウドサイズ(縦横共通) カラムの幅(width)と同じ値を設定してください。
var maxTagNum  =  20;       // タグの最大表示件数 -1:全件表示
var rewriteSec = 50;        // 再描画間隔(ミリ秒)

このブログはフラッシュを使ったブログパーツを複数使用しているために少々表示が重たいのですが、今回の『3D球体タグクラウド』を追加したことで表示が更に重くなってしまいました。

そのため少しでも軽くしようと思い、タグの最大表示件数を 20 に減らし、再描画間隔も 50 ミリ秒に拡大しました。

今後も更に調整のため変更するかもしれません。

ところで、ブラウザ『Firefox (17.0.1)』ではなぜかチラついて見づらかったのですが、その他の『Google Chrome (23.0.1271.97 m)』や『Safari (5.1.7)』、『IE9』では割とスムーズに見易く表示されました。

以上です。

【追記】2013-10-09 17:40

サイドバーに表示していた『3D球体タグクラウド』ですが、このブログの表示速度を改善するため、サイドバーから外すことにしました。

しかし、完全に無くしてしまうのは惜しいので、このページにサンプルを設置しておくことにしました。

もしかしたら、またいつかサイドバーに復活させるかもしれませんが．．．

3D球体タグクラウド