ダミーテキストをテンプレートタグに置き換えてみよう
テンプレートタグとは、別の要素に置き換えて出力される特別なタグのことです（第2回参照）。WordPressにも似たようなタグがありますので、WordPressのテーマを作ったことがあればイメージしやすいでしょう。
Tumblrのテンプレートタグには、{...}という書式の「変数」と、{block:...}〜{/block:...}という書式の「ブロック」の2種類があります。変数は、ブログのタイトルや日付など、Tumblrで管理しているコンテンツを単純に表示するときに使います。一方、ブロックは、ブログの個別の記事のように、データのかたまりを特定の条件で抽出して表示するときに使います。
実際に、モックアップのダミーテキストをテンプレートタグに置き換えてみましょう。まず、ブログタイトル部分を置き換えます。以下はモックアップのHTMLです。
<h1 class="blog-title">
<a href="/">Cafe Ascii Blog</a>
</h1>
ブログタイトルは、{Title}という変数を使って表示します。HTMLを以下のように書き換えてみましょう。
<h1 class="blog-title">
<a href="/">{Title}</a>
</h1>
Tumblrの「HTMLを編集」を保存してプレビューを更新すると、Tumblrのダッシュボードで設定したタイトルに変わります。
この要領で、ヘッダー部分をどんどん置き換えてみましょう。
<header id="header">
<a href="/">
<img src="{PortraitURL-128}" alt="{Title}" class="portrait">
</a>
<h1 class="blog-title">
<a href="/">{Title}</a>
</h1>
{block:Description}
<h2 class="blog-description">{Description}</h2>
{/block:Description}
</header>
{PortraitURL-128}はプロフィールアイコンを表示する変数、{Description}はブログの説明を表示する変数です。{block:Description}は、「ブログの説明が存在するときだけレンダリングする」という意味のブロックタグです。
これで、ヘッダーにアイコン画像とブログタイトル、説明文が表示されるようになりました。
テンプレートタグの種類や使い方は、Tumblrの公式ドキュメント「How to create a custom HTML theme」で確認できます。このドキュメントには、Tumblrテーマ制作に必要な情報が網羅されているので、ぜひ目を通しておきましょう。テンプレートタグはたくさんありますが、全部覚える必要はありません。適宜参照しながらコーディングを進めましょう。
各投稿のマークアップ
続いて、Tumblrテーマのキモとなる各投稿部分をマークアップしましょう。
Tumblrには、「テキスト」や「画像」、「引用」など、全部で7種類の投稿タイプがあります（ダッシュボード上部に表示されるアイコンがそれです）。テーマでは、これらに「フォトセット」「回答」を合わせた9種類の投稿タイプに対応したテンプレートタグを記述する必要があります（厳密には最近追加された「パノラマ」投稿もありますが、今回は省略します）。
具体的には、投稿部分を以下のようにマークアップします。
{block:Posts}
<article class="post {TagsAsClasses} {PostType}">
<!-- テキスト投稿 -->
{block:Text}...{/block:Text}
<!-- 画像投稿 -->
{block:Photo}...{/block:Photo}
<!-- フォトセット投稿 -->
{block:Photoset}...{/block:Photoset}
<!-- リンク投稿 -->
{block:Link}...{/block:Link}
<!-- 引用投稿 -->
{block:Quote}...{/block:Quote}
<!-- チャット投稿 -->
{block:Chat}...{block:Chat}
<!-- 動画投稿 -->
{block:Video}...{block:Video}
<!-- 音声投稿 -->
{block:Audio}...{block:Audio}
<!-- 回答投稿 -->
{block:Answer}...{block:Answer}
</article>
{/block:Posts}
まず、記事全体を{block:Posts}{block:Posts}で囲みます。次に、{block:Text}{/block:Text}のように投稿タイプで場合分けして、その中に各投稿タイプの内容を記述します。例えば、テキスト投稿は次のようにマークアップしています。
{block:Text}
<header class="entry-header">
{block:Title}
<h1 class="entry-title"><a href="{Permalink}">{Title}</a></h1>
{/block:Title}
</header>
<div class="entry-content">
{Body}
</div>
{/block:Text}
{block:Title} {/block:Title}は「記事のタイトルがある場合に表示する」という意味のブロックタグ、{Permalink}は各投稿へのパーマネントリンクを設定する変数、{Body}は本文を表示する変数です。これで、テキスト投稿に記事のタイトルと本文が表示されます。
そのほかの各投稿タイプも同様に記述していきます。具体的なマークアップは、サンプルテーマのコードを参考にしてください。
サンプルテーマ「Cafe」のコードはGitHubに公開しています。
https://github.com/sanographix/ascii-tumblr-sample
投稿のマークアップがひと通り終わったら、ブログに適用して、実際にそれぞれの投稿タイプで記事を投稿してみましょう。うまく表示されていたら成功です。
これで、投稿した記事がブログに表示されるようになりました。
◆
次回は、ナビゲーションやLike,Reblogボタンの設置など、より細かな部分を仕上げていき、テーマを完成させます。
