Tumblrのカスタマイズについての基本的なまとめです。

カスタマイズは、自分のTumblrの右上の「Customize」から行うことが出来ます。基本は、タイトルや説明文の入力、アイコン画像の設定、テーマの変更などですね。その他テーマの変更で「custom HTML」を指定してタグを入力していくことで、自分好みにカスタマイズしていくことが出来ます。

使えるのはHTMLの他、下記のページで定義されているTumblr独自のタグ。これを使用すると様々な情報を記載することが出来ます。

Creating a custom HTML theme | Tumblr

また、テンプレートにはJavaScriptを記述してWidgetを動かすことも出来ます。



以下、簡単なカスタマイズ例です。

Followしている人の一覧を表示する

Tumblrタグ{block:Following}で実装できます。以下はあるテンプレートに記載されていた実装例です。

{block:Following}
<h4>Tumbleroll</h4>
<ul id="following">
  {block:Followed}
  <li><a href="{FollowedURL}"><img src="{FollowedPortraitURL-24}" alt="{FollowedName}"/></a></li>
  {/block:Followed}
</ul>
{/block:Following}

{block:Following}で開始を宣言し、{block:Followed}~{/block:Followed}内にそれぞれの処理を記述。{FollowedPortraitURL-24}の「24」は、アイコン画像のサイズを指しています。この場合は、24px×24pxで表示されます。

Google Analyticsでアクセス数を集計する

Tumblrのヘルプに記載されています。

Using Google Analytics | Tumblr

Google Analyticsのコードを適当なところに貼れば普通に動作するようです。ヘルプ内ではコードを「Description」内に記述し、それを{Description}タグを使ってCustom HTML内に記述すると言うことをやっていますが、直接Custom HTMLに記述しても特に問題ありません。

タグクラウドを表示する（追記あり）

Tumblrってタグを付けることが出来るのに、付けられたタグの一覧（タグクラウド）を表示するためのタグが用意されてないんですよね…というわけで、タグクラウドを作成するときにはこちらのスクリプトを使用します。

Tumblr Tag Clouds v.2

導入の仕方はGoogle Analyticsと同じで上記のページのスクリプトを表示させたい場所に貼り付けてやるだけ。フォントサイズなどはコードをいじって指定してやる必要があります。

<!-- Start Tumblr Tag Cloud -->
<script type="text/javascript" src="http://code.hr1v.com/jquery.1.2.6.min.js"></script><script type="text/javascript" src="http://tumblrtags.hr1v.com/widget.js?css=default&minsize=120&maxsize=280"></script>
<!-- End Tumblr Tag Cloud -->

フォントサイズを表す引数「minsize」「maxsize」の単位は%です。まぁ数字が大きすぎるからそりゃそうだよなーっていう感じですが（計算も楽になるだろうし）最初素でピクセルだと思って設定してしまってえらく小さくなってしまいました（苦笑）

問題点としては…このスクリプト読み込みが致命的に遅いんですよね。。。もうちょっとサクッと表示してくれると良いんですけど。


（追記：2009/04/25）

Tumblr Tag Cloudsの遅さに業を煮やして自分で作ってしまいました。

Tumblr Tag Cloud Maker | Tumblrにタグクラウドを設置するスクリプト

Tumblr Tag Cloudsとの違いは、Tumblr Tag Cloudsが毎回動的にタグを取得する（APIで全Postを巡回）のに対して、タグに関する情報を保存してそこからタグクラウドを書き出す点です。当然Tumblr Tag Cloudsに比べて非常に高速なのですが、Tagの変更に対処できないという欠点があります。個人的にはそんなにタグの編集はしないので気にならないのですが。
もしよろしければご利用下さい。

自分のTumblrにnotesを表示する

自分のエントリをReblogした人、また自分がReblogするまでに様々なアクションをおこした人、それらはDashboardでは「notes」という形で表示されていますが、それぞれのTumblrでは表示されていません。これを表示するには{PostNotes}というタグを入れてやればOKです。自分のエントリに表示されます。

Theme designers: Notes are now available in tumblelogs | Tumblr Staff

またnoteの数には{NoteCount}で取得・表示できます。これはエントリ一覧にも表示されます。

最初にPOSTした人をアイコン付きで表示する

最初にPOSTした人の情報は、{ReblogRoot*}というタグで取得できます。
以下、記述例。

i*mage*s - ??誾

{block:RebloggedFrom}
  Posted By: <a href="{ReblogRootURL}"><img src="{ReblogRootPortraitURL-16}" alt="{ReblogRootName}"/> {ReblogRootName}</a></li>
{/block:RebloggedFrom}

コードだけではCSSは適用されていないので、「Customize » Advanced » Add custom CSS」から適宜設定のこと。




以下、また何かあれば順次更新します。

オマケ：Tumblrのカスタマイズ方法は見つけづらい

最近、画像の保管を目的としてTumblrをよく利用しています。

i*mage*s

しかしまぁ、デフォルトの状態だと使いやすいとは言えないので（Dashboardをつらつら眺めながらReblogしていくのが本来の使い方で、アーカイヴ見直すとか特定のグループのエントリにアクセスしやすくするとかそういうのはあんまり一般的な使い方ではないかもしれないけど）、色々カスタマイズとかtipsとか情報を集めてるんだけど、みんなTumblr自体に情報が集積しているせいなのか、なんか有効な情報があまり見つけられなくて。どこかにまとめwikiでもあればいいんだけど。いやむしろ、Tumblrに集まってればそれでよくね？ってのが真のTumblrユーザーってことなのかな。うーむ。