January 2011
1 post
Tumblr で使えるタグ - 導入 2011-01-03
この記事について
Creating a custom HTML theme を読みながら自分なりにまとめたもの。
目次
いろいろ 追加された要素・機能
直したところ 基本 イントロ
マークアップの例と解説
基本的な変数
ページの移動に関連する要素 Pages
Permalinks
Jump Pagination
記事の投稿に関連する要素 Reblogs
Text Posts
Photo Posts
Photoset Posts
Quote Posts
Link Posts
Chat Posts
Audio Posts
Video Posts
Answer Posts
日付・ノート・タグに関する要素 Dates
Notes
Tags
Group Blogs で使える要素 Members
Posts
その他...
Tumblr で使えるタグ - 導入 2010-01-20
Introduction
Dashboard で Customize をクリックして Theme タブを選択し、Use custom HTML ボタンをクリックすると tumblelog のテーマを自由に編集できるようになる。
この CustomHTML に {…} や {block:…}…{/block:…} 形式の要素を仕込むことで、それらが別の要素に置換される。 例えば <head><title>{Title}</title></head> と書けば、{Title} がページ作成者の設定したページタイトルに置換される。
マークアップに用いる {…} 形式の要素を「変数」、{block:…}…{/block:…}...
基本的な要素
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...
ページナビゲーション
Navigation
{block:Pagination} {/block:Pagination}
「前」「次」どちらかのページがあると内容が表示される。
{block:PreviousPage} {/block:PreviousPage}
「前（新しい方）」のページがあると内容が表示される。
{block:NextPage} {/block:NextPage}
「次（古い方）」のページがあると内容が表示される。
{PreviousPage}
「前」のページのURL。
{NextPage}
「次」のページのURL。
{CurrentPage}
現在のページ番号。
{TotalPages}
総ページ数。
{block:SubmissionsEnabled} {/block:SubmissionsEnabled}
Submissions が有効になっていると表示される。...
各記事のナビゲーション
Permalink Navigation
{block:PermalinkPagination} {/block:PermalinkPagination}
「前」「次」どちらかの記事があると内容が表示される。
{block:PreviousPost} {/block:PreviousPost}
「前（新しい方）」のページがあると内容が表示される。
{block:NextPost} {/block:NextPost}
「次（古い方）」のページがあると内容が表示される。
{PreviousPost}
「前」の記事のURL。
{NextPost}
「次」の記事のURL。
記事を表示させる要素
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)...
リブログに関する要素
ReBlogs
{block:RebloggedFrom} {/block:RebloggedFrom}
他の記事からのリブログの場合表示される。
{ReblogParentName}
リブログ元の tumblelog のユーザー名。
{ReblogParentTitle}
リブログ元の tumblelog のタイトル。
{ReblogParentURL}
リブログ元の tumblelog の...
テキストの投稿
Text Posts
{block:Title} {/block:Title}
記事にタイトルがある場合、要素を表示する。
{Title}
記事のタイトルを表示。
{Body}
記事の内容を表示。
写真・絵の投稿
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...
複数の写真・絵の投稿
Photoset Posts
Photo posts で画像を複数投稿するとスライドショーになる。
{block:Caption} {/block:Caption}
記事にキャプションがあるとき内容を表示する。
{Caption}
記事のキャプションを表示する。
{Photoset-500}
{Photoset-400}
{Photoset-250}
photoset を埋め込む。数字は横幅。
引用文の投稿
Quote Posts
{Quote}
投稿の内容を表示する。
{block:Source} {/block:Source}
引用元が示されている場合、内容が表示される。
{Source}
引用元を表示する（HTML を含んでも良い）。
{Length}
引用の長さによって “short”、”medium”、もしくは “long” を表示する。
リンクの投稿
Link Posts
{URL}
リンクする URL を表示する。
{Name}
リンクするサイトのタイトルを表示する。設定されていない場合、 URL が表示される。
{Target}
Link posts の a 要素に含まれているべき要素。Account - Preference で “Open links in new window” が有効になっている場合、 “_blank” が返される。 W3C では target=”_blank” は非推奨で、 XHTML1.1 では廃止されていることに注意。
{block:Description} {/block:Description}
投稿に Description がある場合、内容が表示される。
{Description}
Description を表示する。
チャットの投稿
Chat Posts
A: これはペンですか？
B: いいえ、彼はトムです。
という文章であれば、A と B を「ラベル (label)」、これは～？ と いいえ、～ を「文 (line)」と言う。
ほかにも「ユーザー名 (username)」や「ユーザーID (a unique identifying integer representing the user of the current line)」というのがあるらしい。詳細不明。
{block:Title} {/block:Title}
記事にタイトルがある場合、内容を表示する。
{Title}
記事のタイトルを表示。
{block:Lines} {/block:Lines}
各文を表示する。
{block:Label}...
音楽の投稿
Audio Posts
{block:Caption} {/block:Caption}
キャプションがあるとき内容を表示する。
{Caption}
記事のキャプションを表示する。
{AudioPlayer}
デフォルトのオーディオプレイヤー。
{AudioPlayerWhite}
{AudioPlayerGrey}
{AudioPlayerBlack}
オーディオプレイヤーの色違い。
{PlayCount}
その記事の累計再生回数。
{FormattedPlayCount}
コンマ区切りしたその記事の累計再生回数。（例： 12,309）
{block:ExternalAudio} {/block:ExternalAudio}
記事に外部の MP3 を使っているとき内容を表示する。 ダウンロードリンクを設置するのに便利。
{ExternalAudioURL}
記事に外部の MP3...
ビデオの投稿
Video Posts
{block:Caption} {/block:Caption}
キャプションがあるとき内容を表示する。
{Caption}
記事のキャプションを表示する。
{Video-500}
{Video-400}
{Video-250}
埋込みコード。数字は横幅（ピクセル単位）。
回答の投稿
Answer Posts
{Question}
質問を表示する。HTML の使用は非常に制限されるが、使えなくもない。
{Answer}
回答を表示する。HTML を含んでもよい。
{Asker}
回答者のユーザー名と URL へのリンク。もしくは “Anonymous”（匿名）を表示する。
{AskerPortraitURL-16}
{AskerPortraitURL-24}
{AskerPortraitURL-30}
{AskerPortraitURL-40}
{AskerPortraitURL-48}
{AskerPortraitURL-64}
{AskerPortraitURL-96}
{AskerPortraitURL-128}
回答者の Portrait photo の URL を表示する。数字は1辺の長さ（ピクセル単位）。
日付に関する要素
Dates
{block:NewDayDate} {/block:NewDayDate}
その日の最初に投稿された記事内で要素を表示する。
{block:SameDayDate} {/block:SameDayDate}
その日の二番目以降に投稿された記事内で要素を表示する。
{DayOfMonth}
“1” から “31”。投稿された日付。
{DayOfMonthWithZero}
“01” から “31”。
{DayOfWeek}
“Monday” から “Sunday”。投稿された曜日。
{ShortDayOfWeek}
“Mon” から...
Notes に関する要素
Notes
“Notes” は、記事がリブログされたり、 “likes”（右上のハートマーク）に登録されたり、あるいは answer されたりした履歴が表示される機能。
{block:PostNotes} {/block:PostNotes}
その記事が Notes を持っていれば内容を表示する。個別記事でのみはたらく。
{PostNotes}
その記事の Notes の HTML コードを表示する。個別記事でのみはたらく。
{block:NoteCount} {/block:NoteCount}
その記事が Notes を持っていれば内容を表示する。
{NoteCount}
その記事の Notes の数を表示する。
{NoteCountWithLabel}
記事のノートの数をラベル付きで表示する（例： “24...
タグに関する要素
Tags
{block:HasTags} {/block:HasTags}
{block:Posts} {/block:Posts} の中に置く。記事がタグを持つとき内容を表示する。
{block:Tags} {/block:Tags}
各記事のタグを表示する。
{Tag}
各タグの名前を表示する。
{URLSafeTag}
各タグの名前を表示する。URL-safe。
{TagURL}
そのタグを共有する他の記事の一覧（以下 Tag page） の URLを表示する。
{TagURLChrono}
Tag page の URL を投稿日が古い順に表示する。
例：
<html>
<body>
{block:posts}
<div class="post">
...
Group Blog のメンバーに関する要素
Group Blogs
Group 機能は使ってないのでよく分からない。
{block:GroupMembers} {/block:GroupMembers}
“additional public group blogs” で表示される。
{block:GroupMember} {/block:GroupMember}
各メンバーについて表示する。
{GroupMemberName}
そのメンバーのユーザー名を表示する。
{GroupMemberTitle}
そのメンバーのブログ名を表示する。
{GroupMemberURL}
そのメンバーのブログの URL...
Group Blog の記事に関する要素
Group Blog Posts
{PostAuthorName}
記事投稿者のユーザー名を表示する。
{PostAuthorTitle}
記事投稿者のブログ名を表示する。
{PostAuthorURL}
記事投稿者のブログの URL を表示する。
{PostAuthorPortraitURL-16}
{PostAuthorPortraitURL-24}
{PostAuthorPortraitURL-30}
{PostAuthorPortraitURL-40}
{PostAuthorPortraitURL-48}
{PostAuthorPortraitURL-64}
{PostAuthorPortraitURL-96}
{PostAuthorPortraitURL-128}
記事投稿者の portrait photo の URL を表示する。数字は一辺の長さ（ピクセル単位）。
Day Pages に関する要素
Day Pages
tumblelogs は http://david.tumblr.com/day/2007/04/29/ といった URL を与えることで、その日の投稿のみを表示できる（以下 Day page と呼ぶ）。以下に示す要素を用いることで、前後の Day Page へのページ移動が可能となる。
{block:DayPage} {/block:DayPage}
Day page において内容を表示する。
{block:DayPagination} {/block:DayPagination}
前後どちらかの Day page が存在する場合、内容を表示する。
{block:PreviousDayPage} {/block:PreviousDayPage}
前の Day page が存在するとき、内容を表示する。
{block:NextDayPage}...
Tag Pages に関する要素
Tag Pages
{block:TagPage} {/block:TagPage}
Tag page において内容を表示する。
{Tag}
そのタグの名前を表示する。
{URLSafeTag}
そのタグの名前を表示する。URL-safe。
{TagURL}
Tag page の URLを表示する。
{TagURLChrono}
Tag page の URLを投稿順で表示する。
例：
<html>
<body>
{block:TagPage}
<h2>Posts tagged "{Tag}"</h2>
{/block:TagPage}
{block:Posts}
...
{/block:Posts}
...
検索に関する要素
Search
{SearchQuery}
現在の検索語を表示する。
{URLSafeSearchQuery}
現在の検索語を表示する。URL-safe。 リンクや JavaScript で用いる。
{block:SearchPage} {/block:SearchPage}
検索ページにおいて内容を表示する。
{SearchResultCount}
検索のヒット数を表示する。
{block:NoSearchResults} {/block:NoSearchResults}
検索して何もヒットしなかった場合、内容を表示する。
例：
<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}"/>
<input...
フォローに関する要素
Following
{block:Following} {/block:Following}
他のユーザーをフォローしている場合、内容を表示する。
{block:Followed} {/block:Followed}
フォローしている各ブログについて内容を表示する。
{FollowedName}
フォローしているブログのユーザー名を表示する。
{FollowedTitle}
フォローしているブログ名を表示する。
{FollowedURL}
フォローしているブログの URL...
Likes に関する要素
Likes
{block:Likes} {/block:Likes}
Preferences - Dashboard の Share posts I like を有効にしているとき、内容を表示する。
{Likes}
likes の HTML コードを表示する。
{Likes limit=”5”}
likes の HTML コードを最近登録した順に数件表示する。最大10件。
{Likes width=”200”}
likes に Audio player や Video player が含まれるとき、幅を拡縮した HTML コードを表示する。
画像の拡縮は CSS の max-width プロパティか他の似た方法で行う。
{Likes summarize=”100”}
likes に text post...
Custom Colors
Enabling Custom Colors
特別な meta-color 要素を用いることで、そのテーマを共有する他のユーザーが Customize - Theme から簡単に色を変更することができる。 書式は以下の通り。 <meta name="color:***" content="+++"/>
*** には要素名などの分かり易い名前（スペースを含んでも良い）を、+++ には色の名前やカラーコードを指定する。style 要素などで {color:***} と記述すると、その部分が +++ に置き換わる。
例：
<html>
<head>
<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#eee"/>
...
Custom Fonts
Enabling Custom Fonts
特別な meta-font 要素を用いることで、そのテーマを共有する他のユーザーが Customize - Theme から簡単にフォントを変更することができる。書式は以下の通り。 <meta name="color:***" content="+++"/>
*** には内容名などの分かり易い名前（スペースを含んでも良い）を、+++ にはフォント名を指定する。style 要素などで {font:***} と記述すると、その部分が +++ に置き換わる。
例：
<html>
<head>
<!-- DEFAULT FONTS -->
<meta name="font:Title" content="Helvetica Neue"/>
...
Booleans
Enabling Booleans
特別な meta-if 要素を用いることで、そのテーマを共有する他のユーザーが Customize - Theme から簡単にブロック要素の表示・非表示を切り替えることができる。書式は以下の通り。 <meta name="if:***" content="+++"/>
*** には内容名などの分かり易い名前（スペースを含んでも良い）を、+++ には 1 か 0 を指定する。1 は true、0 は false を表す。
使うときは {block:If***}…{/block:If***} もしくは {block:IfNot***}…{/block:IfNot***} と書く。
例：
<html>
<head>
<!-- DEFAULTS -->
...
Custom Text
Enabling Custom Text
特別な meta-text 要素を用いることで、そのテーマを共有する他のユーザーが Customize - Theme から簡単にテキストを変更することができる。書式は以下の通り。 <meta name="text:***" content="+++"/>
*** には内容名などの分かり易い名前（スペースを含んでも良い）を、+++ にはフォント名を指定する。ページに要素として {text:***} と記述すると、その部分が +++ に置き換わる。
例：
<html>
<head>
<!-- DEFAULT TEXT -->
<meta name="text:Flickr Username" content=""/>
...
Custom Images
Enabling Custom Images
特別な meta-image 要素を用いることで、そのテーマを共有する他のユーザーが Customize - Theme から簡単に画像を変更することができる。書式は以下の通り。 <meta name="image:***" content="+++"/>
*** には内容名などの分かり易い名前（スペースを含んでも良い）を、+++ にはフォント名を指定する。ページに要素として {image:***} と記述すると、その部分が +++ に置き換わる。画像が得られない場合、1px の透過画像に置き換わる。
例：
<html>
<head>
<!-- DEFAULT IMAGE -->
<meta name="image:Background"...
Custom CSS
Enabling Custom CSS
{CustomCSS} 要素は Customize - Advanced - Add Custom CSS で記述したスタイルに置き換わる。この要素を style 要素の最後に置くことで、そのテーマを共有する他のユーザーはマークアップを変更することなくテーマを書き換えることができる。
例：
<html>
<head>
<style type="text/css">
#content {
background-color: #fff;
color: #000;
}
{CustomCSS}
</style>
...
Twitter に関する要素
Twitter
Account - Preferences - Twitter で twitter のユーザー名とパスワードを入力すると、tumblr と twitter を連携させることができる。tumblelog でユーザーのつぶやきを表示させるときは /tweets.js を読み込ませればよい。このファイルは recent_tweets() というコールバック関数を呼び、twitter API の JSONデータを唯一の引数として送る。
{block:Twitter} {/block:Twitter}
設定で twitter との連携を有効にしていると内容を表示する。
{TwitterUsername}
twitter のユーザー名を表示する。
例：
{block:Twitter}
<div id="twitter"...
March 2009
5 posts
tumblr. で使えるタグ (1) 2009-03-10
できるだけカタカナを使わないように。パーマリンクとかなんじゃらけ。
マークアップに用いる {…} 形式の要素は、記事の Tags と紛らわしいので本記事では「ブロック」と呼ぶ。 また、「要素」は普通 {xxx}…{/xxx} のことを指すが、本記事では特に内容（「…」 の部分）のことを言う。
URL safe とか HTML safe というのは、それぞれで使えない文字（URL だと”/”とか）を他の文字に置き換えたもの。
まだ書いてない：
各 Example
Group posts
Group members
Chat posts
Audio posts
Video posts
Following
tumblr. で使えるタグ (2)
Theme Variables
{Title} tumblelog の名前を表示する。HTML-safe。 {Description} tumblelog の説明を表示する（HTML を含んでも良い）。 {RSS} tumblelog のRSS フィードの URL。 {Favicon} tumblelog の Favicon（お気に入り/ブックマークやタブに表示されるアイコン） の URL。 {CustomCSS} Custmize ページ の Theme で指定したカスタム CSS のコード。 {block:PermalinkPage} {/block:PermalinkPage} このブロックで囲まれた要素は個々の記事それぞれに書き込まれる。 {block:IndexPage} {/block:IndexPage} このブロックで囲まれた要素は tumblelog...
tumblr. で使えるタグ (3)
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) を表示する。...
tumblr. で使えるタグ (4)
Dates
{block:NewDayDate} {/block:NewDayDate} その日の最初に投稿された記事内で要素を表示する。 {block:SameDayDate} {/block:SameDayDate} その日の二番目以降に投稿された記事内で要素を表示する。 {DayOfMonth} “1” から “31”。投稿された日付。 {DayOfMonthWithZero} “01” から “31”。 {DayOfWeek} “Monday” から “Sunday”。投稿された曜日。 {ShortDayOfWeek} “Mon” から “Sun”。 {DayOfWeekNumber}...
tumblr. で使えるタグ (5)
Day Pages
tumblelogs は http://david.tumblr.com/day/2007/04/29/ といった URL を与えることで、その日の投稿のみを表示できる（以下 Day page と呼ぶ）。以下に示すブロックを用いることで、前後の日付（連続している必要は無い）の Day Page へとページ移動が可能となる。
{block:DayPage} {/block:DayPage} Day page において要素を表示する。 {block:DayPagination} {/block:DayPagination} 前後どちらかの Day page が存在する場合、要素を表示する。 {block:PreviousDayPage} {/block:PreviousDayPage} 前の Day page が存在するとき、要素を表示する。 ...