①カテゴリーのタグクラウド化は、「TMD451INC!!!」さまののページで紹介されてます。
②Topへ戻るは、同じく「TMD451INC!!!」さまのところで使われてますが、紹介ぺージがなかったので、同じタグクラウド化スクリプトが入っているサイドのソースに、記述されているものを勝手に使ってます。（笑）
Top▲（ブログトップへ戻る）をつけるには、同じスクリプトをその下にもう一つ初めから記述するだけでうまくできました！！（IDのところを#page-topから#topに表記を変更）
一部、スクリプトの記述を省くところがありますが、詳細はこのブログのソースを見てもらうとわかります。（笑）
どうも自動的にDISPLAYBLOCKが出来ているので、この部分はちょっと説明しずらいので、もう、以下のスクリプトをサイドのHTML内にコピペしてください。
追記：どうも調べたら、本家はこちら？でしょうか・・「超簡単なPageTopの設定方法」。詳細はこちらに説明されているようですね。こちらがトップへ戻るの場合は本家らしい～なぁ～。
以下わかりやすいように、コピペする部分のまとめです。ふ～。
③わかりづらいので、カテゴリーのタグクラウド化とTop▲PageTop▲のスクリプトをまとめたものが以下のようになります。多分Top▲の用途はあまりないのかもしれないし、この部分の記述があっているのかも不明ですが参考まで。
（スクリプトをデザイン＞カスタマイズ＞HTML内以下を全て一緒に記述します。
<p id="page-top"><b><a href="#PAGETOP">PageTop▲</a></b></p>
<script>
// タグクラウドもどき
$(function() {
var categories = $(".hatena-module-category ul li a");
$.each(
categories,
function(index, domEle) {
var ele = $(domEle);
var texts = $.trim(ele.text());
// リンクテキストから記事件数を取得
var count1 = texts.match(/\([^\(\s +]+\)/);
var count2 = count1[0].match(/\d+/);
// 大きさ指定 Start
if(count2 >= 10) ele.css("font-size", "210%");
else if(count2 >= 5) ele.css("font-size", "200%");
else if(count2 >= 3) ele.css("font-size", "150%");
else if(count2 >= 2) ele.css("font-size", "120%");
else ele.css("font-size", "90%");
// 大きさ指定 End
// リンクテキストから記事件数を除去
ele.text(texts.replace(/\([^\(\s +]+\)/, ''));
// ツールチップに記事件数含めて表示する（title要素）
ele.attr("title", texts);
}
);
});
// ページトップへ移動ボタンの表示
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
<p id="top"><b>
<a href="http://●●●.hatenablog.com/">Top▲</a></b></p>
<script>
// ページトップへ移動ボタンの表示
$(function() {
var topBtn = $('#top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
</script>
注意：ここは（http://●●●.hatenablog.com/）自分のURLに変更。
④後はCSSの設定は、こんなかんじですが、戻るボタンの色はブログのデザインによって好みで変更♪
色はいつもお世話になっているこちらを参考にしました。（TAG index）
（デザイン＞カスタマイズ＞CSSに以下を貼り付けてます。）
/*トップへ移動*/
#top {
position: fixed;
bottom: 30px;
right: 123px;
}
#top a {
text-decoration: none;
color: #fff;
padding: 10px 20px 10px 10px;
background: lightblue;/*色を変更*/
}
#top a:hover{
background:mediumslateblue; /*色を変更*/
}
/*ページトップへ移動*/
#page-top {
position: fixed;
bottom: 30px;
right: 5px;
}
#page-top a {
text-decoration: none;
color: #fff;
padding: 10px 20px 10px 10px;
background: lightblue;/*色を変更*/
}
#page-top a:hover{
background:mediumslateblue; /*色を変更*/
}
/*カテゴリータグクラウド*/
div.hatena-module-category div.hatena-module-body ul li {
display: inline;
margin: 0 0.3em;
}
まだ説明不足がありますがそのあたりは、 本家様と比べたり、いろいろと調べてみてください。
やっぱり説明はかなり大変です・・。（笑）
