このブラウザはサポートの対象外となっています。これはセキュリティを強化するための措置です。ChromeまたはFirefoxをダウンロードしてお使いください。

Tumblr

カスタムHTMLテーマを作成するには

ブログでカスタムな外観を作成したい場合、HTMLコードの作成に詳しい方はこちらをぜひ参考にしてください。コードのことがよくわからない場合は、テーマガーデンの中から美しいテーマを見つけてみましょう。

はじめに

Tumblrにはテキスト、画像、リンク、引用、チャット、音声、動画の7つの投稿タイプがあります。投稿の種類に応じて投稿をカスタマイズしましょう。そうすることで投稿の見栄えがとても美しくなります。またファンの人たちがリブログする時のレイアウトもきれいになります。

詳しくはコチラから

プロのヒント

テキスト投稿で外部画像を投稿したり、テキスト投稿上で埋め込みメディアを投稿するのは推奨されません。ダッシュボード上での見栄えがよくないし、カスタムテーマで問題が発生する原因となります。その代わり動画は動画投稿で、画像は画像投稿で投稿し、投稿内容によって適当な投稿の種類を選択しましょう。

利用開始

  1. ダッシュボード上部または上部にあるアイコン一覧の下のブログ名をクリック。
  2. Click “Customize” on the right column.
  3. 画面左のテーマサムネイルの下にある「HTMLを編集」をクリック。

TumblrにはHTMLのコンテンツをレンダリングする特殊演算子が2種類あります。

ブログのタイトルや説明などの動的データを挿入する時に変数を使用してください:

例）

<html>
    <head>
        <title>{Title}</title>
    </head>
    <body>
        ...
    </body>
</html>

ブロックはデータセット（投稿など）のHTMLブロックのレンダリングに使用されるものです。または条件的にHTMLブロック(前のページなど)をレンダリングします:

<html>
    <body>
        <ol id="posts">{block:Posts}
                <li> ... </li>{/block:Posts}
        </ol>
    </body>
</html>

完成したテーマのマークアップ例:

<html>
    <head>
        <title>{Title}</title>
        <link rel="shortcut icon" href="{Favicon}">
        <link rel="alternate" type="application/rss+xml" href="{RSS}">
        {block:Description}
            <meta name="description" content="{MetaDescription}" />
        {/block:Description}
    </head>
    <body>
        <h1>{Title}</h1>

        {block:Description}
            <p id="description">{Description}</p>
        {/block:Description}

        <ol id="posts">
            {block:Posts}{block:Text}
                    <li class="post text">
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}{Body}
                    </li>
                {/block:Text}{block:Photo}
                    <li class="post photo">
                        <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Photo}{block:Panorama}
                    <li class="post panorama">
                        {LinkOpenTag}
                            <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
                        {LinkCloseTag}{block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Panorama}{block:Photoset}
                    <li class="post photoset">
                        {Photoset-500}{block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Photoset}{block:Quote}
                    <li class="post quote">
                        "{Quote}"

                        {block:Source}
                            <div class="source">{Source}</div>
                        {/block:Source}
                    </li>
                {/block:Quote}{block:Link}
                    <li class="post link">
                        <a href="{URL}" class="link" {Target}>{Name}</a>

                        {block:Description}
                            <div class="description">{Description}</div>
                        {/block:Description}
                    </li>
                {/block:Link}{block:Chat}
                    <li class="post chat">
                        {block:Title}
                            <h3><a href="{Permalink}">{Title}</a></h3>
                        {/block:Title}

                        <ul class="chat">
                            {block:Lines}
                                <li class="{Alt} user_{UserNumber}">
                                    {block:Label}
                                        <span class="label">{Label}</span>
                                    {/block:Label}{Line}
                                </li>
                            {/block:Lines}
                        </ul>
                    </li>
                {/block:Chat}{block:Video}
                    <li class="post video">
                        {Video-500}{block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Video}{block:Audio}
                    <li class="post audio">
                        {AudioEmbed}{block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Audio}{/block:Posts}
        </ol>

        <p id="footer">
            {block:PreviousPage}
                <a href="{PreviousPage}">&#171; Previous</a>
            {/block:PreviousPage}{block:NextPage}
                <a href="{NextPage}">Next &#187;</a>
            {/block:NextPage}

            <a href="/archive">Archive</a>
        </p>
    </body>
</html>

基本的な変数

変数説明
{Title}ブログのタイトル（HTML適用可）
{Description}ブログの説明（HTMLに含まれる場合があります）
{MetaDescription}ブログの説明（HTML適用可）
e.g., <meta name="description" content="{MetaDescription}" />
{BlogURL}ブログのメインURL。
{RSS}ブログのRSSフィード。
{Favicon}ブログのファビコンURL。
{CustomCSS}任意のカスタマイズページに追加されたカスタムCSSコード。
{block:PermalinkPage} {/block:PermalinkPage}投稿のパーマリンクページでレンダリング。
コメントウィジェットの埋め込みに便利です。
{block:IndexPage} {/block:IndexPage}インデックス（投稿）ページでレンダリング。
{block:PostTitle}
{PostTitle}
{/block:PostTitle}		パーマリンクページでレンダリング（現在の投稿タイトルをページタイトルで表示するのに便利です）。
例:<title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
{block:PostSummary}
{PostSummary}
{/block:PostSummary}		{PostTitle}と同じものですが、タイトルが存在しない場合は自動的にサマリを生成します。
{PortraitURL-16}ブログのポートレート画像URL。16-ピクセル x 16-ピクセル。
{PortraitURL-24}ブログのポートレート画像URL。24-ピクセル x 24-ピクセル。
{PortraitURL-30}ブログのポートレート画像URL。30-ピクセル x 30-ピクセル。
{PortraitURL-40}ブログのポートレート画像URL。40-ピクセル x 40-ピクセル。
{PortraitURL-48}ブログのポートレート画像URL。48-ピクセル x 48-ピクセル。
{PortraitURL-64}ブログのポートレート画像URL。64-ピクセル x 64-ピクセル。
{PortraitURL-96}ブログのポートレート画像URL。96-ピクセル x 96-ピクセル。
{PortraitURL-128}ブログのポートレート画像URL。128-ピクセル x 128-ピクセル。
{CopyrightYears}ブログの活動期間を表示します。

全体的な外観

これらのテンプレートタグは　モバイルデバイスの外観に適用されるカスタムカラー、フォント、その他のオプションおよび、 規定のテーマを定義するものです。.

変数説明
{TitleFont}ブログのタイトルに使用されるフォント。
{TitleFontWeight}タイトルフォントの太さ（普通または太字）。
{BackgroundColor}ブログの背景色。
{TitleColor}ブログのタイトルカラー。
{AccentColor}ブログのアクセントカラー。
{HeaderImage}デフォルトのヘッダ画像の場合でも値を持つことになります。
{AvatarShape}アバターの表示図形 ("円" または "四角").
{block:ShowTitle} {/block:ShowTitle}「タイトルを表示」を有効にした場合にレンダリングされます。
{block:HideTitle} {/block:HideTitle}「タイトルを表示」を無効にした場合にレンダリングされます。
{block:ShowDescription} {/block:ShowDescription}「説明を表示」を有効にした場合にレンダリングされます。
{block:HideDescription} {/block:HideDescription}「説明を表示」を無効にした場合にレンダリングされます。
{block:ShowAvatar} {/block:ShowAvatar}「プロフィール画像を表示」を有効にした場合にレンダリングされます。
{block:HideAvatar} {/block:HideAvatar}「プロフィール画像を表示」を無効にした場合にレンダリングされます。
{block:ShowHeaderImage} {/block:ShowHeaderImage}「ヘッダ画像を表示」を有効にした場合にレンダリングされます。
{block:HideHeaderImage} {/block:HideHeaderImage}「ヘッダ画像を表示」を無効にした場合にレンダリングされます。

Navigation

変数説明
{block:Pagination}
{/block:Pagination}		「前へ」または「次へ」ページがある場合にレンダリングされます。
{block:PreviousPage}
{/block:PreviousPage}		「前の」ページ（新規投稿）にナビゲートできる場合にレンダリングされます。
{block:NextPage}
{/block:NextPage}		「次の」ページ（過去の投稿）にナビゲートできる場合にレンダリングされます。
{PreviousPage}「前の」ページ（新規投稿）のURL。
{NextPage}「次の」ページ（過去の投稿）のURL。
{CurrentPage}現在のページ番号。
{TotalPages}合計ページ数。
{block:SubmissionsEnabled} {/block:SubmissionsEnabled}送信を有効にした場合にレンダリングされます。
{SubmitLabel}送信リンクのカスタマイズ可能なラベル。
例: 「送信」
{block:AskEnabled}
{/block:AskEnabled}		質問が有効になっている場合にレンダリングされます。
{AskLabel}質問リンクのカスタマイズ可能なラベル。
例: 「質問する」

ページジャンプ

変数説明
{block:JumpPagination length="5"} {/block:JumpPagination}現在のページの半分の 長さから現在のページの1.5倍の長さを持つ各ページがレンダリングされます。
{block:CurrentPage} {/block:CurrentPage}ジャンプページが現在のページの場合にレンダリングされます。
{block:JumpPage} {/block:JumpPage}ジャンプページが現在のページではない場合にレンダリングされます。
{PageNumber}ジャンプページのページ番号。
{URL}ジャンプページのURL。

Example

<html>
    <body>
        ...

        {block:Pagination}{block:PreviousPage}
                <a href="{PreviousPage}">Previous</a>
            {/block:PreviousPage}{block:JumpPagination length="5"}{block:CurrentPage}
                    <span class="current_page">{PageNumber}</span>
                {/block:CurrentPage}{block:JumpPage}
                    <a class="jump_page" href="{URL}">{PageNumber}</a>
                {/block:JumpPage}{/block:JumpPagination}{block:NextPage}
                <a href="{NextPage}">Next</a>
            {/block:NextPage}{/block:Pagination}
    </body>
</html>

Pages

変数説明
{block:HasPages} {/block:HasPages}カスタムページを定義した場合にレンダリングされます。
{block:Pages} {/block:Pages}各カスタムページのレンダリング。
{URL}このページのURL。
{Label}このページのラベル。
変数説明
{block:PermalinkPagination}「前の」または「次の」投稿がある場合にレンダリングされます。
{block:PreviousPost} {/block:PreviousPost}「前の」投稿がある場合にレンダリングされます。
{block:NextPost} {/block:NextPost}「次の」投稿がある場合にレンダリングされます。
{PreviousPost}「前の」（新規）投稿のURL。
{NextPost}「次の」（過去の）投稿のURL。

例）

{block:PermalinkPagination} 
    {block:PreviousPost}
        <a href="{PreviousPost}">Previous Post</a>
    {/block:PreviousPost}
     
    {block:NextPost}
        <a href="{NextPost}">Next Post</a>
    {/block:NextPost} 
{/block:PermalinkPagination}

投稿数

変数説明
{block:Posts} {/block:Posts}このブロックは各投稿に対して逆の時系列順にレンダリングされます。1ページごとに表示される投稿数は「詳細設定」タブのカスタマイズエリアで構成できます。
{block:Text} {/block:Text}テキスト投稿にレンダリング。
{block:Photo} {/block:Photo}画像投稿にレンダリング。
{block:Panorama} {/block:Panorama}パノラマ投稿にレンダリング。
{block:Photoset} {/block:Photoset}フォトセット投稿にレンダリング。
{block:Quote} {/block:Quote}引用投稿にレンダリング。
{block:Link} {/block:Link}リンク投稿にレンダリング。
{block:Chat} {/block:Chat}チャット投稿にレンダリング。
{block:Audio} {/block:Audio}音声投稿にレンダリング。
{block:Video} {/block:Video}動画投稿にレンダリング。
{block:Answer} {/block:Answer}回答登録にレンダリング。
{PostType}現在の投稿タイプの名前。
{Permalink}投稿のパーマリンク。
例: "http://sample.tumblr.com/post/123"
{ShortURL}この投稿へリダイレクトする短いURL。
例: "http://tumblr.com/xpv5qtavm"
{PostID}投稿の数字ID。
例: 1234567
{TagsAsClasses}投稿タグのHTMLクラス属性フレンドリーリスト。
例: "humor office new_york_city"

「HTML クラス属性フレンドリー」 とはクラス属性のためのHTML仕様に準拠していることを意味しています。多くの場合、これは文字から始まり、文字、数字、ハイフン、アンダースコアと続きます。文字は英文字を使用してください。英数字以外を使用するとエラーが発生する可能性があります。

他のサイトからインポートされた投稿の場合、ソースドメインのHTMLフレンドリーバージョンも含まれます。ドメインのピリオドはアンダースコアに変換されます。

例: "twitter_com", "digg_com"など。

投稿が他の投稿からリブログされた場合、クラス属性「リブログ」が自動的に含まれます。
{block:Post[1-15]} {/block:Post[1-15]}指定されたオフセットの投稿にレンダリングされます。これにより、広告またはデザイン要素を投稿の真ん中に入れることができます。
例: {block:Post5}5番目の投稿!{/block:Post5}は5番目に表示される投稿のみレンダリングされます。
{block:Odd} {/block:Odd}現在のページの奇数番号の投稿にレンダリング。
{block:Even} {/block:Even}現在のページの偶数番号の投稿にレンダリング。
{block:More} {/block:More}投稿のインデックスページで「続きを読む」の改行がある場合にレンダリングされます。
{PostNotesURL}この投稿のリアクション部分のHTMLへのURL。リアクションをAJAXでロードする時に便利。

リブログ

変数説明
{block:RebloggedFrom} {/block:RebloggedFrom}投稿が他の投稿からリブログされた場合にレンダリングされます。
{ReblogParentName}この投稿がリブログされたブログのユーザー名。
{ReblogParentTitle}この投稿がリブログされたブログのタイトル。
{ReblogParentURL}この投稿がリブログされたブログのURL。
{ReblogParentPortraitURL-16}この投稿がリブログされた元のブログURL。16-ピクセル x 16-ピクセル。
{ReblogParentPortraitURL-24}この投稿がリブログされた元のブログURL。24-ピクセル x 24-ピクセル。
{ReblogParentPortraitURL-30}この投稿がリブログされた元のブログURL。30-ピクセル x 30-ピクセル。
{ReblogParentPortraitURL-40}この投稿がリブログされた元のブログURL。40-ピクセル x 40-ピクセル。
{ReblogParentPortraitURL-48}この投稿がリブログされた元のブログURL。48-ピクセル x 48-ピクセル。
{ReblogParentPortraitURL-64}この投稿がリブログされた元のブログURL。64-ピクセル x 64-ピクセル。
{ReblogParentPortraitURL-96}この投稿がリブログされた元のブログURL。96-ピクセル x 96-ピクセル。
{ReblogParentPortraitURL-128}この投稿がリブログされた元のブログURL。128-ピクセル x 128-ピクセル。
{ReblogRootName}この投稿が作成されたブログのユーザー名:
{ReblogRootTitle}この投稿が作成されたブログのタイトル。
{ReblogRootURL}この投稿が作成されたブログのURL。
{ReblogRootPortraitURL-16}この投稿が作成されたブログのポートレート画像URL、16-ピクセル x 16-ピクセル。
{ReblogRootPortraitURL-24}この投稿が作成されたブログのポートレート画像URL、24-ピクセル x 24-ピクセル。
{ReblogRootPortraitURL-30}この投稿が作成されたブログのポートレート画像URL、30-ピクセル x 30-ピクセル。
{ReblogRootPortraitURL-40}この投稿が作成されたブログのポートレート画像URL、40-ピクセル x 40-ピクセル。
{ReblogRootPortraitURL-48}この投稿が作成されたブログのポートレート画像URL、48-ピクセル x 48-ピクセル。
{ReblogRootPortraitURL-64}この投稿が作成されたブログのポートレート画像URL、64-ピクセル x 64-ピクセル。
{ReblogRootPortraitURL-96}この投稿が作成されたブログのポートレート画像URL、96-ピクセル x 96-ピクセル。
{ReblogRootPortraitURL-128}この投稿が作成されたブログのポートレート画像URL、128-ピクセル x 128-ピクセル。
{block:NotReblog} {/block:NotReblog}投稿が他の投稿からリブログされた場合にレンダリングされます。

Text Posts

変数説明
{block:Title} {/block:Title}この投稿にタイトルがある場合はレンダリングされます。
{Title}この投稿のタイトル。
{Body}この投稿のコンテンツ。

画像投稿

変数説明
{PhotoAlt}この投稿のキャプションのHTMLバージョン（存在する場合）。
{block:Caption} {/block:Caption}この投稿にキャプションがある場合はレンダリングされます。
{Caption}この投稿のキャプション。
{block:LinkURL}画像にクリックスルーセットがある場合はレンダリングされます。
{LinkURL}この画像のクリックスルーURL。
設定されていない場合、メディアパーマリンクのデフォルト。
{LinkOpenTag}設定されている場合にクリックスルーURLを含むHTMLオープンアンカータグ。
例: <a href="http://...">
{LinkCloseTag}クリックスルーURLが設定された場合のクローズアンカータグ出力。
例: </a>
{PhotoURL-500}この投稿の画像のURL。500-ピクセル以下の幅に収まるようにしてください。
{PhotoWidth-500}500px サイズの画像の幅。
{PhotoHeight-500}500px サイズの画像の高さ。
{PhotoURL-400}この投稿の画像のURL。400-ピクセル以下の幅に収まるようにしてください。
{PhotoWidth-400}400px サイズの画像の幅。
{PhotoHeight-400}400px サイズの画像の高さ。
{PhotoURL-250}この投稿の画像のURL。250-ピクセル以下の幅に収まるようにしてください。
{PhotoWidth-250}250px サイズの画像の幅。
{PhotoHeight-250}250px サイズの画像の高さ。
{PhotoURL-100}この投稿の画像のURL。100-ピクセル以下の幅に収まるようにしてください。
{PhotoWidth-100}100px サイズの画像の幅。
{PhotoHeight-100}100px サイズの画像の高さ。
{PhotoURL-75sq}この投稿の画像の正方形バージョンのURL。 75-ピクセル x 75-ピクセル。
{block:HighRes} {/block:HighRes}高解像度またはパノラマ画像が投稿にある場合にレンダリングされます。
{PhotoURL-HighRes}この投稿の高解像度またはパノラマサイズの画像。それぞれ1280px または 2560px 以下の幅に収まるようにしてください。
1280メディアディレクトリにアクセスするには、{PhotoURL-1280}、{PhotoWidth-1280}、および{PhotoHeight-1280}を使用します。
{PhotoWidth-HighRes}高解像度サイズの画像の幅。
{PhotoHeight-HighRes}高解像度サイズの画像の高さ。
{block:Exif} {/block:Exif}この画像がExifデータの場合はレンダリングされます。
{block:Camera}
{Camera}
{/block:Camera}		この画像のExifデータにカメラ情報が含まれる場合にレンダリングされます。
{block:Aperture}
{Aperture}
{/block:Aperture}		この画像のexifデータに絞り情報が含まれる場合はレンダリングされます。
{block:Exposure}
{Exposure}
{/block:Exposure}		画像のExifデータに露出情報が含まれる場合はレンダリングされます。
{block:FocalLength}
{FocalLength}
{/block:FocalLength}		画像のExifデータに焦点距離が含まれる場合はレンダリングされます。

例）

{Block:Photo}{LinkOpenTag}
        <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:HighRes}
         <a href="{PhotoURL-HighRes}">高解像度で表示</a>{/block:HighRes}{block:Exif}
        <ul>{block:Camera}
                <li>カメラ: {Camera}</li>{/block:Camera}{block:Aperture}
                <li>絞り値: {Aperture}</li>{/block:Aperture}{block:Exposure}
                <li>露出: {Exposure}</li>{/block:Exposure}{block:FocalLength}
                <li>焦点距離: {FocalLength}</li>{/block:FocalLength}
        </ul>{/block:Exif}{block:Caption}{Caption}{/block:Caption}{/Block:Photo}

パノラマ投稿

{block:Photo}に定義されたテンプレートタグは、 次の追加事項とともに{block:Panorama}で使用できます:

変数説明
{LinkOpenTag}パノラマライドボックスを有効化するためのJavascriptを含むHTMLオープンアンカータグ。
{LinkCloseTag}クロージングアンカータグ。
{PhotoURL-Panorama}画像のパノラマ投稿のURL。
この画像は大きく(2560以上のピクセル幅)となる可能性があります。
{PhotoWidth-Panorama}パノラマサイズの画像の高さ。
{PhotoHeight-Panorama}パノラマサイズの画像の高さ。

Example

{block:Panorama}
    {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />{LinkCloseTag}

    {block:Caption}
        {Caption}
    {/block:Caption}
{/block:Panorama}

フォトセット投稿

変数説明
{block:Caption} {/block:Caption}この投稿にキャプションがある場合はレンダリングされます。
{Caption}この投稿のキャプション。
{Photoset}縮小してコンテナに収まるレスポンシブフォトセットの埋め込みコード (最大幅700-ピクセル)。
{Photoset-700}700-ピクセル幅フォトセットの埋め込みコード。
{Photoset-500}500-ピクセル幅フォトセットの埋め込みコード。
{Photoset-400}400-ピクセル幅フォトセットの埋め込みコード。
{Photoset-250}250-ピクセル幅フォトセットの埋め込みコード。
{PhotoCount}フォトセットに含まれている画像数。
{PhotosetLayout}フォトセットレイアウトの整数表現。
{JSPhotosetLayout}フォトセット列数のJavaScript。
{block:Photos} {/block:Photos}各フォトセット画像がレンダリングされます。それぞれ{block:Photo}と同じ変数が含まれています。

例）

{block:Photoset}
    {block:Photos}
        <img src="{PhotoURL-500}"
            width="{PhotoWidth-500}"height="{PhotoHeight-500}" />
        
        {block:Caption}
            {Caption}
        {/block:Caption}
        
        {block:Exif}
            <ul>...</ul>
        {/block:Exif}
    {/block:Photos}
    
    {block:Caption}
        {Caption}
    {/block:Caption}
{/block:Photoset}

引用投稿

変数説明
{Quote}この投稿のコンテンツ。
{block:Source} {/block:Source}この投稿にソースがある場合はレンダリングされます。
{Source}この投稿のソース。
HTMLが含まれる場合があります
{Length}引用の長さによって「short」、「medium」、「long」。

リンク投稿

変数説明
{URL}この投稿のURL。
{Name}この投稿の名前。名前が入力されていない場合は既定が使用されます。
{Target}リンク投稿のAタグ中に含まれる必要があります。 「リンク先を新規ウィンドウに表示する」を有効にした場合はtarget="_blank"を出力。
{block:Host} {/block:Host}この投稿にホストがある場合 (URLと名前の両方が存在する場合)にレンダリングされます。
{Host}'www'なしのURLのホスト名。例: tumblr.com
{block:Thumbnail} {/block:Thumbnail}投稿に画像サムネイルがある場合はレンダリングされます。
{Thumbnail}リンクサムネイル URL。
{block:Description} {/block:Description}この投稿に説明がある場合はレンダリングされます。
{Description}この投稿の説明。

チャット投稿

変数説明
{block:Title} {/block:Title}この投稿にタイトルがある場合はレンダリングされます。
{Title}この投稿のタイトル。
{block:Lines} {/block:Lines}この投稿の各行のレンダリング。
{block:Label} {/block:Label}ラベルがこの投稿の現在の行に抽出された場合にレンダリングされます。
{Label}この投稿の現在の行のラベル（抽出されている場合）。
{Name}ラベルがこの投稿の現在の行に抽出された場合にレンダリングされます。
{Line}この投稿の現在の行。
{UserNumber}この投稿の現在の行のユーザーを表現する一意の特定整数。
{Alt}この投稿の各行の「偶数」または「奇数」。

音声投稿

変数説明
{block:Caption} {/block:Caption}この投稿にキャプションがある場合はレンダリングされます。
{Caption}この投稿のキャプション。
{block:AudioEmbed} {/block:AudioEmbed}埋め込みオーディオプレイヤーが使用可能な場合はレンダリングされます。
{AudioEmbed}この投稿のコンテンツの埋め込みコード。既定は幅500-ピクセル。
{AudioEmbed-250}この投稿のコンテンツの埋め込みコード。幅250-ピクセル。
{AudioEmbed-400}この投稿のコンテンツの埋め込みコード。幅400-ピクセル。
{AudioEmbed-500}この投稿のコンテンツの埋め込みコード。幅500-ピクセル。
{AudioEmbed-640}この投稿のコンテンツの埋め込みコード。幅640-ピクセル。
{block:AudioPlayer} {/block:AudioPlayer}ネイティブのオーディオプレイヤーが使用可能な場合はレンダリングされます。
{AudioPlayer}既定のオーディオプレイヤー。
{RawAudioURL}この投稿のオーディオファイルURL。
iPhoneのテーマ only.
{block:PlayCount} {/block:PlayCount}オーディオの再生カウントがある場合はレンダリングされます。
{PlayCount}この投稿が再生された回数。
{FormattedPlayCount}この投稿が再生された回数（カンマで表示）。
例:"12309"
{PlayCountWithLabel}この投稿が再生された回数（カンマおよび複数形ラベル表示）。
例: "12309 回"
{block:ExternalAudio} {/block:ExternalAudio}この投稿が外部にホストされているMP3を使用する場合はレンダリングされます。
「ダウンロード」リンクを追加する時に便利です。
{ExternalAudioURL}この投稿が外部にホストされたMP3を使用する場合の外部MP3URL。
{block:AlbumArt}
{AlbumArtURL}
{/block:AlbumArt}		オーディオファイルのID3情報にアルバムアートが含まれている場合はレンダリングされます。
{block:Artist}
{Artist}
{/block:Artist}		このオーディオファイルのID3情報にアーティスト名が含まれている場合はレンダリングされます。
{block:Album}
{Album}
{/block:Album}		このオーディオファイルのID3情報にアルバムタイトルが含まれている場合はレンダリングされます。
{block:TrackName}
{TrackName}
{/block:TrackName}		オーディオファイルのID3情報にトラック名が含まれている場合はレンダリングされます。

Video Posts

変数説明
{block:Caption} {/block:Caption}この投稿にキャプションがある場合はレンダリングされます。
{Caption}この投稿のキャプション。
{Video-700}この投稿のコンテンツの埋め込みコード。幅700-ピクセル。
{Video-500}この投稿のコンテンツの埋め込みコード。幅500-ピクセル。
{Video-400}この投稿のコンテンツの埋め込みコード。幅400-ピクセル。
{Video-250}この投稿のコンテンツの埋め込みコード。幅250-ピクセル。
{VideoEmbed-700}{Video-700}と同じ。ただし、直接アップロードされた動画からライトボックス効果を削除。幅700-ピクセル。
{VideoEmbed-500}{Video-500}と同じ。ただし、直接アップロードされた動画からライトボックス効果を削除。幅500-ピクセル以下。
{VideoEmbed-400}{Video-400}と同じ。ただし、直接アップロードされた動画からライトボックス効果を削除。幅400-ピクセル以下。
{VideoEmbed-250}{Video-250}と同じ。ただし、直接アップロードされた動画からライトボックス効果を削除。幅250-ピクセル。
{PlayCount}この投稿が再生された回数。
{FormattedPlayCount}この投稿が再生された回数（カンマで表示）。
例:"12309"
{PlayCountWithLabel}この投稿が再生された回数（カンマおよび複数形ラベル表示）。
例:"12309回"
{block:VideoThumbnail}
{VideoThumbnailURL}
{/block:VideoThumbnail}		画像サムネイルが使用可能な場合、レンダリングされます。
{block:VideoThumbnails}
{VideoThumbnailURL}
{/block:VideoThumbnails}		複数ある場合にそれぞれの動画サムネイルにレンダリング。

Answer Posts

変数説明
{Question}この投稿の質問。
フィルタリングされたHTMLを含むことがあります
{Answer}この投稿の回答。
HTMLを含むことが可能
{Asker}質問者のユーザー名とURLが含まれたシンプルHTMLテキストリンク、またはプレーンテキスト文字列「匿名」。
{AskerPortraitURL-16}質問者のポートレート画像のURL。16-ピクセル x 16-ピクセル。
{AskerPortraitURL-24}質問者のポートレート画像のURL。24-ピクセル x 24-ピクセル。
{AskerPortraitURL-30}質問者のポートレート画像のURL。30-ピクセル x 30-ピクセル。
{AskerPortraitURL-40}質問者のポートレート画像のURL。40-ピクセル x 40-ピクセル。
{AskerPortraitURL-48}質問者のポートレート画像のURL。48-ピクセル x 48-ピクセル。
{AskerPortraitURL-64}質問者のポートレート画像のURL。64-ピクセル x 64-ピクセル。
{AskerPortraitURL-96}質問者のポートレート画像のURL。96-ピクセル x 96-ピクセル。
{AskerPortraitURL-128}質問者のポートレート画像のURL。128-ピクセル x 128-ピクセル。
{block:Answerer}{/block:Answerer}投稿にリブログされた回答がある場合にレンダリング。
{Answerer}質問者のユーザー名とURLが含まれたシンプルHTMLテキストリンク。
{block:Answerer}{/block:Answerer}内、または投稿がリブログされた場合のみ存在。
{AnswererPortraitURL-16}リブログした回答者のポートレート画像URL。16-ピクセル x 16-ピクセル。
{block:Answerer}{/block:Answerer}内、または投稿がリブログされた場合のみ存在。')
{AnswererPortraitURL-24}リブログした回答者のポートレート画像URL。24-ピクセル x 24-ピクセル。
{block:Answerer}{/block:Answerer}内、または投稿がリブログされた場合のみ存在。
{AnswererPortraitURL-30}リブログした回答者のポートレート画像URL。30-ピクセル x 30-ピクセル。
{block:Answerer}{/block:Answerer}内、または投稿がリブログされた場合のみ存在。
{AnswererPortraitURL-40}リブログした回答者のポートレート画像URL。40-ピクセル x 40-ピクセル。
{block:Answerer}{/block:Answerer}内、または投稿がリブログされた場合のみ存在。
{AnswererPortraitURL-48}リブログした回答者のポートレート画像URL。48-ピクセル x 48-ピクセル。
{block:Answerer}{/block:Answerer}内、または投稿がリブログされた場合のみ存在。
{AnswererPortraitURL-64}リブログした回答者のポートレート画像URL。64-ピクセル x 64-ピクセル。
{block:Answerer}{/block:Answerer}内、または投稿がリブログされた場合のみ存在。
{AnswererPortraitURL-96}リブログした回答者のポートレート画像URL。96-ピクセル x 96-ピクセル。
{block:Answerer}{/block:Answerer}内、または投稿がリブログされた場合のみ存在。
{AnswererPortraitURL-128}リブログした回答者のポートレート画像URL。128-ピクセル x 128-ピクセル。
{block:Answerer}{/block:Answerer}内、または投稿がリブログされた場合のみ存在。
{Replies}リブログチェーン。リブログではない場合 {Replies}が {Answer}のエイリアスになります

Example

{block:Answer}
    <div class="question"><div class="asker">{Asker}</div><div class="asker-question">{Question}</div><img class="asker-avatar" src="{AskerPortraitURL-96}" alt=""></div>

    {block:Answerer}
        <div class="answer"><div class="answerer">{Answerer}</div><div class="answerer-answer">{Answer}</div><img class="answerer-avatar" src="{AnswererPortraitURL-96}" alt=""></div>
    {/block:Answerer}

    <div class="replies">
        {Replies}
    </div>
{/block:Answer}

日付

変数説明
{block:Date} {/block:Date}すべての投稿にレンダリング。
投稿以外のページでは確実に非表示になるよう、常にこのブロックで日付を改行します。
{block:NewDayDate} {/block:NewDayDate}特定の日付に一覧表示される最初の投稿にレンダリング。
{block:SameDayDate} {/block:SameDayDate}特定の日付に一覧表示される次からの投稿にレンダリング。
{DayOfMonth}"1" から "31"
{DayOfMonthWithZero}"01" から "31"
{DayOfWeek}"月曜" から "日曜"
{ShortDayOfWeek}"月"から "日"
{DayOfWeekNumber}"1" から "7"
{DayOfMonthSuffix}"st", "nd", "rd", "th"
{DayOfYear}"1" から "365"
{WeekOfYear}"1" から "52"
{Month}"1月" から "12月"
{ShortMonth}"1月"から"12月"
{MonthNumber}"1" から "12"
{MonthNumberWithZero}"01" から "12"
{Year}"2007"
{ShortYear}"07"
{AmPm}"am"または"pm"
{CapitalAmPm}"AM" または "PM"
{12Hour}"1" から "12"
{24Hour}"0" から "23"
{12HourWithZero}"01" から "12"
{24HourWithZero}"00" から "23"
{Minutes}"0" から "59"
{Seconds}"0" から "59"
{Beats}"0" から "999"
{Timestamp}"1172705619"
{TimeAgo}文脈的な時間。
例: "1分前"、"2時間前"、"3 週間前"など。

Notes

変数説明
{block:PostNotes} {/block:PostNotes}Rendered on permalink pages if this post has notes.
{PostNotes}この投稿の出力の標準HTML。パーマリンクページにのみレンダリング。
{PostNotes-16}16x16サイズのプロフィール画像があるこの投稿のリアクションの標準HTML出力。パーマリンクページでのみレンダリング。
{PostNotes-64}64x64サイズのプロフィール画像があるこの投稿のリアクションの標準HTML出力。パーマリンクページでのみレンダリング。
{block:NoteCount} {/block:NoteCount}この投稿にリアクションがある場合にレンダリング。
投稿以外のページでは確実に非表示になるよう、常にこのブロックでリアクションの数を改行します。
{NoteCount}この投稿のリアクションの数。
{NoteCountWithLabel}複数形ラベルがあるこの投稿のリアクションの数。
例: "24 件のリアクション"

Example

<html>
    <head>
        <style type="text/css">
            ol.notes {
                padding: 0px;
                margin: 25px 0px;
                list-style-type: none;
                border-bottom: solid 1px #ccc;
            }

            ol.notes li.note {
                border-top: solid 1px #ccc;
                padding: 10px;
            }

            ol.notes li.note img.avatar {
                vertical-align: -4px;
                margin-right: 10px;
                width: 16px;
                height: 16px;
            }

            ol.notes li.note span.action {
                font-weight: bold;
            }

            ol.notes li.note .answer_content {
                font-weight: normal;
            }

            ol.notes li.note blockquote {
                border-color: #eee;
                padding: 4px 10px;
                margin: 10px 0px 0px 25px;
            }

            ol.notes li.note blockquote a {
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        {block:Posts}
            ...

            {PostNotes}{/block:Posts}
    </body>
</html>

リアクションはAJAXでページ付与されます。テーマがリアクションのマークアップまたはDOMノードを操作する必要がある場合、リアクションの新規ページがロードまたは挿入された時にJavascriptコールバックを追加できます。

変数説明
tumblrNotesLoaded(notes_html)Javascript機能が定義された場合、リアクションの新規ページがロードされ挿入準備が整った時にトリガされます。この機能が偽の値を返した場合、リアクションの挿入はブロックされます。
tumblrNotesInserted()このJavascript機能が定義された場合、DOMに新規ページのリアクションが挿入された後にトリガされます。

タグ

変数説明
{block:HasTags} {/block:HasTags}投稿にタグがある場合{block:Posts}の内部をレンダリング。
{block:Tags} {/block:Tags}各投稿のタグにレンダリング。
{Tag}このタグの名前。
{URLSafeTag}このタグのURLセーフ版。
{TagURL}このタグを共有する他の投稿を持つタグページURL。
{TagURLChrono}このタグを時系列順に共有する他の投稿を持つタグページURL。

例）

<html>
    <body>
        {block:Posts}
            <div class="post">
                {block:Text}...{/block:Text}{block:Photo}...{/block:Photo}
                ...

                {block:HasTags}
                    <ul class="tags">
                        {block:Tags}
                            <li>
                                <a href="{TagURL}">{Tag}</a>
                            </li>
                        {/block:Tags}
                    </ul>
                {/block:HasTags}
            </div>
        {/block:Posts}
    </body>
</html>

コンテンツのソース

変数説明
{block:ContentSource} {/block:ContentSource}ソースが投稿コンテンツに対し指定された場合にレンダリングされます。
{SourceURL}属性付与されたソースのURL。
{block:SourceLogo} {/block:SourceLogo}ロゴがコンテンツのソースに存在する場合にレンダリングされます。
{BlackLogoURL}ソースのロゴのURL。
{LogoWidth}ソースロゴの幅。
{LogoHeight}ソースのロゴの高さ。
{SourceTitle}コンテンツソースのタイトル。
{block:NoSourceLogo} {/block:NoSourceLogo}ソースロゴが存在しない場合にレンダリングされます。

例）

{block:ContentSource}
    <a href="{SourceURL}">{lang:Source}:
        {block:SourceLogo}
            <img src="{BlackLogoURL}" width="{LogoWidth}"
            height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}
    </a>{/block:ContentSource}

Submissions

変数説明
{block:Submission} {/block:Submission}投稿がゲスト投稿の場合はレンダリングされます。
{Submitter}ゲスト投稿のブログの名前。
{SubmitterURL}ゲスト投稿ブログのURL。
{SubmitterPortraitURL-16}送信者のポートレート画像URL。16-ピクセル x 16-ピクセル。
{SubmitterPortraitURL-24}送信者のポートレート画像URL。24-ピクセル x 24-ピクセル。
{SubmitterPortraitURL-30}送信者のポートレート画像URL。30-ピクセル x 30-ピクセル。
{SubmitterPortraitURL-40}送信者のポートレート画像URL。40-ピクセル x 40-ピクセル。
{SubmitterPortraitURL-48}送信者のポートレート画像URL。48-ピクセル x 48-ピクセル。
{SubmitterPortraitURL-64}送信者のポートレート画像URL。64-ピクセル x 64-ピクセル。
{SubmitterPortraitURL-96}送信者のポートレート画像URL。96-ピクセル x 96-ピクセル。
{SubmitterPortraitURL-128}送信者のポートレート画像URL。128-ピクセル x 128-ピクセル。

グループブログ

グループメンバー

変数説明
{block:GroupMembers} {/block:GroupMembers}追加の公開グループブログにレンダリング。
{block:GroupMember} {/block:GroupMember}それぞれの追加公開グループブログメンバーにレンダリングされます。
{GroupMemberName}メンバーブログのユーザー名。
{GroupMemberTitle}メンバーブログのタイトル。
{GroupMemberURL}メンバーブログのURL。
{GroupMemberPortraitURL-16}メンバーのポートレート画像URL。16-ピクセル x 16-ピクセル。
{GroupMemberPortraitURL-24}メンバーのポートレート画像URL。24-ピクセル x 24-ピクセル。
{GroupMemberPortraitURL-30}メンバーのポートレート画像URL。30-ピクセル x 30-ピクセル。
{GroupMemberPortraitURL-40}メンバーのポートレート画像URL。40-ピクセル x 40-ピクセル。
{GroupMemberPortraitURL-48}メンバーのポートレート画像URL。48-ピクセル x 48-ピクセル。
{GroupMemberPortraitURL-64}メンバーのポートレート画像URL。64-ピクセル x 64-ピクセル。
{GroupMemberPortraitURL-96}メンバーのポートレート画像URL。96-ピクセル x 96-ピクセル。
{GroupMemberPortraitURL-128}メンバーのポートレート画像URL。128-ピクセル x 128-ピクセル。

Post Authors

変数説明
{PostAuthorName}追加のグループブログへの投稿作者のユーザー名。
{PostAuthorTitle}追加のグループブログへの投稿作者のブログのタイトル。
{PostAuthorURL}追加グループブログへの投稿作者のブログURL。
{PostAuthorPortraitURL-16}追加のグループブログ画像作者のポートレート画像。16-ピクセル x 16-ピクセル。
{PostAuthorPortraitURL-24}追加のグループブログ画像作者のポートレート画像。24-ピクセル x 24-ピクセル。
{PostAuthorPortraitURL-30}追加のグループブログ画像作者のポートレート画像。30-ピクセル x 30-ピクセル。
{PostAuthorPortraitURL-40}追加のグループブログ画像作者のポートレート画像。40-ピクセル x 40-ピクセル。
{PostAuthorPortraitURL-48}追加のグループブログ画像作者のポートレート画像。48-ピクセル x 48-ピクセル。
{PostAuthorPortraitURL-64}追加のグループブログ画像作者のポートレート画像。64-ピクセル x 64-ピクセル。
{PostAuthorPortraitURL-96}追加のグループブログ画像作者のポートレート画像。96-ピクセル x 96-ピクセル。
{PostAuthorPortraitURL-128}追加のグループブログ画像作者のポートレート画像。128-ピクセル x 128-ピクセル。

日付ページ

Tumblrブログはhttp://david.tumblr.com/day/2007/04/29/ .のようなURLを使用して特定の日付けの投稿を表示できます。次のマークアップを含めることで、これらのページに投稿の前の日や次の日のページ番号を含めることができます。

変数説明
{block:DayPage} {/block:DayPage}日付ページにレンダリング。
{block:DayPagination} {/block:DayPagination}「前」または「次」の日付けページがある場合にレンダリングされます。
{block:PreviousDayPage} {/block:PreviousDayPage}「前」の日付けページがある場合にレンダリングされます。
{block:NextDayPage} {/block:NextDayPage}「次」の日付けページがある場合にレンダリングされます。
{PreviousDayPage}「前」の日のページURL。
{NextDayPage}「次」の日ページURL。

例）

<html>
    <body>
        <h1>{Title}</h1>

        {block:DayPage}
            <h2>{Month} {DayOfMonth}, {Year}</h2>
        {/block:DayPage}

        <ol id="posts">
            {block:Posts}
                ...
            {/block:Posts}
        </ol>

        <div id="footer">
            {block:Pagination}{block:PreviousPage}
                    <a href="{PreviousPage}">&#171; Previous</a>
                {/block:PreviousPage}{block:NextPage}
                    <a href="{NextPage}">Next &#187;</a>
                {/block:NextPage}{/block:Pagination}{block:DayPagination}{block:PreviousDayPage}
                    <a href="{PreviousDayPage}">
                        &#171; {ShortMonth} {DayOfMonth}
                    </a>
                {/block:PreviousDayPage}{block:NextDayPage}
                    <a href="{NextDayPage}">
                        {ShortMonth} {DayOfMonth} &#187;
                    </a>
                {/block:NextDayPage}{/block:DayPagination}
        </div>
    </body>
</html>

タグページ

変数説明
{block:TagPage} {/block:TagPage}タグページのレンダリング。
{Tag}このタグの名前。
{URLSafeTag}このタグのURLセーフ版。
{TagURL}このタグを共有する他の投稿を持つタグページURL。
{TagURLChrono}このタグを時系列順に共有する他の投稿を持つタグページURL。

例）

<html>
    <body>
        {block:TagPage}
            <h2>Posts tagged "{Tag}"</h2>
        {/block:TagPage}{block:Posts}
            ...
        {/block:Posts}
    </body>
</html>

ローカリゼーション

ローカライズされたテーマの文字列を使うと、Tumblrが対応しているあらゆる言語でテーマを表示できるようになります。適切な変数でテーマに使われている語や句を置換します。テキスト全体はブログの設定で指定された言語で出力されます。文字列を見る →

検索

変数説明
{SearchQuery}現在の検索クエリ。
{URLSafeSearchQuery}リンクおよびJavascriptで使用する現在の検索クエリのURLバージョン。
{block:SearchPage}検索ページにレンダリング。
{SearchResultCount}現在の検索クエリに返された結果の数。
{block:NoSearchResults}検索結果が現在の検索クエリに返された場合はレンダリング。

例）

<form action="/search" method="get">
    <input type="text" name="q" value="{SearchQuery}"/>
    <input type="submit" value="Search"/>
</form>

フォロー中

変数説明
{block:Following} {/block:Following}他のブログをフォローしている場合にレンダリング。
{block:Followed} {/block:Followed}フォローしているそれぞれのブログでレンダリング。
{FollowedName}フォロー中のブログのユーザー名。
{FollowedTitle}フォロー中のブログのタイトル。
{FollowedURL}フォロー中のブログのURL。
{FollowedPortraitURL-16}フォローしているブログのポートレート画像URL。16-ピクセル x 16-ピクセル。
{FollowedPortraitURL-24}フォローしているブログのポートレート画像URL。24-ピクセル x 24-ピクセル。
{FollowedPortraitURL-30}フォローしているブログのポートレート画像URL。30-ピクセル x 30-ピクセル。
{FollowedPortraitURL-40}フォローしているブログのポートレート画像URL。40-ピクセル x 40-ピクセル。
{FollowedPortraitURL-48}フォローしているブログのポートレート画像URL。48-ピクセル x 48-ピクセル。
{FollowedPortraitURL-64}フォローしているブログのポートレート画像URL。64-ピクセル x 64-ピクセル。
{FollowedPortraitURL-96}フォローしているブログのポートレート画像URL。96-ピクセル x 96-ピクセル。
{FollowedPortraitURL-128}フォローしているブログのポートレート画像URL。128-ピクセル x 128-ピクセル。

Example

{block:Following}
    Blogs I follow:
    <ul>{block:Followed}
            <li>
                <img src="{FollowedPortraitURL-48}"/>
                <a href="{FollowedURL}">{FollowedName}</a>
            </li>{/block:Followed}
    </ul>{/block:Following}

スキ

変数説明
{block:Likes} {/block:Likes}「スキ!」を共有する場合にレンダリング。
{Likes}「いいね!」の標準HTML出力。
{Likes limit="5"}最後5件の「スキ!」の標準HTML出力。
最大: 10
{Likes width="200"}200-ピクセル幅にスケールされた音声および画像プレイヤーつきの「スキ!」の標準HTML標準出力。
CSS最大幅または類似の値のあるスケール画像。
{Likes summarize="100"}Standard HTML output of your likes with text summarized to 100-characters.
最大: 250

例）

<html>
    <head>
        <style type="text/css">
            ul#likes {
                list-style-type: none;
                margin: 0 0 0 0;
                padding: 0 0 0 0;
            }

                li.like_post {
                    /* Should match the width specified in the Likes tag */
                    width: 150px;
                    padding: 0 40px 0 0;
                    float: left;
                }

                  li.like_post img {
                      max-width: 100%;
                  }

                  li.like_post blockquote {
                      margin: 0;
                      padding: 0 0 0 10px;
                      border-left: 1px solid #eee;
                  }

                  li.like_post ol,
                  li.like_post ul {
                      margin: 0 0 0 15px;
                      padding: 0;
                  }

                  li.like_post .like_link a {
                      font-weight: bold;
                  }

                  li.like_post .like_title {
                      font-weight: bold;
                  }

                  li.like_post .post_info_bottom {
                      margin: 10px 0 0 0;
                      display: block !important;
                  }
        </style>
    </head>
    <body>
        ...

        {block:Likes}
            <div id="likes_container">
                <h2>Stuff I like</h2>

                {Likes limit="5" summarize="100" width="150"}

                <a href="http://www.tumblr.com/liked/by/{Name}">
                    See more stuff I like
                </a>
            </div>
        {/block:Likes}
    </body>
</html>

「スキ!」およびリブログボタン

「スキ!」ボタン

変数説明
{LikeButton}Default Like button.
{LikeButton color="grey"}Like button color.
グレー、白、または黒の「スキ!」ボタンは訪問者が投稿にスキをつけた場合には赤になります。
{LikeButton size="20"}Like button size.
最大: 100

Reblog Button

変数説明
{ReblogButton}Default Reblog button.
{ReblogButton color="grey"}Reblog button color.
グレー、白、または黒
{ReblogButton size="20"}Reblog button size.
最大: 100

例）

<html>
    <head>
        <style type="text/css">
            .like_and_reblog_buttons {
                border: 1px solid #e8e8e8;
                border-radius: 3px;
                list-style: none;
            }

            .like_and_reblog_buttons li {
                float: left;
                margin: 0;
                padding: 7px 15px;
                height: 20px;
            }

            .like_and_reblog_buttons li:first-child {
                border-right: 1px solid #e8e8e8;
            }
        </style>
    </head>
    <body>
        ...

        {block:Posts}
          ...
          <ul class="like_and_reblog_buttons">
              <li>{ReblogButton}</li>
              <li>{LikeButton}</li>
          </ul>
        {/block:Posts}

        ...
    </body>
</html>

テーマが無限スクロールまたはその他のAJAXページ付与を使用している場合、ページがロードされたら、または挿入されたら新規投稿の「スキ!」ステータスをリクエストする必要があります。

機能説明
Tumblr.LikeButton.get_status_by_page(n)投稿の新規ページをリクエストした後でこの機能を呼び出します。整数としてロードされたページ番号を取ります。
Tumblr.LikeButton.get_status_by_post_ids([n,n,n])各投稿の「スキ!」ステータスのリクエスト。投稿IDの配列をとります。

テーマオプション

カスタムカラーの有効化

テーマに特殊メタカラータグを含めることでカスタマイズページでユーザーは簡単にこれらの色を編集できます。

ユーザーが手動で他の色を選択しない限り、{BackgroundColor}、{TitleColor}、または{AccentColor}をデフォルトとして全体的な外観パラメータから値を引き継ぐことができます。

例）

<html>
    <head>
        <!-- DEFAULT COLORS -->
        <meta name="color:Background" content="#eee"/>
        <meta name="color:Content Background" content="#fff"/>
        <meta name="color:Heading text" content="{TitleColor}"/>
        <meta name="color:Text" content="#000"/>

        <style type="text/css">
            #title {
                color: {color:Heading text};
            }
            #content {
                background-color: {color:Content Background};
                color: {color:Text};
            }
        </style>
    </head>
    <body bgcolor="{color:Background}">
        <h1 id="title">Title</h1>
        <div id="content">
            ...
        </div>
    </body>
</html>

カスタムフォントの有効化

テーマに特殊な「meta-font」タグを含めることで、カスタマイズページを使ってこれらのフォントを簡単に変更できます。

ユーザーが手動で他の色を選択しない限り、「タイトル」フォント全体の外観パラメターからの値を引き継ぐためにデフォルトとして{TitleFont}を指定することもできます。

例）

<html>
    <head>
        <!-- DEFAULT FONTS -->
        <meta name="font:Title" content="Helvetica Neue"/>
        <meta name="font:Body" content="Arial, Helvetica, sans-serif"/>

        <style type="text/css">
            h1 {
                font: 30px {font:Title};
            }

            #content {
                font: 12px {font:Body};
            }
        </style>
    </head>
    ...
</html>

Booleansの有効化

特殊な「meta-if」タグを含めることで、ユーザーは簡単に定義するオプションを切り替えることができるようになります。これは異なるウィジェットやデザイン要素を表示・非表示する時に便利です。

例）

<html>
    <head>
        <!-- DEFAULTS -->
        <meta name="if:Show people I follow" content="1"/>
        <meta name="if:Reverse pagination" content="0"/>
    </head>
    <body>
        {block:IfNotReversePagination}
            <a href="...">Previous</a> <a href="...">Next</a>
        {/block:IfNotReversePagination}{block:IfReversePagination}
            <a href="...">Next</a> <a href="...">Previous</a>
        {/block:IfReversePagination}{block:IfShowPeopleIFollow}
            <div id="following">...</div>
        {/block:IfShowPeopleIFollow}
    </body>
</html>

ドロップダウンリストの有効化

特殊な「meta-select」タグをテーマに含めることにより、ユーザーが使えるよう特定のデザイン要素にいくつかのオプションを与えることができます。

例）

<html>
    <head>
        <!-- DEFAULTS -->
        <meta name="select:Layout" content="regular" title="Regular">
        <meta name="select:Layout" content="narrow" title="Narrow">
        <meta name="select:Layout" content="grid" title="Grid">
    </head>
    <body>
        <div class="content {select:Layout}">
            ...
        </div>
    </body>
</html>

カスタムテキストの有効化

テーマに特殊な「meta-text」タグを含めることにより、ユーザーは簡単にあなたが定義するテキスト変数を構成できます。これはユーザーからの情報が必要とされるテキストを変更したりウィジェットを構成するのに便利です。

例）

<html>
    <head>
        <!-- DEFAULT TEXT -->
        <meta name="text:Flickr Username" content=""/>
    </head>
    <body>
        {block:IfFlickrUsername}
            <div id="flickr_widget">
                <script type="text/javascript"
                src="http://flickr.com/widget?user={text:Flickr Username}">
                </script>
            </div>
        {/block:IfFlickrUsername}
    </body>
</html>

カスタム画像の有効化

特殊「meta-image」タグを含めることにより、ユーザーはテーマを編集することなく簡単にカスタム画像を使用できるようになります。画像が設定されていない場合、画像の変数 (例:{image:Logo} )は1ピクセルの透明の正方形を返します。

ユーザーが異なる画像をアップロードするまで{HeaderImage}をデフォルトとして指定し、デフォルトとして"Header image"全体的な外観パラメータからの値を引き継ぐことができます。

例）

<html>
    <head>
        <!-- DEFAULT IMAGE -->
        <meta name="image:Background" content="http://static.tumblr.com/..."/>
        <meta name="image:Header" content="{HeaderImage}"/>

        <style type="text/css">
            body {
                background: #2D567C url('{image:Background}');
            }
        </style>
    </head>
    <body>
        {block:IfHeaderImage}<img src="{image:Header}"/>{/block:IfHeaderImage} 
        {block:IfNotHeaderImage}<h1>{Title}</h1>{/block:IfNotHeaderImage}
    </body>
</html>

カスタムCSSの有効化

{CustomCSS}タグをテーマのCSSスタイルブロックの下に含めることで、テーマを共有するユーザーはマークアップを編集することなく、外観を編集できるようになります。

例）

<html>
    <head>
        <style type="text/css">
            #content {
                background-color: #fff;
                color: #000;
            }

            {CustomCSS}
        </style>
    </head>
    <body>
        <div id="content">
            ...
        </div>
    </body>
</html>

Twitter

Twitterとの連携をTumblrの設定で有効化している場合、最近のツイートを表示するために/tweets.jsJavascriptファイルをメインブログに含めることができます。このファイルはコールバック関数recent_tweets()を実行し、Twitter API JSONデータを唯一のパラメータとして送信します。

変数説明
{block:Twitter} {/block:Twitter}Twitterの連携が有効化されている場合にレンダリング。
{TwitterUsername}使用しているTwitterユーザー名。

例）

{block:Twitter}
    <div id="twitter" style="display:none;">
        <h3><a href="http://twitter.com/{TwitterUsername}">Latest Tweets</a></h3>

        <div id="tweets"></div>
    </div>

    <script type="text/javascript">
        function recent_tweets(data) {
            for (i=0; i<data.length; i++) {
                document.getElementById("tweets").innerHTML =
                    document.getElementById("tweets").innerHTML +
                    '<a href="http://twitter.com/{TwitterUsername}/status/' +
                    (data[i].id_str ? data[i].id_str : data[i].id) +
                    '"><div class="content">' + data[i].text +
                    '</div></a>';
            }
            document.getElementById("twitter").style.display = 'block';
        }
    </script>
{/block:Twitter}

<!-- Put this at the bottom of the page -->
{block:Twitter}
    <script type="text/javascript" src="/tweets.js"></script>
{/block:Twitter}

iPhoneテーマ

Tumblrブログをモバイルデバイスで閲覧する場合、自動的に最適化されたレイアウトが使用されます。オーバーライドできます。iPhoneレイアウト はカスタムレイアウトページを(via カスタマイズ) ブログに/iphone-themeを追加することで上書きできます。

さまざまな変更

特殊変換キーワードで変数にプレフィックスを追加することにより、Tumblrは特殊形式で変数を出力できるようになります。これはJavascriptなどにデータを渡す時に便利です。Tumblrでは現在5つの変換をサポートしています。

変数説明
Plaintext安全にHTML属性などを含めるために、HTML-タグを削除し適切な文字をHTMLエンティティに変換する文字列を出力するためにPlaintextでテーマ変数をプレフィックス付与。
JavascriptJavascript文字列(引用符で改行)を出力するためにJSでテーマ変数にプレフィックス付与。
Javascript PlaintextHTML-タグを削除し適切な文字をHTMLエンティティに変換するJavascript文字列（引用符で改行）を出力するためにJSPlaintextのついたテーマ変数でプレフィックス付与。
URLEncodedURLエンコードされた文字列の付いたテーマ変数にURLEncodedでテーマ変数をプレフィックス付与。
RGBRGBで色の変数をプレフィックス付与し、16進数の出力をRGBに変換できます。

例）

<a href="{URL}" title="{PlaintextName}">{Name}</a>

<script type="text/javascript">
    var description      = {JSDescription};
    var description_text = {JSPlaintextDescription};
</script>

<a href="http://digg.com/submit?url={URLEncodedPermalink}">Digg this</a>