Tumblrには数多くのテンプレートが用意されていますが、ちょっとオリジナル要素を入れたいということってありますよね?そんなときに大きな壁になっているのが独自タグ。
テンプレートならだいたいのことは実装されてますが、オリジナルサイトを作りたい場合には結構やっかいです。このページではTumblrでよく使うタグの表示方法を紹介します。
Tumblrでタグを表示する方法
タグの入力方法
TumblrにはWorldpressのようにカテゴリーを作って分類することはできませんが、タグを使うことができます。タグの設定方法は、投稿画面から入力するだけ。
タグの出力方法
タグを出力するにはTumblrの独自タグを使用する必要があります。
デフォルトのテンプレートでは以下のように記述されています。
{block:HasTags}
{block:Tags}
<li>
<a href="{TagURL}" class="tag">{Tag}</a>
</li>
{/block:Tags}
{/block:HasTags}
タグの出力方法は基本的にこの通りでOK。使用方法としてはそれぞれの投稿の一番下に配置するのが一般的。以下のように投稿部分とフッター部分に分けるといい感じになります。
{block:Posts}
<article>
<div class="article_body">
<!-- ここに投稿表示 -->
</div>
<!-- /article_body -->
<!-- ここにフッター表示 -->
<div class="article_footer">
<ul class="list-inline">
{block:HasTags}
{block:Tags}
<li><a href="{TagURL}">{Tag}</a></li>
{/block:Tags}
{/block:HasTags}
</ul>
</div>
<!-- /article_footer -->
</article>
{/block:Posts}