ライブドアブログのカスタマイズ-Tumblrのサムネイル画像ウィジェット(ブログパーツ)の設置方法

【この記事を読むのに必要な時間は約 6 分です。】

先日、ライブドアで画像中心に作成していたまとめブログがあまりに重いので、テンプレートを「ギャラリー」という画像を綺麗に見せるものから普通の2カラムのテンプレートに変更した。とはいえ、画像がないと色々寂しいので、Tumblrの画像をブログパーツとして配置したいと思い色々探した。
WordPress用のTumblrやFlickrをサムネイル表示してくれるプラグインは多数見つけていたが、通常のブログサイトで、うまくサムネイル表示できて、かつ、ウィジェットとして配置しやすいものはなかなか適当なものがなかった。
今回、適当なものをみつけたので、紹介する。

Tumblr Thumbnails

Tumblr Thumbnailsさんが、スクリプトを提供してくれている。

tumblr2

提供してくれているスクリプトは、th.umbls.jsで、内容は以下。

function thumbnailsHandler(json) {
  var t  = json['thumbnails'];
  var id = json['id'];
  var u  = json['user'];
  var ul = document.createElement('ul');
  for (var i in t) {
    if(!t[i]['thumbnail']) continue;
    var li = document.createElement('li');
    li.setAttribute('class', 'thumbnail_'+i);
    var a = document.createElement('a');
    a.setAttribute('href', t[i]['permalink']);
    a.setAttribute('target', '_blank');
    var img = document.createElement('img');
    img.setAttribute('src', t[i]['thumbnail']);
    a.appendChild(img);
    li.appendChild(a);
    ul.appendChild(li);
  }
  document.write('<div id="'+id+'"></div>');
  var e = document.getElementById(id);
  e.className='thumbnails '+u;
  e.appendChild(ul);
  var clear = document.createElement('hr');
  clear.style.clear = 'both';
  clear.style.visibility = 'hidden';
  e.appendChild(clear);
}

設置方法

非常に簡単で、ヘッダー部分への記載と、表示させたい箇所への記載で設置できる。

ヘッダー部分の記載

スクリプトを呼び出す記載をする。ヘッダー部分(<head>と</head>の間)に以下のように記載する。

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

表示させたい箇所への記載

表示させたい箇所に以下のように記載する。

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

オプション設定も用意されている。
  tag – タグで絞り込むことが出来る。
  num – 取得数を指定。デフォルトは10、最大数は50。

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

CSSでのカスタマイズ

後は、自分のサイトやブログにうまくウィジェットとして配置できるかどうかがポイントになる。
LAB@Moonさんの、Tumblr に投稿した Photo タイプの画像をサムネイルで表示する方法 – Tumblr Thumbnailsでカスタマイズの方法が説明されていたので、参考にしてCSSファイルに追記した。
追記内容については、下の「私の設定まとめ>CSSへの追記」で確認して欲しい。

私の設定まとめ

ヘッダー

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

サイドウィジェット

<div class="sidetitlebody">
<div class="sidetitle">My tumblr <a href="http://jump-up-jp.tumblr.com/" target="_blank"><span><font color="gray">jump-up-jp.tumblr.com</font><span></a></div>
</div>
<script src="http://api.umbls.com/thumbnails/get?user=jump-up-jp&num=12" type="text/javascript"></script>

CSSへの追記

/*tumblrウィジェットー*/
.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;
}
/*tumblrウィジェットー*/

表示事例

私のブログ(48 Collector)で確認してもらうとわかりやすいがこんな感じ。

WS000000

以上

Related Posts Plugin for WordPress, Blogger...