スポンサーサイト

一定期間更新がないため広告を表示しています

    -     -     ▲ top

「タグ検索de【くつろぐ】」をカラフルなタグクラウドに簡単カスタマイズ。

グクラウドのブログパーツではTagClickの「タグ検索パネル」が有名なとこですが、(うちの右サイドバーにも設置)同じようなサービスで「タグ検索de【くつろぐ】」にもタグクラウドのブログパーツがあります。

詳しい説明はこちらのブログをどうぞ。
塵芥撰述: タグ検索de【くつろぐ】 はてなブックマーク数

さて、そんなタグクラウドですが「MovableType(ムーバブルタイプ)」などのブログツールには文字をカラフルにカスタマイズされているお方がいらして、なんともうらやましい。
とても自分にはそんなスキルはございません。(毎度のこと)
もちろんタグクラウド(ブログパーツ)のサービスにもそこまで機能がありません。
でもどうしてもあのカラフルなタグクラウドが欲しい・・・。
よって、実験を兼ねてカスタマイズを。

この「タグ検索de【くつろぐ】」はよく見りゃCSS制御。
つーことはCSSで文字に色指定してやれば!、ということです。

1).まず登録したら、マイページのメニュー「タグ変換ツール」>「タグ検索パネル作成」

2).表示されたコードの<link rel="stylesheet" type="text/css" href="http://tag.kutsulog.net/css/tag.panel.css" />の太字部分をブラウザのアドレスバーにペースト。


3).表示されたCSSタグをコピーして、メモ帳などにペースト。

4).次のタグが文字の大きさを指定してます。
#tag_cloud a.tag_xs {
font-size: 75%;
}
#tag_cloud a.tag_s {
font-size: 90%;
}
#tag_cloud a.tag_m {
font-size: 120%;
}
#tag_cloud a.tag_l {
font-size: 150%;
}
#tag_cloud a.tag_xl {
font-size: 200%;
}

5).それぞれにお好きなカラーを指定。
#tag_cloud a.tag_xs {
font-size: 75%;
color: #009900;
}
#tag_cloud a.tag_s {
font-size: 90%;
color: #3366cc;
}
#tag_cloud a.tag_m {
font-size: 120%;
color: #cc0099;
}
#tag_cloud a.tag_l {
font-size: 150%;
color: #ff6600;
}
#tag_cloud a.tag_xl {
font-size: 200%;
color: #ff0099;
}

6).任意の名前を付けて、拡張子をcssで保存。
または使っているブログのCSS編集フォームへ入力。(→8へ)

7).サーバーにアップロード。(JUGEMではcssをアップロードできないので、ここではSeesaaブログを利用してアップロード)

8).2)の太字部分をアップロードしたアドレスに書き換えて、(CSS編集フォームなら2)は削除)var tag_cloud_link = "(カラーコード)";を削除して終了。

どうでしょうか?表示されました?
ここまできたら、ついでに背景も画像にしちゃいましょう。(悪ノリ)

1).コードのカラーコード(太字部分)を書き換えます。
<script type="text/javascript">
<!--

var tag_cloud_background = "#EEEEFF";
〜・・・

2).任意の画像アドレスに書き換えるだけ。
var tag_cloud_background = "url(画像URL)repeat-x";

<追記>
IEでは表示できないみたいですね。
Firefoxは表示されます。



speech-bubble(website).png
キーワード ブログ検索 :: 最新ブログ記事のトレンドがわかる ::

キーワード ブログ検索 :: 最新ブログ記事のトレンドがわかる :: はてなブックマーク数
「タグ検索de【くつろぐ】・タグ検索パネル」
登録:メールアドレス、ブログRSS。
各設定をして、
表示されたコードを貼り付けて設置完了。




<追記>
ブログにタグ検索をプラス - TagClick はてなブックマーク数」もできました(紹介記事)。

    comments(0)     trackbacks(1)     ▲ top

スポンサーサイト

    -     -     ▲ top

Comment


Trackback

タグ検索de【くつろぐ】 : ブログパーツ探訪の旅【30】。 …と言う事で、別記事として『くつろぐ』新リリースの機能をご紹介。 タグ検索de【くつろぐ】とは ・「タグ検索de【くつろぐ】」を利用してエントリー記事に関連するタグを付けると、ブログのサイドバーなどに設置したブログパーツ(

塵芥撰述 | at: 2008/02/24 12:43 PM

Trackback URL

http://sasori-flower.jugem.jp/trackback/892

  • » ブログパーツの設置方法 (links with BlogDeco)

 
サンプル・イベント・モニターならBloMotion