Web Services

Tumblrを自分専用オンラインブックマークにする

DeliciousのAndroid用アプリでログインすらできなくなってしまいました。デスクトップのブラウザからは問題なく使えるのですが、スマホでFEEDを消化中に気軽にブックマークしたいのに使い物になりません。そこでTumblrをオンラインブックマーク代わりに使用することにしました。

TumblrのテーマはBootstrapで、シングルカラムでシンプルに作成しました。

カスタムHTMLテーマを作成した際のポイント

ヘッダー部分

<header>
<h1><a href="{BlogURL}"><img src="{PortraitURL-128}" alt="{Title}" class="img-rounded"> {Title}</a></h1>
</header>

{PortraitURL-128}でブログのポートレート画像(アバター)を表示させます。

投稿部分

{block:Link}
{block:Thumbnail}<a href="{URL}"><img src="{Thumbnail-HighRes}" class="img-responsive"></a>{/block:Thumbnail}
<h2><a href="{URL}" {Target}>{Name}</a></h2>
{block:Description}
<div class="description">
{Description}
</div>
{/block:Description}
{/block:Link}

ブックマークしたいページに画像が掲載されている場合や、Open Graph Tagsにてサムネイル画像が設定されている場合に{block:Thumbnail}{Thumbnail-HighRes}{/block:Thumbnail}でレンダリングし、ブックマークに画像を表示させます。