Tags of tumblr.

Text: Tumblr で使えるタグ - 導入 2011-01-03

この記事について

Creating a custom HTML theme を読みながら自分なりにまとめたもの。

Text: Tumblr で使えるタグ - 導入 2010-01-20

Introduction

Dashboard で Customize をクリックして Theme タブを選択し、Use custom HTML ボタンをクリックすると tumblelog のテーマを自由に編集できるようになる。

この CustomHTML に {…} や {block:…}…{/block:…} 形式の要素を仕込むことで、それらが別の要素に置換される。
例えば <head><title>{Title}</title></head> と書けば、{Title} がページ作成者の設定したページタイトルに置換される。

マークアップに用いる {…} 形式の要素を「変数」、{block:…}…{/block:…} 形式の要素を「ブロック」と呼ぶ。また、ブロック要素に囲まれた部分を「内容」と呼ぶ。

例：

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

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

テーマの完全なマークアップは help - Create a custom HTML theme for your blog の Here’s an example of the complete markup for a theme: 以下を見ること。そこにない要素はなくても構わない（多分）。
URL safe とか HTML safe というのは、それぞれで使えない文字（URL だと"/“とか）を無視したり別の文字に置き換えたりしたもののこと。例えばこの記事だと、記事名の「Tumblr で使えるタグ - 導入 2010-01-20」が、日本語が無視された「tumblr-2010-01-20」となってパーマリンクの最後に付加されている。半角スペースはダッシュ（-）に置き換えられ、ダッシュが連続すると一つにまとめられる。

目次

posted at 20100120 19:00 | Permalink

Text: 基本的な要素

Basic Variables

{Title}: tumblelog の名前を表示する。HTML-safe。
{Description}: tumblelog の説明を表示する。HTML を含んでも良い。
{MetaDescription}: <meta name="description" content={MetaDescription} /> のように使う。
<meta name="description" content="..." /> はその文書の説明を記述する要素で、検索サイトなどで表示される。
{RSS}: tumblelog のRSS フィードの URL。
{Favicon}: tumblelog の Favicon（お気に入り/ブックマークやタブに表示されるアイコン）の URL。
{CustomCSS}: Custmize ページの Theme で指定したカスタム CSS のコード。
{block:PermalinkPage} {/block:PermalinkPage}: このブロックで囲まれた内容は個別記事を閲覧したときにのみ表示され、インデックスでは表示されない。
Discus などを使って Tumblr にコメント機能をつけるとき便利。
{block:IndexPage} {/block:IndexPage}: このブロックで囲まれた内容はインデックスでのみ表示され、個別記事を閲覧したときは表示されない。
{block:PostTitle} {PostTitle} {/block:PostTitle}: 個々の記事が開かれたとき、その記事のタイトルを表示する。
例： head 要素に
<title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle} </title>
と書いておくと、タイトルバーの表示が 1)インデックスページでは tumblelog のタイトルのみ 2)個別記事では tumblelogのタイトル - 記事のタイトルとなる。
{block:PostSummary} {PostSummary} {/block:PostSummary}: {block:PostTitle} {PostTitle} {/block:PostTitle} とほぼ同じだが、記事にタイトルが存在しない場合はその記事のサマリーを表示する。
{PortraitURL-16}
{PortraitURL-24}
{PortraitURL-30}
{PortraitURL-40}
{PortraitURL-48}
{PortraitURL-64}
{PortraitURL-96}
{PortraitURL-128}: 自分の Portrait photo のURL。数字は正方形の一辺のサイズ（ピクセル単位）。

posted at 20100120 18:53 | Permalink

Text: ページナビゲーション

Navigation

{block:Pagination} {/block:Pagination}: 「前」「次」どちらかのページがあると内容が表示される。
{block:PreviousPage} {/block:PreviousPage}: 「前（新しい方）」のページがあると内容が表示される。
{block:NextPage} {/block:NextPage}: 「次（古い方）」のページがあると内容が表示される。
{PreviousPage}: 「前」のページのURL。
{NextPage}: 「次」のページのURL。
{CurrentPage}: 現在のページ番号。
{TotalPages}: 総ページ数。
{block:SubmissionsEnabled} {/block:SubmissionsEnabled}: Submissions が有効になっていると表示される。
Submissions というのは閲覧者が記事を投稿できる機能。管理者がその記事を承認することで tumblelog に記事が投稿される。
{block:AskEnabled} {/block:AskEnabled}: Ask機能が有効になっていると表示される。
Ask というのは閲覧者が管理者に質問を投稿できる機能。tumblelogのURL/ask で質問を受けられる。
{AskLabel}: 設定された Ask page title を表示する。

posted at 20100120 18:52 | Permalink

Text: 各記事のナビゲーション

Permalink Navigation

{block:PermalinkPagination} {/block:PermalinkPagination}: 「前」「次」どちらかの記事があると内容が表示される。
{block:PreviousPost} {/block:PreviousPost}: 「前（新しい方）」のページがあると内容が表示される。
{block:NextPost} {/block:NextPost}: 「次（古い方）」のページがあると内容が表示される。
{PreviousPost}: 「前」の記事のURL。
{NextPost}: 「次」の記事のURL。

posted at 20100120 18:51 | Permalink

Text: 記事を表示させる要素

Posts

{block:Posts} {/block:Posts}: 投稿順とは逆に（即ち新しい記事から先に）記事を表示する。ページ当たりの記事数は “Setting” ページから設定できる。
{block:Text} {/block:Text}: テキストの投稿 (Text posts) を表示する。
{block:Photo} {/block:Photo}: 写真/絵の投稿 (Photo posts) を表示する。
{block:Quote} {/block:Quote}: 引用の投稿 (Quote posts) を表示する。
{block:Link} {/block:Link}: リンクの投稿 (Link posts) を表示する。
{block:Chat} {/block:Chat}: 会話の投稿 (Conversation posts) を表示する。
{block:Audio} {/block:Audio}: 音楽/音声の投稿 (Audio posts) を表示する。
{block:Video} {/block:Video}: 映像の投稿 (Video posts) を表示する。
{block:Answer} {/block:Answer}: Ask に対する回答の投稿 (Answer posts) を表示する。
{Permalink}: 個別記事へのパーマリンクを表示する（例： “http://sample.tumblr.com/post/123"）。
{PostID}: 記事の数字IDを表示する。
{TagsAsClasses}: その記事のタグを HTML の class 属性のように展開する（例： "humor office new_york_city"）。
デフォルトでは、インポートされた記事ではインポート元のドメインも展開される（例： "twitter_com"、"digg_com"、他）。これは Del.icio.us のようにパーマリンクとして content URLs を送るフィードでは期待通りには動かない可能性がある。（？詳細不明）
その記事がリブログされたものであった場合、 "reblog” も一緒に展開される。
{block:Post[1-15]} {/block:Post[1-15]}: 指定された位置の記事に表示される。これにより、宣伝やデザイン要素を記事中に挿入できる。1ページ中の記事数は Custmize の Advanced で設定できる。
例： {block:Post5}これは五番目の投稿です{/block:Post5} という要素は、表示されている中で五番目の記事に表示される。
{block:Odd} {/block:Odd}: 現在表示されている記事のうち、奇数番の記事に表示される。
{block:Even} {/block:Even}: 現在表示されている記事のうち、偶数番の記事に表示される。
{block:More} {/block:More}: インデックスにおいて、Read More のある記事に表示される。
Read More とは、Regular posts に <!– more –> と書くことで、インデックスではそれ以降の部分が表示されなくなる機能。個別記事では全文が表示される。

posted at 20100120 18:47 | Permalink

Text: リブログに関する要素

ReBlogs

{block:RebloggedFrom} {/block:RebloggedFrom}: 他の記事からのリブログの場合表示される。
{ReblogParentName}: リブログ元の tumblelog のユーザー名。
{ReblogParentTitle}: リブログ元の tumblelog のタイトル。
{ReblogParentURL}: リブログ元の tumblelog の URL。
{ReblogParentPortraitURL-16}
{ReblogParentPortraitURL-24}
{ReblogParentPortraitURL-30}
{ReblogParentPortraitURL-40}
{ReblogParentPortraitURL-48}
{ReblogParentPortraitURL-64}
{ReblogParentPortraitURL-96}
{ReblogParentPortraitURL-128}: リブログ元の tumblelog の Portrait photo。数字は正方形の一辺のサイズ（ピクセル単位）。
{ReblogRootName}: 元記事作成者の tumblelog ユーザー名。
{ReblogRootTitle}: 元記事作成者の tumblelog のタイトル。
{ReblogRootURL}: 元記事作成者の tumblelog の URL。
{ReblogRootPortraitURL-16}
{ReblogRootPortraitURL-24}
{ReblogRootPortraitURL-30}
{ReblogRootPortraitURL-40}
{ReblogRootPortraitURL-48}
{ReblogRootPortraitURL-64}
{ReblogRootPortraitURL-96}
{ReblogRootPortraitURL-128}: 元記事作成者の tumblelog の Portrait photo。数字は正方形の一辺のサイズ（ピクセル単位）。

posted at 20100120 18:45 | Permalink

Text: テキストの投稿

Text Posts

{block:Title} {/block:Title}: 記事にタイトルがある場合、要素を表示する。
{Title}: 記事のタイトルを表示。
{Body}: 記事の内容を表示。

posted at 20100118 23:52 | Permalink

Text: 写真・絵の投稿

Photo Posts

{PhotoAlt}: 代替キャプションを（あるなら）表示する。HTML-safe。
{block:Caption} {/block:Caption}: キャプションがあるとき内容を表示する。
{Caption}: 記事のキャプションを表示する。
{LinkURL}: 画像にリンクが設定されている場合、リンクの URL を表示する。
{LinkOpenTag}: 画像にリンクが設定されている場合、そのアンカータグを表示する。（例： <a href=“http://…”>）
{LinkCloseTag}: 画像にリンクが設定されている場合、終了タグを表示する。（例： </a>）
{PhotoURL-500}
{PhotoURL-400}
{PhotoURL-250}
{PhotoURL-100}: 写真の URL を表示する。数字は最大サイズ（ピクセル単位）。
{PhotoURL-75sq}: 正方形の写真の URL を表示する。数字はサイズ（ピクセル単位）。

posted at 20100118 23:36 | Permalink

Text: 複数の写真・絵の投稿

Photoset Posts

Photo posts で画像を複数投稿するとスライドショーになる。

{block:Caption} {/block:Caption}: 記事にキャプションがあるとき内容を表示する。
{Caption}: 記事のキャプションを表示する。
{Photoset-500}
{Photoset-400}
{Photoset-250}: photoset を埋め込む。数字は横幅。

posted at 20100118 23:21 | Permalink