Webデザイナーへ向けて、Tumblrの魅力とテーマの制作方法を解説する本連載。前回は、テーマのコーディングから、9種類の投稿タイプをブログに表示する部分まで進めました。今回は、より細かな部分を仕上げていき、テーマを完成させます。
ページの追加とナビゲーションメニューの表示
Tumblrには、通常のブログ投稿とは別に、静的ページを作れる「ページ」機能があります。ページ機能を使うと、ブログの時系列とは関係なく固定して表示したいコンテンツを作成できます。
デモサイト「Cafe」では、「アクセス」「メニュー」の2つのページを作成します。Tumblrのカスタマイズページを開き、「ページの追加」をクリックします。
ページとして表示したい内容を編集画面に入力します。ページのURLとタイトルを設定し、「このページへのリンクを表示する」をONにして保存します。
ページを作成しただけではサイトに表示されないので、テーマを修正し、ヘッダーのナビゲーションメニューに「アクセス」「メニュー」ページを追加します。
ページをメニューに表示するには、テンプレートタグを使います。メニュー項目をマークアップしているli要素を {block:HasPages} で囲むと、ページが1つ以上存在するときだけ、中の要素が出力されます。さらにその中を {block:Pages} で囲うと、ページの数だけli要素が繰り返し表示されます。
<nav class="nav" role="navigation">
<ul>
<li>
<a href="/">Home</a>
</li>
{block:HasPages}
{block:Pages}
<li>
<a href="{URL}">{Label}</a>
</li>
{/block:Pages}
{/block:HasPages}
<li>
<a href="/archive">Archive</a>
</li>
</ul>
</nav>
これで、固定ページを作成し、ナビゲーションメニューに表示できました。
リブログ投稿のときにオリジナルの情報を表示
Tumblrの特徴の1つに、「リブログ」があります。リブログを使うと、他人の投稿を自分のブログに引用して表示できます。
ここまでに作ったCafeテーマでは、オリジナルの投稿か、リブログかの区別がつきません。そこで、リブログの場合は元サイトの名前や投稿者名を表示するように、テーマを修正します。
テーマの各投稿を表示するHTMLに、テンプレートタグ {block:RebloggedFrom} で囲んだdiv要素を追加します。 {block:RebloggedFrom}は、リブログのときだけ出力されるテンプレートタグです。その中に、リブログ元のユーザーと、最初に記事を投稿したユーザーの名前・アイコン・URLを表示するテンプレートタグを記述します。
{block:RebloggedFrom}
<div class="meta meta-rebloggedfrom">
<span class="meta-elements">
Reblogged from <a href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-16}" class="favicon"/> {ReblogParentName}</a>
</span>
<span class="meta-elements">
Originally posted by <a href="{ReblogRootURL}"><img src="{ReblogRootPortraitURL-16}" class="favicon"/> {ReblogRootName}</a>
</span>
</div>
{/block:RebloggedFrom}
これで、記事下部にリブログ元などの情報が表示されます。
