このページの本文へ

DESIGN Web制作のためのTumblrテーマカスタマイズ入門 ― 第2回

テーマ作成の前に知りたいTumblrカスタマイズの基本

2014年03月24日 11時00分更新

佐野章核/SANOGRAPHIX.NET

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

 Webデザイナーへ向けて、Tumblrの魅力とテーマの制作方法を解説する本連載。前回は、Tumblrの簡単な紹介と、利用するメリットを説明しました。今回は既存のテーマを簡単にカスタマイズする方法について解説します。

テーマを変更してみよう

 Tumblrは、好みのテーマに切り替えることで、サイトのデザインを大きく変えられます。「テーマを作る作業」が、Tumblrを使ったWebサイト制作であると言ってよいでしょう。

 テーマには、Tumblrが公式に配布しているものと、企業や個人がWeb上で配布している非公式のものがあり、有料・無料を問わずたくさんのテーマが公開されています。公式のテーマの場合は、Tumblrのカスタマイズ画面「テーマを見る」から「使用する」をクリックすると、自分のブログにすぐに適用できます。

 また、「さらにテーマを検索」をクリックすると、Tumblrのテーマ一覧ページが開き、より多くの公式テーマの中から好みのものを選べます。

 細かいデザインは、テーマを適用したあと、Tumblrのカスタマイズ画面の「デザイン設定」の項目から変更できます。設定できる項目はテーマによって異なりますが、大抵のテーマではヘッダー画像や背景画像、リンク色などが変更できます。

テーマの構造を理解しよう

 WordPressのようなCMSでテーマを作ろうとすると、複数のPHPファイルを用意する必要があります。一方、Tumblrのテーマは1つのHTMLだけの非常にシンプルな構造ですので、制作にかかる工数が少なくて済みます。

 カスタマイズ画面の「HTMLを編集」をクリックし、適当なテーマのHTMLを見てみましょう。

 {block:Posts}のような見慣れないタグは、Tumblr独自のテンプレートタグです。テンプレートタグとは、Webページとして出力されるとき、別の要素に置き換えられる特別なタグのことです。

 例えば、テーマのHTMLに{Title}と書くと、ブログのタイトルが出力されます。また、トップページだけに特定の要素を表示するといった条件分岐も、テンプレートタグを使って実装できます。Tumblrテーマ制作のコツは、このテンプレートタグを使いこなすことです。テンプレートタグについては、次回(第3回)で詳しく解説します。

この連載の記事

一覧へ

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

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

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

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

ランキング