スポンサーサイト

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

    -     -     ▲ top

タグクラウドのブログパーツ「TagClick」の文字をカラフルに簡単カスタマイズ

グクラウドのブログパーツ「タグ検索de【くつろぐ】」でやったタグクラウドの文字をカラフルにカスタマイズの「TagClick」版です。

「TagClick」はちょいとできないかなと思っていましたが、これまた簡単にできてしまったので続けて紹介。
同じブログには2つ貼れないみたいなので、サンプルは右サイドバーで。

まず、「TagClick」の説明は「 ブログパーツをさがせ」さんの記事がかなり詳しく説明されていますので、どうぞ。



さて、前回の「タグ検索de【くつろぐ】」タグクラウドをカスタマイズした時と同じ様に(紹介記事)、TagClickのタグ検索パネルもCSSで制御されています。

登録までの手順は割愛させていただいて・・・、

1).「TagClick」では次のタグが文字の大きさを指定してます。
a.tagclick-xs {
font-size: 10px;
}
a.tagclick-s {
font-size: 14px;
}
a.tagclick-m {
font-size: 16px;
}
a.tagclick-l {
font-size: 20px;
}
a.tagclick-xl {
font-size: 28px;
}

2).それぞれにお好きなカラーを指定。
a.tagclick-xs {
font-size: 10px;
color: #cd8770;
}
a.tagclick-s {
font-size: 14px;
color: #d96874;
}
a.tagclick-m {
font-size: 16px;
color: #6699cc;
}
a.tagclick-l {
font-size: 20px;
color: #ef297d;
}
a.tagclick-xl {
font-size: 28px;
color: #ff0084;
}

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

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

5).ソースコード前に、
<link rel="stylesheet" type="text/css" href="作成したCSSのURL">


と書き足して(CSS編集フォームなら不要)、スクリプトコードの

tagclickPanel.color = {background: "(カラーコード)", link: "(カラーコード)", border: "(カラーコード)", mouseover: "(カラーコード)"};


のlink: "(カラーコード)" カラーコードを削除して終了。

どうでしょう?表示されました?



speech-bubble(website).png
ブログにタグ検索をプラス - TagClick

ブログにタグ検索をプラス - TagClick はてなブックマーク数
「TagClick・タグ検索パネル」
登録:メールアドレス、ブログRSS。
各設定をして、
表示されたコードを貼り付けて設置完了。




    comments(2)     trackbacks(1)     ▲ 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

ブログパーツ「カンレン.えんとりーず」で関連エントリー表示が更に簡単に!

【映画】関連エントリー



連エントリーつながりで。
こちらも自分のブログから関連記事をキーワードひとつでリスト表示できるブログパーツ「カンレン.えんとりーず」。

関連エントリーリストジェネレータ」(紹介記事)と同じく、Yahoo!検索ウェブサービスを利用しているようですが、同じキーワード(映画)でも表示が違いますね。(すみません。専門外なのでわかりません^^;)

「カンレン.えんとりーず」はJavascriptを使って自動化してくれるところがスグレモノ!
記事内に本体のタグを貼っておいて、関連させたいキーワードを指定タグで囲っておけば抽出してくれます。
キーワードを指定しなくてもいいみたいですが、特徴語抽出のエンジンが非力なため、現段階ではあまり精度の高い結果が得られるようにはなっていないらしく、指定しておいた方が無難みたいです。(製作者さんのブログより)

キーワード指定のやり方は二通り。

「解析対象にしたい文章を強調」
 <!-- kanren -->〜 対象 〜<!-- /kanren -->

「手動でキーワードを指定する」
 <script>kanren="キーワード"</script>

を本体タグの前に入れるだけでOK。

これで「 関連エントリーリストジェネレータ」みたいにオプションで、はてなのカウンターが付けれるといいですね。(でもやっぱり、うちにはほとんど関係ないかも。汗)

<2007.05.30 追記>
追記がおくれましたが、はてなのカウンターのオプションを追加できるようになりました。(ありがとうございます!)

こちらもYahoo! ブログ検索のpingサーバに送信設定しておくのがBESTです。

CSSの知識が多少あればカスタマイズも可能です。
サンプルは、前回紹介した 関連エントリーリストジェネレータ」と同じデザインにしてみました。


speech-bubble(website).png
カンレン.えんとりーず - blogの関連記事を自動表示

カンレン.えんとりーず - blogの関連記事を自動表示 はてなブックマーク数
登録:不要。
URLを入力。>「もうちょっと細かい設定をしたい」で表示件数など設定できます。
>「タグを生成!」。
生成されたコードを貼り付けて設置完了。


    comments(0)     trackbacks(2)     ▲ top

こういうのが欲しかった!「関連エントリーリストジェネレータ」

【映画】関連エントリー



分のブログから関連記事をキーワードひとつでリスト表示できる「関連エントリーリストジェネレータ」。

どんどん埋もれていく記事から関連記事を抜き出す作業をかんたんに作れてしまう、なんてすばらしい!

しかもオプションで、はてなのカウンターが付けれるおまけつき。(うちにはほとんど関係ないかも。汗)

関連タグつけのブログパーツ「タグクラウド」も視覚的にはわかりやすくていいけれども、ニュースサイトみたいな読ませる関連記事もビジターにはうれしいものです。

サンプルとして、キーワードを「映画」にしてみました。
なるほど。このような映画関連のブログパーツがあったんですねぇ。(自分で書いておきながら感心)
Yahoo!検索ウェブサービスを利用しているらしいので、Yahoo! ブログ検索のpingサーバに送信設定しておくのがいいかもしれませんね。

CSSの知識が多少あればカスタマイズも可能です。
ちなみにサンプルでは、
背景を

で作って、 「関連エントリーリストジェネレータ」で生成されたコードにリストタグを付加して、リストアイコンを から拝借。


speech-bubble(website).png
関連エントリーリストジェネレータ

関連エントリーリストジェネレータ はてなブックマーク数
登録:不要。
URLを入力。>表示件数の選択。
>キーワードの入力。>オプション設定。
「関連エントリーリストを生成」をクリック。
生成されたコードを貼り付けて設置完了。
製作者さんのブログにて詳しい解説が載ってます。
関連エントリーリストジェネレータ - 関連エントリーを貼り付けるのが面倒なあなたへ - F.Ko-Jiの「一秒後は未来」


    comments(1)     trackbacks(1)     ▲ top

「BStir日本語版」と自力でやってみたよ!の「BStir-sasori版:Random-Post」

もれた過去記事にも光を!(by satokoto)

の、フレーズが気に入ってしまっていた。「ブログパーツをさがせ」さんの今年始めの方の記事「BStir日本語版」。

「さがせ」さんの常連(?)でもある「りょーちの駄文と書評」の「りょーちさん」ってお方が作られたブログパーツです。


作られた理由はこちら。
くるくる_red.gif  BStir日本語版を作ってみた
Stuff a Blog - Enrich and extend your blog-postというサイトでは、BlogのURLを入力すると、Blogの記事をランダムで表示するよーなことができるっぽい。
で、このサイトを試してみたのだが、日本語がうまく表示されない。
うーむ、と思い、テキトーなのをつくってみた。

と、テキトーにこうゆーのが作れるってのはすごい人です。
かくれファンになっておこう。うん。
リロードすると、埋もれた記事が表示されます。(こんなのあったなー。って自分でも見てしまう。←あほ)

ちなみに、その元のサイトはこちら。 さすがに日本語が使えないだけあって、はてブは少ない・・・
どうもUnicodeのサポートとやらが対応してないらしい。(わからんけど。おい!)
うちのブログにも貼っつけてみたけど、ものの見事に文字化けしました。
speech-bubble(website).png
りょーちの駄文と書評:BStir日本語版を作ってみた

りょーちの駄文と書評:BStir日本語版を作ってみた はてなブックマーク数
「BStir日本語版」
登録:不要。
作成ページにいって、URLを入力。
>「タグ取得」で
生成されたコードを貼り付けて設置完了。




しかし、本家のスクリプトもなんとか使ってみたい・・・
でも、自分にはりょーちさんのようなスキルもなけりゃ知恵もない。
けど!がんばって作ってみました。
「BStir-sasori版:Random-Post」!(ちとでかい)



どう?いいかんじ?
50秒おきに自動更新いたします。
JavaScriptの知識は一切いりませぬ。とゆーか自分にないし。
でも、作り方の説明は長くなるのでまた今度の機会で。よろしく。

    comments(2)     trackbacks(0)     ▲ top

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

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