Tumblrでサイトを作ってみるpart2

2014.11.24

前回の記事の続きです。
今回はテンプレートタグ中心のまとめになります。

今回作成したサンプルサイトはこちら

テンプレートタグについて

テンプレートタグに関しては、下記サイトがとても参考になりました。

Creating a custom HTML theme | Tumblr
Tumblr公式のドキュメント。ほぼ英語です。
Tags of tumblr.
公式のドキュメントを日本語で解説しているサイト。

今回はサンプルサイト作成で使用したテンプレートタグを中心に抜粋したもののまとめになります。
詳しくは公式のドキュメントをご確認ください。
　

テンプレートタグの種類

テンプレートタグには大きく分けて2つの種類があります。

{name}	変数。単体のデータを表示する。ブログのタイトルや説明など、動的データを挿入する時に使用。
{block:name} ～ {/block:name}	ブロック。データのセットを特定の条件で表示する。

基本的な変数・ブロック

{Title}	ブログタイトルを表示する。
{Description}	説明文を表示する。HTMLを含んでも可。
{block:Description} ～ {/block:Description}	説明文が入力されている場合に表示する。
{MetaDescription}	説明文を表示する。HTMLを含んでいる場合は除去する。
{Favicon}	ブログのファビコンのURLを表示する。
{RSS}	RSSフィードのURLを表示する。
{block:IndexPage} ～トップページの内容～ {/block:IndexPage}	トップページ(+タグや検索の一覧ページ)の表示に使用される。
{block:PermalinkPage} ～詳細ページの内容～ {/block:PermalinkPage}	個別記事の詳細ページ(+固定ページ)の表示に使用される。
{CopyrightYears}	コピーライトの年数を表示する。

{Title} {Description} {MetaDescription} {Favicon} には、
カスタマイズ画面で設定した項目が出力されます。

トップページと下層ページは基本的に1つのソースで管理する形になるため、
{block:IndexPage}～{/block:IndexPage}と{block:PermalinkPage}～{/block:PermalinkPage}を使って
コードの出し分けを行います。

サンプルコード

■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}

■body内

<header id="header">
	<p class="logo">{Title}</p>
    {block:Description}
	<p class="lead">{Description}</p>
    {/block:Description}
</header>

<div id="contents">
{block:IndexPage}
	～トップページの内容～
{/block:IndexPage}

{block:PermalinkPage}
	～個別記事の詳細ページの内容～
{/block:PermalinkPage}
</div>

<footer id="footer">
	<small class="copyright">&copy; {CopyrightYears} scenery</small>
</footer>
</html>

投稿に関する表示

{block:Posts} ～ {/block:Posts}	投稿した記事の内容を表示する。
{PostType}	投稿記事のIDを表示する。
{PostID}	投稿の種類を表示する。
{Permalink}	各記事の詳細ページへのリンクを表示する。
{block:Postnum} ～ {/block:Postnum}	numで指定した位置に表示する。例えばnumに3を指定した場合、3番目に要素を挿入する。

サンプルコード

{block:Posts}
	{block:Post3}
	<article class="article ad">
	    <div>3番目に広告挿入</div>
	</article>
	{/block:Post3}

	<article class="article {PostType} postid{PostID}">
	    <a href="{Permalink}">詳細ページへ</a>
	</article>
{/block:Posts}

日付の表示

{block:Date} ～ {/block:Date}	日付のある場合に表示する。
{Year}	年を表示する。
{MonthNumber}	月を表示する。
{DayOfMonth}	日を表示する。

Notes/Reblog/like関連

{block:NoteCount} ～ {/block:NoteCount}	Notesを持っている場合に表示する。
{NoteCount}	Notesの数を表示する。(例:24)
{NoteCountWithLabel}	Notesの数を単位をつけて表示する。(例:24 notes)
{ReblogButton}	Reblogボタンを表示する。
{ReblogButton color=”grey”}	Reblogボタンの色を変更する。色の種類はgrey, white, black
{ReblogButton size=”20″}	Reblogボタンのサイズを変更する。最大値は100。
{LikeButton}	likeボタンを表示する。
{LikeButton color=”grey”}	likeボタンの色を変更する。色の種類はgrey, white, black
{LikeButton size=”20″}	likeボタンのサイズを変更する。最大値は100。

{block:HasTags} ～ {/block:HasTags}	タグを持っている場合に表示する。
{block:Tags} ～ {/block:Tags}	タグ毎に繰り返し処理を行う。
{Tag}	タグを表示する。
{TagURL}	そのタグを持つ記事一覧のURLを表示する。

{block:Posts}
<article>
	{block:Date}
	<span class="date">{Year}/{MonthNumber}/{DayOfMonth}</span>
	{/block:Date}

	{block:NoteCount}
	<span class="action">{NoteCountWithLabel}</span>
	{/block:NoteCount}
	<span class="reblog">{ReblogButton}</span>
	<span class="like">{LikeButton}</span>

	{block:HasTags}
	{block:Tags}
	<a href="{TagURL}" class="tag">{Tag}</a>
	{/block:Tags}
	{/block:HasTags}
</article>
{/block:Posts}

テキスト投稿

{block:Text} ～テキスト投稿の内容～ {/block:Text}	テキスト投稿を表示する。
{block:Title} ～ {/block:Title}	記事のタイトルがある場合に表示する。
{Title}	記事のタイトルを表示する。
{Body}	記事の本文を表示する。

テキスト投稿は以下のような入力画面になっています。

サンプルコード

<article>
{block:Posts}
	{block:Text}
	{block:Title}
	<h1><a href="{Permalink}">{Title}</a></h1>
	{/block:Title}
	<div class="description">{Body}</div>
	{/block:Text}
{/block:Posts}
</article>

画像投稿

{block:Photo} ～画像投稿の内容～ {/block:Photo}	画像投稿を表示する。
{LinkOpenTag}	画像にリンクが設定されている場合、URL付きの開始タグを表示する。リンクが設定されていない場合、画像の詳細へのリンク？タグを表示。
{LinkCloseTag}	リンクの終了タグを表示する。
{LinkURL}	画像にリンクが設定されている場合、リンクURLを表示する。設定されていない場合は何も表示しない。
{PhotoURL-500} {PhotoURL-400} {PhotoURL-250} {PhotoURL-100}	画像のURL表示する。数字は表示する画像の横幅。
{PhotoURL-75sq}	縦横75pxの正方形にした画像のURLを表示する。
{block:Caption} ～ {/block:Caption}	説明文が有る場合に表示する。
{Caption}	説明文を表示する(HTMLタグ付き)。
{PhotoAlt}	説明文を表示する(HTMLタグなし)。

画像投稿は以下のような入力画面になっています。

画像選択後、リンクの設定と説明文入力が表示されます。

サンプルコード

<article>
{block:Posts}
	{block:Photo}
	<div class="photo">{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}" />{LinkCloseTag}</div>
	{block:Caption}
	<div class="description">{Caption}</div>
	{/block:Caption}
	<div class="detail"><a href="{Permalink}">詳細ページへ</a></div>
	{/block:Photo}
{/block:Posts}
</article>

パノラマ投稿

{block:Panorama} ～パノラマ投稿の内容～ {/block:Panorama}	パノラマ投稿を表示する。
{LinkOpenTag}	パノラマ表示用のリンク開始タグを表示する。
{LinkCloseTag}	リンクの終了タグを表示する。
{PhotoURL-Panorama}	パノラマ画像のURL表示する。
{block:Caption} ～ {/block:Caption}	説明文が有る場合に表示する。
{Caption}	説明文を表示する(HTMLタグ付き)。
{PhotoAlt}	説明文を表示する(HTMLタグなし)。

パノラマ投稿は画像投稿と同じ入力画面で、画像サイズが横長の場合？になるみたいです。
画像をクリックすると、下記のように横にスライドできる表示になります。

サンプルコード

<article>
{block:Posts}
	{block:Panorama}
		<div class="photo">{LinkOpenTag}<img src="{PhotoURL-Panorama}" width="100%" alt="{PhotoAlt}" />{LinkCloseTag}</div>
		{block:Caption}
		<div class="description">{Caption}</div>
		{/block:Caption}
	{/block:Panorama}
{/block:Posts}
</article>

フォトセット投稿

{block:Photoset} ～フォトセット投稿の内容～ {/block:Photoset}	フォトセット投稿を表示する。フォトセット投稿は、画像投稿で1回の投稿に画像を2枚以上投稿した場合になる模様。
{Photoset-700} {Photoset-500} {Photoset-400} {Photoset-250} {Photoset}	画像の一覧表示する。表示はiframe。数字は表示する画像の横幅。数字がない場合は親要素に合わせて表示。(最大700px)
{block:Caption} ～ {/block:Caption}	説明文が有る場合に表示する。
{Caption}	説明文を表示する。
{PhotoCount}	画像の枚数を表示する。

フォトセット投稿は画像投稿と同じ入力画面で、画像を2枚以上登録した場合になります。
画像ごとのリンクはなくなり、代わりに画像ごとのキャプションを設定できるようになります。

サンプルコード

<article>
{block:Posts}
	{block:Photoset}
	<div class="photo">{Photoset}</div>
	{block:Caption}
	<div class="description">{Caption}</div>
	{/block:Caption}
	<div class="count">{PhotoCount}枚の画像を使用しています。</div>
	{/block:Photoset}
{/block:Posts}
</article>

引用投稿

{block:Quote} ～引用投稿の内容～ {/block:Quote}	引用投稿を表示する。
{Quote}	引用内容を表示する。
{Length}	引用の長さに応じて、short、medium、long を表示する。
{block:Source} ～ {/block:Source}	引用元がある場合に表示する。
{Source}	引用元を表示する。

引用投稿は以下のような入力画面になっています。

サンプルコード

<article>
{block:Posts}
	{block:Quote}
	<div class="description {Length}">{Quote}</div>
	{block:Source}
	<div class="source">{Source}</div>
	{/block:Source}
	{/block:Quote}
{/block:Posts}
</article>

リンク投稿

{block:Link} ～リンク投稿の内容～ {/block:Link}	リンク投稿を表示する。
{URL}	リンクURLを表示する。
{Name}	タイトルを表示する。
{block:Description} ～ {/block:Description}	説明文がある場合に表示する。
{Description}	説明文を表示する。
{Host}	リンクURLのホストを表示する。 URLに「https://cly7796.net/blog/」を入力した場合、cly7796.netを表示。

リンク投稿は以下のような入力画面になっています。

サンプルコード

<article>
{block:Posts}
	{block:Link}
	<h1><a href="{URL}">{Name}</a></h1>
	{block:Description}
	<div class="description">{Description}</div>
	{/block:Description}
	{/block:Link}
{/block:Posts}
</article>

チャット投稿

{block:Chat} ～チャット投稿の内容～ {/block:Chat}	チャット投稿を表示する。
{block:Title} ～ {/block:Title}	タイトルがある場合に表示する。
{Title}	タイトルを表示する。
{block:Lines} ～ {/block:Lines}	文章毎に繰り返し処理を行う。
{block:Label} ～ {/block:Label}	現在の文章のラベルがあれば表示。（これでくくらないと{Label}だけだと出てこないっぽい）
{Label}	現在の文章のラベルを表示する。
{Line}	文章を表示する。
{UserNumber}	ラベル毎でナンバリングして表示する。
{Alt}	各文章で奇数行(odd)か偶数行(even)を表示する。

チャット投稿は以下のような入力画面になっています。

サンプルコード

<article>
{block:Posts}
	{block:Chat}
	{block:Title}
	<h1><a href="{Permalink}">{Title}</a></h1>
	{/block:Title}
	<div class="description">
		{block:Lines}
		{block:Label}
		<em class="user-{UserNumber} {Alt}">{Label}</em>
		{/block:Label}
		<span>{Line}</span>
		{/block:Lines}
	</div>
	{/block:Chat}
{/block:Posts}
</article>

音声投稿

{block:Audio} ～音声投稿の内容～ {/block:Audio}	音声投稿を表示する。
{block:AudioEmbed} ～ {/block:AudioEmbed}	エンベットのオーディオプレーヤーが利用可能な場合に表示する。
{AudioEmbed} {AudioEmbed-250} {AudioEmbed-400} {AudioEmbed-500} {AudioEmbed-640}	エンベットのオーディオプレーヤーを表示する。数字は表示するプレーヤーの横幅。数字がない場合は500px。
{block:AudioPlayer} ～ {/block:AudioPlayer}	ネイティブのオーディオプレーヤーが利用可能な場合に表示する。
{AudioPlayer} {AudioPlayerWhite} {AudioPlayerGrey} {AudioPlayerBlack}	ネイティブのオーディオプレーヤーを表示する。 {AudioPlayer}がデフォルトのプレーヤー(白？)で、 {AudioPlayer～}が色違いのプレーヤー。
{PlayCount}	再生された回数を表示する。(例:12309)
{FormattedPlayCount}	再生された回数をカンマ区切りで表示する。(例:12,309)
{PlayCountWithLabel}	再生された回数をカンマ区切りと単位(plays)をつけて表示する。(例:12,309 plays)
{block:Caption} ～ {/block:Caption}	説明文がある場合に表示する。
{Caption}	説明文を表示する。

エンベットのオーディオプレーヤー {AudioEmbed} は以下の表示になります。

ネイティブのオーディオプレーヤー {AudioPlayer} は以下の表示になります。
左から {AudioPlayerWhite} {AudioPlayerGrey} {AudioPlayerBlack} です。

音声投稿は以下のような入力画面になっています。

検索画面。

アップロード画面。

外部URL指定画面。

検索の場合、SpotifyとSoundCloudから音声が検索されます。
※ただし、Spotifyは日本で対応していないため、音声の再生ができないようです。(2014/11/24現在)

音声を選択すると、説明文入力が表示されます。

サンプルコード

<article>
{block:Posts}
	{block:Audio}
	<div class="photo">{AudioPlayer}</div>
	<div class="count">{FormattedPlayCount} 再生</div>
	{block:Caption}
	<div class="description">{Caption}</div>
	{/block:Caption}
	{/block:Audio}
{/block:Posts}
</article>

動画投稿

{block:Video} ～動画投稿の内容～ {/block:Video}	動画投稿を表示する。
{Video-700} {Video-500} {Video-400} {Video-250}	動画を表示する。数字は表示する動画の横幅。
{PlayCount}	再生された回数を表示する。(例:12309) youtubeなどの外部URLの場合、再生数はとれないっぽい？
{FormattedPlayCount}	再生された回数をカンマ区切りで表示する。(例:12,309)
{PlayCountWithLabel}	再生された回数をカンマ区切りと単位(plays)をつけて表示する。(例:12,309 plays)
{block:VideoThumbnail} ～ {/block:VideoThumbnail}	利用可能な動画サムネイルがある場合に、画像URLを表示する。 (youtubeの場合はサムネイルを取得できる模様。)
{VideoThumbnail}	動画サムネイルのURLを表示する。
{block:Caption} ～ {/block:Caption}	説明文がある場合に表示する。
{Caption}	説明文を表示する。

動画投稿は以下のような入力画面になっています。

サンプルコード

<article>
{block:Posts}
	{block:Video}
	<div class="photo">{Video-250}</div>
	<div class="count">{FormattedPlayCount} 再生</div>
	{block:Caption}
	<div class="description">{Caption}</div>
	{/block:Caption}
	{block:VideoThumbnail}
	<img src="{VideoThumbnailURL}" width="100%" />
	{/block:VideoThumbnail}
	{/block:Video}
{/block:Posts}
</article>

回答投稿

{block:Answer} ～回答投稿の内容～ {/block:Answer}	回答投稿を表示する。
{Asker}	質問者のブログへのリンク付きのユーザー名を表示する。匿名にした場合は匿名と表示される。
{AskerPortraitURL-16} {AskerPortraitURL-24} {AskerPortraitURL-30} {AskerPortraitURL-40} {AskerPortraitURL-48} {AskerPortraitURL-64} {AskerPortraitURL-96} {AskerPortraitURL-128}	質問者のアイコン画像のURLを表示する。数字は表示するアイコンのサイズ。
{Question}	質問内容を表示する。
{Answer}	質問に対する回答を表示する。

回答投稿を使用するには、ブログ設定(上部の歯車アイコン)をクリックして、
「質問を受け付ける」にチェックを入れる必要があります。

チェックを入れると、サイトの/ask/に質問ページが作成されます。
サンプルの質問ページ「http://yuy5687-sample-scenery.tumblr.com/ask/」

質問が投稿されると、赤枠部分に数字が表示されます。
赤枠部分をクリックすると、投稿された質問を確認することができます。

質問の右下赤枠部分をクリックすると、その質問に対して回答を投稿することができます。

回答の入力が終わったら、投稿するをクリックして投稿を完了します。

サンプルコード

<article>
{block:Posts}
	{block:Answer}
	<div class="description"><img src="{AskerPortraitURL-30}" />{Asker}:{Question}</div>
	<div class="description">{Answer}</div>
	{/block:Answer}
{/block:Posts}
</article>

ページャーの表示

{block:Pagination} ～ {/block:Pagination}	ページャーがある場合に表示する。
{CurrentPage}	現在が何ページ目かを表示する。
{TotalPages}	全体のページ数を表示する。
{block:PreviousPage} ～ {/block:PreviousPage}	前にページがある場合に表示する。
{PreviousPage}	前に戻るリンクのURLを表示する。
{block:NextPage} ～ {/block:NextPage}	次にページがある場合に表示する。
{NextPage}	次へ進むリンクのURLを表示する。
{block:JumpPagination length="num"} ～ {/block:JumpPagination}	ページャーを数字で表示する。 lengthで現在地から前後に出す数字の数を指定。現在地が「6ページ目」でlengthが4の場合、4,5,6,7,8が表示される。
{block:CurrentPage} ～ {/block:CurrentPage}	現在のページブロックを表示する。
{block:JumpPage} ～ {/block:JumpPage}	現在でないブロックの表示
{PageNumber}	ページ番号の表示

サンプルコード

{block:Pagination}
<div class="pager">
	<div class="count"><span class="current">{CurrentPage}</span>
	/
	<span class="total">{TotalPages}</span></div>
	<ul>
	{block:PreviousPage}
		<li><a href="{PreviousPage}">前</a></li>
	{/block:PreviousPage}
	{block:JumpPagination length="4"}
	{block:CurrentPage}
		<li><span>{PageNumber}</span></li>
	{/block:CurrentPage}
	{block:JumpPage}
		<li><a href="{URL}">{PageNumber}</a></li>
	{/block:JumpPage}
	{/block:JumpPagination}
	{block:NextPage}
		<li><a href="{NextPage}">次</a></li>
	{/block:NextPage}
	</ul>
</div>
{/block:Pagination}

途中で力尽きて(飽きて)詳細ページはほとんど作っていませんが、
テンプレートタグや全体的な部分は理解できたので、そのうちきちんとサイトを作ってみたいと思います。
　

最後に今回作成したサンプルサイトのコードを置いておきます。

<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}
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cly7796.net/blog/sample/create-a-website-in-tumblr/normalize.css" />
<link rel="stylesheet" href="https://cly7796.net/blog/sample/create-a-website-in-tumblr/style.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cly7796.net/blog/sample/create-a-website-in-tumblr/stonewall.js"></script>
<script src="https://cly7796.net/blog/sample/create-a-website-in-tumblr/script.js"></script>
</head>
<body>
<!-- #page START -->
<div id="page">
	<!-- #header START -->
	<header id="header">
		<p class="logo">{Title}</p>
        {block:Description}
		<p class="lead">{Description}</p>
        {/block:Description}
		<nav id="gNav">
			<ul>
				<li><a href="/">HOME</a></li>
				<li><a href="/about/">ABOUT</a></li>
				<li><a href="/archive/">ARCHIVE</a></li>
			</ul>
		</nav>
	</header>
	<!-- #header END -->

	<!-- #contents START -->
	<div id="contents">
        {block:IndexPage}
		<!-- #main START -->
		<div id="main">
		    {block:Posts}
    			{block:Post3}
    			<article class="article ad">
                    <div>3番目に広告挿入</div>
    			</article>
    			{/block:Post3}
    			<article class="article {PostType} postid{PostID}">
    			{block:Text}
    				<div class="photo"><a href="{Permalink}"></a></div>
    				{block:Title}
    				<h1><a href="{Permalink}">{Title}</a></h1>
    				{/block:Title}
    				<div class="description">{Body}</div>
    			{/block:Text}
    			{block:Photo}
    				<div class="photo">{LinkOpenTag}<img src="{PhotoURL-400}" width="100%" alt="{PhotoAlt}" />{LinkCloseTag}</div>
    				{block:Caption}
    				<div class="description">{Caption}</div>
    				<div>{LinkURL}</div>
    				{/block:Caption}
    			{/block:Photo}
    			{block:Panorama}
    				<div class="photo">{LinkOpenTag}<img src="{PhotoURL-Panorama}" width="100%" alt="{PhotoAlt}" />{LinkCloseTag}</div>
    				{block:Caption}
    				<div class="description">{Caption}</div>
    				{/block:Caption}
    			{/block:Panorama}
    			{block:Photoset}
    				<div class="photo">{Photoset}</div>
    				{block:Caption}
    				<div class="description">{Caption}</div>
    				{/block:Caption}
    				<div class="count">{PhotoCount}枚の画像を使用しています。</div>
    			{/block:Photoset}
    			{block:Quote}
    				<div class="description {Length}">{Quote}</div>
    				{block:Source}
    				<div class="source">{Source}</div>
    				{/block:Source}
    			{/block:Quote}
    			{block:Link}
    				<h1><a href="{URL}">{Name}</a></h1>
    				{block:Description}
    				<div class="description">{Description}</div>
    				{/block:Description}
    			{/block:Link}
    			{block:Chat}
    			    {block:Title}
    			    <h1><a href="{Permalink}">{Title}</a></h1>
    			    {/block:Title}
    				<div class="description">
    				{block:Lines}
        				{block:Label}
        				<em class="user-{UserNumber} {Alt}">{Label}</em>
        				{/block:Label}
        				<span>{Line}</span><br />
    				{/block:Lines}
    				</div>
    			{/block:Chat}
    			{block:Audio}
    				<div class="photo">{AudioPlayer}</div>
    				<div class="count">{FormattedPlayCount} 再生</div>
    				{block:Caption}
    				<div class="description">{Caption}</div>
    				{/block:Caption}
    			{/block:Audio}
    			{block:Video}
    				<div class="photo">{Video-250}</div>
    				<div class="count">{FormattedPlayCount} 再生</div>
    				{block:Caption}
    				<div class="description">{Caption}</div>
    				{/block:Caption}
    				{block:VideoThumbnail}
    				<div>
    				サムネイル取得のテスト<br />
    				<img src="{VideoThumbnailURL}" width="100%" />
    				</div>
    				{/block:VideoThumbnail}
    			{/block:Video}
    			{block:Answer}
    				<div class="description"><img src="{AskerPortraitURL-30}" />{Asker}:{Question}</div>
    				<div class="description">{Answer}</div>
    			{/block:Answer}
        			<div class="metadata">
        			    {block:Date}
        			    <span class="date">{Year}/{MonthNumber}/{DayOfMonth}</span>
        			    {/block:Date}
        			    {block:HasTags}
        			    {block:Tags}
        			    <a href="{TagURL}" class="tag">{Tag}</a>
        			    {/block:Tags}
        			    {/block:HasTags}
        			    {block:NoteCount}
        			    <span class="action">{NoteCountWithLabel}</span>
        			    {/block:NoteCount}
        			    <span class="reblog">{ReblogButton}</span>
        			    <span class="like">{LikeButton}</span>
        			</div>
    			</article>
		    {/block:Posts}
		</div>
		<!-- #main END -->
		{block:Pagination}
		<div class="pager">
		    <div class="count"><span class="current">{CurrentPage}</span> / <span class="total">{TotalPages}</span></div>
		    <ul>
		    {block:PreviousPage}
		        <li><a href="{PreviousPage}">前</a></li>
		    {/block:PreviousPage}
            {block:JumpPagination length="4"}
            {block:CurrentPage}
                <li><span>{PageNumber}</span></li>
		    {/block:CurrentPage}
            {block:JumpPage}
                <li><a href="{URL}">{PageNumber}</a></li>
		    {/block:JumpPage}
            {/block:JumpPagination}
		    {block:NextPage}
		        <li><a href="{NextPage}">次</a></li>
		    {/block:NextPage}
		    </ul>
		</div>
		{/block:Pagination}

        {/block:IndexPage}
        {block:PermalinkPage}
		<!-- #under-layer START -->
		<div id="under-layer">
		    {block:Posts}
    			<article class="article {TagsAsClasses} {PostType}">
    			{block:Text}
    				<div class="photo"><a href="{Permalink}"></a></div>
    				{block:Title}
    				<h1><a href="{Permalink}">{Title}</a></h1>
    				{/block:Title}
    				<div class="description">{Body}</div>
    			{/block:Text}
    			{block:Photo}
    				<div class="photo">{LinkOpenTag}<img src="{PhotoURL-400}" width="100%" alt="{PhotoAlt}" />{LinkCloseTag}</div>
    				{block:Caption}
    				<div class="description">{Caption}</div>
    				<div>{LinkURL}</div>
    				{/block:Caption}
    			{/block:Photo}
    			{block:Panorama}
    				<div class="photo">{LinkOpenTag}<img src="{PhotoURL-Panorama}" width="100%" alt="{PhotoAlt}" />{LinkCloseTag}</div>
    				{block:Caption}
    				<div class="description">{Caption}</div>
    				{/block:Caption}
    			{/block:Panorama}
    			{block:Photoset}
    				<div class="photo">{Photoset}</div>
    				{block:Caption}
    				<div class="description">{Caption}</div>
    				{/block:Caption}
    				<div class="count">{PhotoCount}枚の画像を使用しています。</div>
    			{/block:Photoset}
    			{block:Quote}
    				<div class="description {Length}">{Quote}</div>
    				{block:Source}
    				<div class="source">{Source}</div>
    				{/block:Source}
    			{/block:Quote}
    			{block:Link}
    				<h1><a href="{URL}">{Name}</a></h1>
    				{block:Description}
    				<div class="description">{Description}</div>
    				{/block:Description}
    			{/block:Link}
    			{block:Chat}
    			    {block:Title}
    			    <h1><a href="{Permalink}">{Title}</a></h1>
    			    {/block:Title}
    				<div class="description">
    				{block:Lines}
        				{block:Label}
        				<em class="user-{UserNumber} {Alt}">{Label}</em>
        				{/block:Label}
        				<span>{Line}</span><br />
    				{/block:Lines}
    				</div>
    			{/block:Chat}
    			{block:Audio}
    				<div class="photo">{AudioPlayer}</div>
    				<div class="count">{FormattedPlayCount} 再生</div>
    				{block:Caption}
    				<div class="description">{Caption}</div>
    				{/block:Caption}
    			{/block:Audio}
    			{block:Video}
    				<div class="photo">{Video-250}</div>
    				<div class="count">{FormattedPlayCount} 再生</div>
    				{block:Caption}
    				<div class="description">{Caption}</div>
    				{/block:Caption}
    			{/block:Video}
    			{block:Answer}
    				<div class="description"><img src="{AskerPortraitURL-30}" />{Asker}:{Question}</div>
    				<div class="description">{Answer}</div>
    			{/block:Answer}
        			<div class="metadata">
        			    {block:Date}
        			    <span class="date">{Year}/{MonthNumber}/{DayOfMonth}</span>
        			    {/block:Date}
        			    {block:HasTags}
        			    {block:Tags}
        			    <a href="{TagURL}" class="tag">{Tag}</a>
        			    {/block:Tags}
        			    {/block:HasTags}
        			    {block:NoteCount}
        			    <span class="action">{NoteCountWithLabel}</span>
        			    {/block:NoteCount}
        			    <span class="reblog">{ReblogButton}</span>
        			    <span class="like">{LikeButton}</span>
        			</div>
    			</article>
		    {/block:Posts}
		</div>
		<!-- #under-layer END -->
        {/block:PermalinkPage}
	</div>
	<!-- #contents END -->

	<!-- #footer START -->
	<footer id="footer">
		<small class="copyright">&copy; {CopyrightYears} scenery</small>
	</footer>
	<!-- #footer END -->
</div>
<!-- #page END -->
</body>
</html>

参考サイト

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Tumblrでサイトを作ってみるpart2

テンプレートタグについて

テンプレートタグの種類

基本的な変数・ブロック

サンプルコード

投稿に関する表示

サンプルコード

日付の表示

Notes/Reblog/like関連

タグ

サンプルコード

テキスト投稿

サンプルコード

画像投稿

サンプルコード

パノラマ投稿

サンプルコード

フォトセット投稿

サンプルコード

引用投稿

サンプルコード

リンク投稿

サンプルコード

チャット投稿

サンプルコード

音声投稿

サンプルコード

動画投稿

サンプルコード

回答投稿

サンプルコード

ページャーの表示

サンプルコード

コメントを残すコメントをキャンセル

Category

Tag

Recent

Tumblrでサイトを作ってみるpart2

テンプレートタグについて

テンプレートタグの種類

基本的な変数・ブロック

サンプルコード

投稿に関する表示

サンプルコード

日付の表示

Notes/Reblog/like関連

タグ

サンプルコード

テキスト投稿

サンプルコード

画像投稿

サンプルコード

パノラマ投稿

サンプルコード

フォトセット投稿

サンプルコード

引用投稿

サンプルコード

リンク投稿

サンプルコード

チャット投稿

サンプルコード

音声投稿

サンプルコード

動画投稿

サンプルコード

回答投稿

サンプルコード

ページャーの表示

サンプルコード

関連記事

npmで個人的に使いそうなコマンドまとめ

new Date()の使い方

SVGの記述方法まとめ

:nth-childの使い方

font-familyの指定方法

コメントを残す コメントをキャンセル

Category

Tag

Recent

コメントを残すコメントをキャンセル