Tumblr タグを表示する方法

Tweet

Pocket

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}