このブログの読者の一覧を相手先ブログのサムネイルにする

サイトをサムネイル化してくれるサービスは

　　

左から「SimpleAPI」、「Mozshot」、「Heartrails Capture」。

レスポンスが一番はやいのは「SimpleAPI」なんですけど残念ながらサブディレクトリ形式のドメインに対応してないのでアメブロでは使えません（すべてアメブロのトップページが表示されます）。

JQueryを使って「このブログの読者」に表示される一覧をテキストからサムネイル画像にしてみます。

今回使ったapiは「Mozshot」、キレイさを求めるなら「Heartrails Capture」でもOKです。

<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.7');
</script>
<script>(_JQ17_=jQuery)(function(){$=jQuery=_JQ17_;});</script>
<script>
$(document).ready(function(){
var entries = $('.readerMenu ul.skinSubList li a');
for (i = 0; i < entries.length; i++) {
var url = entries[i];
mozshot = '<img src="http://mozshot.nemui.org/shot/small?' + url + '" />';
$('ul.skinSubList li a').eq(i).html( mozshot );
}
})
</script>

これをフリープラグインに挿入です。

「ul.skinSubList li」要素内に「○○さん<br />」が残っちゃいますがこれはCSSで修正します。

ul.skinSubList li {
text-indent:-9999px;
}

jsでもなんとかなりそうですがCSSでできることはCSSでやったほうがいいかな？と（アメブロの場合は特に）。

見栄えの調整はCSSでなんとかなるので各自修正してください。