サイト制作に関するメモ書き

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

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

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

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

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

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

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

テンプレートタグの種類

テンプレートタグには大きく分けて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} には、
カスタマイズ画面で設定した項目が出力されます。

create-a-website-in-tumblr-part2-image01

トップページと下層ページは基本的に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} 記事の本文を表示する。

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

create-a-website-in-tumblr-part2-image02

サンプルコード

<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タグなし)。

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

create-a-website-in-tumblr-part2-image03

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

create-a-website-in-tumblr-part2-image04

サンプルコード

<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タグなし)。

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

create-a-website-in-tumblr-part2-image05

サンプルコード

<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枚以上登録した場合になります。
画像ごとのリンクはなくなり、代わりに画像ごとのキャプションを設定できるようになります。

create-a-website-in-tumblr-part2-image06

サンプルコード

<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} 引用元を表示する。

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

create-a-website-in-tumblr-part2-image07

サンプルコード

<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に「http://cly7796.net/wp/」を入力した場合、cly7796.netを表示。

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

create-a-website-in-tumblr-part2-image08

サンプルコード

<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)を表示する。

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

create-a-website-in-tumblr-part2-image09

サンプルコード

<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} は以下の表示になります。

create-a-website-in-tumblr-part2-image10

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

create-a-website-in-tumblr-part2-image11

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

検索画面。

create-a-website-in-tumblr-part2-image12

アップロード画面。

create-a-website-in-tumblr-part2-image13

外部URL指定画面。

create-a-website-in-tumblr-part2-image14

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

create-a-website-in-tumblr-part2-image15

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

create-a-website-in-tumblr-part2-image16

サンプルコード

<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} 説明文を表示する。

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

create-a-website-in-tumblr-part2-image17

サンプルコード

<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} 質問に対する回答を表示する。

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

create-a-website-in-tumblr-part2-image18

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

create-a-website-in-tumblr-part2-image19

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

create-a-website-in-tumblr-part2-image20

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

create-a-website-in-tumblr-part2-image21

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

create-a-website-in-tumblr-part2-image22

サンプルコード

<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="http://cly7796.net/wp/sample/create-a-website-in-tumblr/normalize.css" />
<link rel="stylesheet" href="http://cly7796.net/wp/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="http://cly7796.net/wp/sample/create-a-website-in-tumblr/stonewall.js"></script>
<script src="http://cly7796.net/wp/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>

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP