「タグ検索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は表示されます。
キーワード ブログ検索 :: 最新ブログ記事のトレンドがわかる ::
「タグ検索de【くつろぐ】・タグ検索パネル」
登録:メールアドレス、ブログRSS。
各設定をして、
表示されたコードを貼り付けて設置完了。
<追記>
「 ブログにタグ検索をプラス - TagClick 」もできました(紹介記事)。
Trackback
タグ検索de【くつろぐ】 : ブログパーツ探訪の旅【30】。 …と言う事で、別記事として『くつろぐ』新リリースの機能をご紹介。 タグ検索de【くつろぐ】とは ・「タグ検索de【くつろぐ】」を利用してエントリー記事に関連するタグを付けると、ブログのサイドバーなどに設置したブログパーツ(
塵芥撰述 | at: 2008/02/24 12:43 PM
Trackback URL
トラックバック機能は終了しました。
[prev] << MAZDA 期間限定「ロータリーエンジン40周年記念ブログパーツ」
[next] タグクラウドのブログパーツ「TagClick」の文字をカラフルに簡単カスタマイズ >>
Comment