このページの本文へ

サンプルで学ぶTumblrテーマの作り方 (2/2)

2014年04月14日 11時07分更新

文●佐野章核/SANOGRAPHIX.NET

  • この記事をはてなブックマークに追加
本文印刷

ダミーテキストをテンプレートタグに置き換えてみよう

 テンプレートタグとは、別の要素に置き換えて出力される特別なタグのことです(第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ボタンの設置など、より細かな部分を仕上げていき、テーマを完成させます。

前へ 1 2 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く