Tumblrで投稿を表示するためのコーディング方法

2014-07-21

Tumblrは誰でも簡単にブログを作って公開できるサービス。比較的入らすとの投稿が多く、クオリティの高いものもたくさんアップされてるので、デザインの参考になったりもします。

Tumblrの無料テンプレートもたくさん公開されているので、デザインは選び放題なんですが、ちょっと変更したいという場合には独自タグを使ってカスタマイズする必要があるので敷居が高め。

このページでは投稿を表示するための簡単なカスタマイズ方法を紹介します。

Tumblrで投稿を表示する方法

Tumblr Get Started

Tumblrでは独自タグを使ってブログのタイトルや、投稿情報を取得し表示しています。独自タグの一覧や使い方については公式ドキュメントに載ってるのでこちらをチェックして下さい。

公式ドキュメントの最初にあるGetStartedの部分をそのままコピペすれば、基本的な情報表示が可能。

<html>
  <head>
    <title>{Title}</title>
  </head>
  <body>
    
    <h1>{Title}</h1>
    
    <div id="posts">
      {block:Posts}

        <!-- ここに投稿ブロック入れる -->

      {/block:Posts}
    </div>

    <div id="posts_footer">
      {block:PreviousPage}
        <a href="{PreviousPage}">&#171; Previous</a>
      {/block:PreviousPage}
      {block:NextPage}
        <a href="{NextPage}">Next &#187;</a>
      {/block:NextPage}
    </div>

  </body>
</html>

Tumblr独自タグの使い方

基本的な独自タグの使い方は以下の通り。

<!-- タイトルを表示 -->
{Title}

<!-- ブログの説明 -->
{Description}

<!-- ブログURL -->
{BlogURL}

投稿を表示するためには独自タグだけでなく、繰り返しの設定も必要です。Tumblrの場合WordpressやSmartyのようにforeachやwhile文で処理するのではなく、繰り返し用のタグを使用します。

<div id="posts">
  <!-- 投稿を表示 -->
  {block:Posts}

    {block:Text}
    
      <!-- テキストの投稿を表示 -->

    {/block:Text}

    {block:Quote}
    
      <!-- 引用の投稿を表示 -->

    {/block:Quote}

    {block:Link}
    
      <!-- リンクの投稿を表示 -->

    {/block:Link}

    {block:Video}
    
      <!-- 動画の投稿を表示 -->

    {/block:Video}

    {block:Audio}
    
      <!-- オーディオ投稿を表示 -->

    {/block:Audio}

    {block:Photo}
    
      <!-- 写真投稿を表示 -->

    {/block:Photo}

    {block:Photoset}
    
      <!-- 写真セットの投稿を表示 -->

    {/block:Photoset}

    {block:Panorama}
    
      <!-- パノラマ投稿を表示 -->

    {/block:Panorama}

    {block:Chat}
    
      <!-- チャット投稿を表示 -->

    {/block:Chat}

    {block:Answer}
    
      <!-- 回答投稿を表示 -->

    {/block:Answer}

  {/block:Posts}
</div>

各投稿用のタグにはそれぞれ使用できる変数が用意されていて、どんなものが使えるかはリファレンスサイトを見ればわかります。

photoブロックの場合はこんな感じ。

{block:Photo}

  <!-- 写真投稿を表示 -->
  <div class="photo">
      <!-- リンクタグ<a></a>でimgを挟む -->
      {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}

      <!-- captionを表示 -->
      {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  </div>

{/block:Photo}

便利なテンプレートBoilerplate

TumblrのBoilerplateについてはTumblrカスタマイズ入門でも紹介してますが、Tumblrをカスタマイズするためのベースとして使える便利なテンプレート。

ダウンロードはこちら

ダウンロードすると既に投稿を表示するための基本的なコードが記述されているので、オリジナルサイトを作るならBoilerplateを利用するのが便利。