Ryka's Tumblr

“

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ユーザーってことなのかな。うーむ。

”

— 【メモ】 Tumblrに関する情報あれこれまとめ。 - nplll: Mutter (via netclip) (via a2onaka) (via blendy999) (via otsune) (via tscp) (via kml) (via hc1m)

“

Tumblr をもっと便利に使う

さて、しばらく使っていると、ダッシュボードをもっと快適に閲覧したいとか、簡単に Reblog したり、ネットサーフィン中に気になった記事を簡単にポストしたいとか思い始めると思います。そしたら下記を試してみてください。

Firefox を使え

これが前提なんですけど、まだ使ったことない人も試してみることをオススメしますよ。Firefox のダウンロードはこちらから。

アドオン ： Tombloo と Greasemonkey を入れる

Firefox を入れたら、まずは下記の 2つのアドオンだけでも入れてみましょう。Firefox の価値はアドオンで自分好みにカスタマイズできるところなので、Firefox を入れたならぜひアドオンは色々試してみてほしいですね。 （参考エントリー）

• Greasemonkey
• Tombloo

Tombloo は色々な Web サービスに色々なものを簡単にポストすることができるアドオン。Tumblr 専用ではないのですが、ページ内の文章、写真、リンクなど、右クリックから簡単に Tumblr にポストできます。必ず Tumblr にログインした状態で使用しましょう。

ユーザースクリプト ： AutoPagerize, LDRize, Minibuffer, ReblogCommand, play on tumblr を入れる

Greasemonkey アドオンを入れたら、下記のユーザースクリプトをインストールしましょう。

• Minibuffer
• AutoPagerize
• LDRize
• ReblogCommand
• play on tumblr

[4/29 追記]
コメント欄で otsune さんに教えていただいた 「play on tumblr」 を追加しました。使い方は後述。

インストール後に Greasemonkey の 「ユーザースクリプトの管理」 からスクリプトの順番を

1. Minibuffer
2. AutoPagerize
3. LDRize
4. ReblogCommand
5. play on tumblr

となるように変更します。上のリストの上から順番に入れていけば、この並びになってるはずです。（重要なのは最初の 2つの並び順です。）

この状態でダッシュボードに行ったら、キーボードから 「j」、「k」 を押してみましょう。小さな矢印アイコンが各ポストの横を移動しつつ、ページが上下するはずです。矢印アイコンがついているところが現在選択されているポストです。

次に Reblog したいポストを選択 （矢印を合わせたら） したらキーボードから 「t」 を押してみましょう。下の方に 「Reblog」 という表示が出ては消えると思いますが、これで Reblog 完了してます。

「Shift」 + 「t」 だと Reblog 画面が別タブに開きますので、コメントとか付け加える場合はこっちを使いましょう。

さらに、「h」で note の開閉、「l」 で 選択されているポストを Like できます。

AutoPagerize が入っていれば、ページ送りにわざわざクリックする必要がないので、基本的にこの 3つのキー （h, j, k, l, t） のみでサクサクと閲覧 → Reblog / Like までいけちゃいます。

”

—

5分でわかる Tumblr の始め方 | WWW WATCH (via inaba1090)

追加：Tumblr Tag Command for GreaseMonkey
Tumblrへのタグ付けを格段に楽にしてくれるGreaseMonkeyスクリプト
postの選択中にｇを押したらテキストボックスが出てきてタグを追加できる
「,（コンマ）」で区切り、「-(マイナス)」でタグの削除