Tumblr に投稿した Photo タイプの画像をサムネイルで表示する方法

Tumblr に投稿した Photo タイプの画像をサムネイルで表示する方法 - Tumblr Thumbnails

Tumblr Thumbnails | Tumblrのサムネイルを作成するサービス

自分には以前、ほぼ毎日更新していたブログがありました。
ところが、あることをきっかけにその更新が疎かになってしまい、遂には消失するに至りました。

実は、この更新が疎かになるきっかけとなった「あること」というのが、Tumblr を始めたことだったのです。

実にわかりやすいというか、なんというか、、見事に Tumblr に心酔しまして（現在も継続中）。

ブログを消失させるくらい Tumblr にハマったのなら、今度はその資産? を活かさない手はありません。しかも、できるだけ手軽に!

ということで、シンプルに Tumblr に投稿した Photo タイプの画像をサムネイルで表示するスクリプトを見つけました。

Tumblr Thumbnails | Tumblrのサムネイルを作成するサービス

このスクリプトを追加する手順は次の通り。

<head> 部分に次の1行を追加する

<script src="http://th.umbls.com/js/th.umbls.js" type="text/javascript"></script>

サムネイルを表示したい場所に次の文字列を追加する

<script src="http://api.umbls.com/thumbnails/get?user=ユーザー名" type="text/javascript"></script>

以上です。

さらにオプションとして、タグ名による絞り込みやサムネイル表示数（初期値: 10、最大数: 50）を指定することもできます。

オプションを指定する場合は、手順 2. で追加した文字列のユーザー名に続けて、タグ名による絞り込みは &tag=タグ名を、サムネイル表示数の指定は &num=サムネイル表示数を追加します。

<script src="http://api.umbls.com/thumbnails/get?user=ユーザー名&tag=タグ名&num=サムネイル表示数" type="text/javascript"></script>

ちなみに自分は、オプションでサムネイル表示数: 12として、さらにスタイルシートで画像サイズ幅: 72px、４行 x 3列のグリッド表示で、 Blogger のサイドバーに追加してみました。

.thumbnail_0 img,
.thumbnail_1 img,
.thumbnail_2 img,
.thumbnail_3 img,
.thumbnail_4 img,
.thumbnail_5 img,
.thumbnail_6 img,
.thumbnail_7 img,
.thumbnail_8 img,
.thumbnail_9 img,
.thumbnail_10 img,
.thumbnail_11 img {
  width: 72px;
}

.thumbnails ul li {
  border-top: none;
  padding: 0;
  list-style: none;
  margin: 0 16px 16px 0;
  float: left;
}

さて、ふと気づくと今度は、こちらの Blogger に心酔していて Tumblr の更新が疎かになっているような、、。

我ながら一途な性分というか、、まあ、何事もバランスが大切だったりしますので、両立できるように精進しなくては! ですね。