Tumblrで静的サイトっぽいものを作ってみました

• Homeページにはサイトのイメージ画像だけを表示
• イベントのページには#eventタグの付いた投稿のみ表示
• ブログのページには#blogタグの付いた投稿のみ表示

以上の機能をTumblrのテーマを改造して作ってみました。

Homeページにはサイトのイメージ画像だけを表示

1) イメージ画像（Hero image)を設定する項目をテーマの編集画面に追加
テーマの編集画面でカスタムテーマのHTML編集を選んで、metaタグの{block:hidden}内にイメージ画像（Hero image)を設定するためのコードを3行追加します。

{block:hidden}
...
<meta name="image:Hero" content="">
<meta name="text:Hero message" content="Home" />
<meta name="text:Hero url" content="/" />
...
{/block:hidden}

この3行を追加すると、テーマの編集画面の左メニューでイメージ画像を設定する３つの項目が使用できるようになります（図1,2）。
図1.

図2.

2) イメージ画像をトップページのみに表示する設定
イメージ画像を表示する箇所を下記のようにします。

{block:IfHeroImage}
  {block:PermalinkPage} <!-- {/block:PermalinkPage}
    {block:TagPage} <!-- {/block:TagPage}
       <!-- ここにイメージ画像用のタグを追加する -->
    {block:TagPage} --> {/block:TagPage}
  {block:PermalinkPage} --> {/block:PermalinkPage}
{/block:IfHeroImage}

{block:Posts}

こうするとPermlinkPageかTagPageの時にはイメージ画像用のタグがコメントアウトされるので、トップページのみにイメージ画像を表示することができます。

3) トップページに投稿を表示させない設定
トップページにはイメージ画像だけを表示して、投稿はPermlinkPageとTagPageに表示するようにします。

1. {block:Posts}で囲まれたコードをコピーして、{block:Posts}を２つ用意します。
2. {block:Posts}をそれぞれ{block:PermalinkPage}と{block:TagPage}で囲みます。

{block:TagPage}
  {block:Posts}
      <!-- 投稿用のコードA -->
  {/block:Posts}
{/block:TagPage}

{block:PermalinkPage}
   {block:Posts}
      <!-- 投稿用のコードB -->
   {/block:Posts}
{block:PermalinkPage}

<!-- （AとBは全く同じコード） -->

こうすると、PermalinkPageかTagPageの時だけ投稿が表示されるようになります。

次回は下記の機能の作り方を説明します。

• イベントのページには#eventタグの付いた投稿のみ表示
• ブログのページには#blogタグの付いた投稿のみ表示