このページの本文へ

Tumblrテーマ作家が教える上級カスタマイズテクニック

2014年05月19日 11時00分更新

佐野章核/SANOGRAPHIX.NET

  • この記事をはてなブックマークに追加
本文印刷

 Webデザイナーへ向けて、Tumblrの魅力とテーマの制作方法を解説する本連載。第3回第4回では、カフェのサイトを想定したTumblrテーマを完成させました。今回は応用編として、テーマの完成度をさらに高めるためのテクニックを紹介します。

トップページとパーマリンクで異なる構造にする

 前回制作した「Cafe」テーマは、トップページとパーマリンクページ(個別の記事ページ)がほとんど同じレイアウトでした。実際には、Webサイトによって、トップページとパーマリンクページをまったく別のレイアウトにしたい場合もあるでしょう。

 このような場合は、{block:IndexPage}{block:PermalinkPage}という2種類のブロックを使います。トップページ用のコンテンツは{block:IndexPage}...{/block:IndexPage}、パーマリンクページ用のコンテンツは{block:PermalinkPage}...{/block:PermalinkPage}で囲んで記述します。

      {block:IndexPage}
        {block:Posts}
          <!-- トップページ用のコンテンツ -->
        {/block:Posts}
      {/block:IndexPage}
      {block:PermalinkPage}
        {block:Posts}
          <!-- パーマリンク用のコンテンツ -->
        {/block:Posts}
      {/block:PermalinkPage}

 {block:IndexPage}と{block:PermalinkPage}は、ページ全体ではなく、HTMLの特定の部分を出し分けたいときにも使えます。次の例では、トップページとパーマリンクページのOGP(og:url)をそれぞれ別に指定しています。

      {block:PermalinkPage}
        <meta property="og:url" content="{Permalink}" />
      {/block:PermalinkPage}
      {block:IndexPage}
        <meta property="og:url" content="{BlogURL}" />
      {/block:IndexPage}

 {Permalink}タグはパーマリンクページのURLを取得するテンプレートタグですが、Tumblrの仕様上、トップページのURLは取得できません。そこで、トップページでは{BlogURL}を使ってブログのURLを取得し、og:urlに指定しています。

色や画像、フォントをユーザーがカスタマイズできるようにする

 ユーザーがフォントサイズや背景などを変更できるTumblrテーマも作れます。Cafeテーマをカスタマイズできるように改造してみましょう。

 背景画像と背景色、フォントをダッシュボードで変更するには、HTMLのheadに専用のmeta要素を記述します。

      <meta name="color:Background Color" content="#f9f9f2" />
      <meta name="image:Background Image" content="" />
      <meta name="font:Font" content="'Times New Roman',serif" />

 meta要素のname属性には、Tumblrが定義しているカスタム変数名と、任意の設定項目名をコロン区切りで指定します。カスタム変数名には、color(色)やimage(画像)、font(フォント)などがあり、上の例では、color:Background Colorで背景色、image:Background Imageで背景画像、font:Fontでフォントを指定しています。content属性には初期値を指定します。

 bodyには以下のようなstyle要素を記述します。meta要素のname属性に指定した値を{}でくくり、カスタマイズ画面で置き換えたいCSSプロパティの値に記述します。なお、テンプレートタグを含むCSSは外部ファイルではなくHTML内に書く必要があります。

    <style>
      html,body {
        background-color: {Color:Background Color};
        background-image: url('{image:Background Image}');
        font-family: {font:Font};
      }
      {CustomCSS}
    </style>

 最後の{CustomCSS}はカスタムCSSをテーマに反映するために必要なテンプレートタグですので、必ず記述しておきましょう。

 これで、背景やフォントをユーザーがカスタマイズ画面でカスタマイズできるようになりました。ダッシュボードでは、指定したカスタム変数名によって適したUIが表示されます。「color」を指定した背景色は、カラーピッカーで色を選択できます。

 「font」を指定したフォントは、Tumblrに用意されているフォントの一覧から選べます。例えば「Typewriter」を選択すると、以下のようにテーマのフォントが変わります。

特定のテキストをユーザーが入力できるようにする

 「カスタムテキスト」を使うと、Tumblrのデザインカスタマイズ画面に入力フォームが追加され、テーマのHTMLの一部を入力したテキストに置き換えられます。例として、rel="author"にGoogle+プロフィールのURLを指定できるようにしましょう。

 HTMLのheadに専用のmeta要素を記述します。カスタムテキストは、「text」というカスタム変数を使います。

    <meta name="text:Google Author" content="" />

 カスタムテキストを表示したい場所に、{text:設定項目名}の書式でテンプレートタグを記述します。

    <link rel="author" href="{text:Google Author}" />

 テーマを適用してTumblrのカスタマイズ画面を見ると、入力用のフォームが追加されていることがわかります。

 このフォームにGoogle+プロフィールのURLを入力して保存すると、HTMLのrel="author"が書き換えられます。

 カスタムテキストは、作ったテーマを配布するときに便利です。たとえば、GoogleアナリティクスのトラッキングIDや、DISQUSのShortnameといった、ユーザーによって値が異なる部分をカスタムテキストにしておけば、テーマそのものを編集しなくても済むのです。

要素の表示・非表示を選べるようにする

 条件分岐タグを使うと、ページ内の要素の表示・非表示をカスタマイズ画面でユーザーが選べるようにもできます。ここでは、ソーシャルボタンの有無をユーザーが設定できるようにしてみましょう。

 HTMLのheadに「if:...」で始まる専用のmeta要素を記述します。コロンの右側はダッシュボードに表示する設定項目名です。content属性には0(デフォルトで無効)か1(デフォルトで有効)を記述します。

    <meta name="if:Enable Like Button" content="1" />
    <meta name="if:Enable Tweet Button" content="1" />

 表示・非表示を切り替えたい要素の外側を{block:If...}{/block:If...}タグで囲みます。ifに続く設定項目名はコロンやスペースを省いて記述してください。

    {block:IfEnableTweetButton}
      <li class="social-button">
        (省略:ツイートボタンのコード)
      </li>
    {/block:IfEnableTweetButton}
    {block:IfEnableLikeButton}
      <li class="social-button">
        (省略:Likeボタンのコード)
      </li>
    {/block:IfEnableLikeButton}

 これで、ソーシャルボタンの表示・非表示をダッシュボードのデザインカスタマイズから選べるようになります。

 条件分岐タグを使いこなすと、ユーザーがカスタマイズしやすいテーマを作れます。ぜひマスターしましょう。

条件分岐タグの応用例

 テンプレートタグ{IfNot:...}を使うと、設定が無効のときに、指定した要素を出力できます。下記のサンプルコードでは、タイトルロゴ画像が設定されていないときに、ブログタイトルを表示します。

    {block:IfTitleLogoImage}
      <img src="{image:Title Logo}" alt="{Title}">
    {/block:IfTitleLogoImage}
    {block:IfNotTitleLogoImage}
      {Title}
    {/block:IfNotTitleLogoImage}

おわりに

 今回で「Web制作のためのTumblrテーマカスタマイズ入門」の連載は終わりです。いかがでしたか?

 Tumblrは、Webデザイナーの工夫次第でさまざまなサイトを作れる懐の広さを持っています。ぜひTumblrテーマの制作に挑戦して、魅力的なWebサイトを作ってください。

著者:佐野章核(さの・しょうかく)

著者写真

グラフィックデザイナー。1988年生まれ、埼玉県出身。2012年頃より趣味で「Illustfolio」「ZEN 2.0」「Tokusetsu」などのTumblrテーマを制作。その他の活動として、同人誌の装丁、デザイン評論同人誌の発行など。(twitter:@sanographix)

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く