記事のメタ情報を表示する
続いて、各記事のフッターに、日付、リアクション、タグといったメタ情報を表示しましょう。
日付は、「年」「月」「日」などを出力するテンプレートタグを組み合わせて使います。日時を表示するテンプレートタグは表示形式によって複数ありますので、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回では、一歩進んだテンプレートタグの使い方や、テーマの完成度を高めるためのテクニックを紹介します。