このページの本文へ

Tumblrテーマをカスタマイズしてカフェサイトを制作 (2/2)

2014年04月28日 11時00分更新

文●佐野章核/SANOGRAPHIX.NET

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

記事のメタ情報を表示する

 続いて、各記事のフッターに、日付、リアクション、タグといったメタ情報を表示しましょう。

 日付は、「年」「月」「日」などを出力するテンプレートタグを組み合わせて使います。日時を表示するテンプレートタグは表示形式によって複数ありますので、Tumblrテーマ制作のドキュメントを参照してください。デモテーマでは「2014-03-29」のように、すべて数字で出力するようにしました。

 「リアクション」は、「スキ!」と「リブログ」を合計した数で、記事へのユーザーの反応を数値で表したものです。{block:NoteCount} でリアクションがあるときだけ出力するようにして、その中に{NoteCountWithLabel}を記述するとリアクション数を表示できます。なお、{NoteCountWithLabel}はTumblrの言語設定によって文言が変わります(日本語なら「○リアクション」、英語なら「○ Notes」です)。

 タグは、ナビゲーションメニューと同じ要領で、span要素とa要素を{block:HasTags}で囲み、記事にタグが1つ以上あるときだけ中の要素を出力するようにします。さらにその中を{block:Tags}で囲み、タグの数だけa要素を繰り返し表示します。

              <div class="entry-meta-wrapper">
                <span class="meta-elements date">
                  <a href="{Permalink}">{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}</a>
                </span>
                {block:NoteCount}
                  <span class="meta-elements notecount">
                    <a href="{Permalink}">{NoteCountWithLabel}</a>
                  </span>
                {/block:NoteCount}
                {block:HasTags}
                  <span class="meta-elements hastags">
                    {block:Tags}
                      <a href="{TagURL}">#{Tag}</a>
                    {/block:Tags}
                  </span>
                {/block:HasTags}
              </div>

リアクションを表示

 記事に「リアクション」したユーザーの一覧を表示するには、{PostNotes}と記述します。これで、「○○がリブログしました」のようなリストをol/li形式で出力します。なお、{PostNotes}はパーマリンクページを表示しているときしか出力されません。

    {block:PostNotes}
      <h3 class="notecount-header">{NoteCountWithLabel}</h3>
      <div class="notecontainer">{PostNotes}</div>
    {/block:PostNotes}

スキ!とリブログボタンの設置

 スキ!とリブログボタンを記事に設置すると、読者からリアクションを得られやすくなります。実装はとても簡単で、{ReblogButton}と{LikeButton}を記述するだけです。デフォルトでは灰色のアイコンだけが出力されるので、ボタンらしい見た目にするにはCSSを書く必要があります。テーマ制作のドキュメントにCSSの記述例が載っていますので、参考にしてください。

    <ul class="like_and_reblog_buttons">
      <li>{ReblogButton}</li>
      <li>{LikeButton}</li>
    </ul>

ページャーの表示

 「次のページ」「前のページ」に遷移するための「ページャー」は、個別の投稿ページ(パーマリンクページ)と、トップページ(インデックスページ)で記述方法が違います。{block:PermalinkPagination}で囲うとパーマリンク、{block:Pagination}で囲うとインデックスページのページャーを出力できます。

 インデックスページには、ページ数も出力できます。{block:JumpPagination length="5"}のように記述すると、5ページ目までのページ番号が出力されます。{block:CurrentPage}で現在のページ番号、{block:JumpPage}でそれ以外のページ番号が出力されますので、それぞれをCSSで異なる見た目にしておくと分かりやすいでしょう。テーマ制作のドキュメントに、ナビゲーションの記述例が載っています。

    <!-- パーマリンクのページャ -->
    {block:PermalinkPagination}
      <div class="pagenation pagenation-permalink">
        {block:NextPost}
          <a href="{NextPost}" class="next" rel="next">Newer Post</a>
        {/block:NextPost}
        {block:PreviousPost}
          <a href="{PreviousPost}">Older Post</a>
        {/block:PreviousPost}
      </div>
    {/block:PermalinkPagination}

    <!-- インデックスページのページャ -->
    {block:Pagination}
      <div class="pagenation pagenation-index">
        {block:PreviousPage}
          <a href="{PreviousPage}">Prev</a>
        {/block:PreviousPage}
        {block:JumpPagination length="5"}
          {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
          {block:JumpPage}<a class="jump-page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
        {/block:JumpPagination}
        {block:NextPage}
          <a href="{NextPage}" class="next" rel="next">Next</a>
        {/block:NextPage}
      </div>
    {/block:Pagination}

 以上で、テーマのコーディングが完成しました。いかがでしたか? テンプレートタグの扱いに慣れてしまえば、あとは普段のHTMLコーディングの要領で、Tumblrテーマを作れるはずです。

 第5回では、一歩進んだテンプレートタグの使い方や、テーマの完成度を高めるためのテクニックを紹介します。

前へ 1 2 次へ

この連載の記事

一覧へ

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

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