初心者のためのTumblrテーマカスタマイズ方法入門

2014-07-18

Tumblrはブログを簡単に投稿できるサービスですが、Wordpressよりも簡単に始めることができ、しかもカスタマイズも自由に行えます。

公式サイトでも数多くのテーマが公開されおり、選ぶのにこまってしまうほどです。ただ、全体的にポートフォリオタイプが多いのが現状。オリジナルサイトを作ったり、企業のブログとして本格的に使いたい場合などは自分でカスタマイズする必要性がでてきます。

このページではTumblrをカスタマイズするための便利なリソースや、カスタマイズの大まかな方法について紹介します。

Tumblrカスタマイズの便利なリソース

Tumblrの公式ドキュメント

Tumblrをカスタマイズする際にもっともお世話になるのが公式ドキュメントです。

このページのGetStartedから初めるとTumblrの基本的なカスタマイズができるようになっています。

このサイトでも各ポストタイプについてカスタマイズ方法を紹介していく予定です。

Tumblr boilerplateについて

ドキュメントがあっても白紙の状態から作っていくのは難しいですよね。そこでオススメなのがBoilerplate。Bilerplateは最初から最低限必要なコンポーネントなどが実装されたテンプレートです。

ダウンロードはこちら

head部分の記述もきちんと行われているのでゼロから作るのに比べればかなり簡単。最初はBoilerplateを使って少しずつカスタマイズしていきましょう。

こちらのページではTumblrのテーマを無料配布しています。この無料テーマをカスタマイズしていくのも良いかもしれません。

絶対参考になる！Tumblrカスタマイズチュートリアル

やっぱりわかんない！という方にはチュートリアルがおすすめ。チュートリアルではカスタマイズの方法をさくっと確認することができます。

たとえばこちら。英語ですがPhotoshopデザインからTumblrテーマを作成しています。

見てもらうとわかるのですが、GoogleAnalyticsを入れたり、Twitterウィジェットを入れたりと結構高度なこともやってるのでものすごく参考になります。

他にもTumblr カスタマイズチュートリアルなどで検索すると色々でてくるのでチェックしてみましょう。

Tumblrテーマをカスタマイズする簡単な方法

それぞれのコンポーネントの使い方やGoogleAnalyticsの導入方法などは次回以降にするとして、ここではTumblrをカスタマイズする際の注意点などを紹介します。

TumblrのCSSファイルの置き場所

WordPressの場合はテーマにCSSファイルを含めて一緒にアップロードできるのですが、Tumblrの場合はそれができません。

なので基本的にはCSSをhead内に記述する必要があります。ただ、テーマで使用するファイルに限ってサーバーにアップロードする機能があります。
こちら

こちらにアップロードしたファイルはWordpressと同じようにlinkタグで呼び出し可能なので有効活用しましょう。

Tumblrのテーマオプションを作成する方法

Tumblrテーマのカスタマイズページを見た人は気付いているかもしれませんが、Tumblrにはテーマオプションがあります。

Tumblrにテーマオプションを作成するにはhead内にmetaタグを設置し、それをstyle内で設定します。

<html>
    <head>
        <!-- デフォルトの値をセット -->
        <meta name="font:Title" content="Helvetica Neue"/>
        <meta name="font:Body" content="Arial, Helvetica, sans-serif"/>
        
        <!-- style内で設定したオプションを記述 -->
        <style type="text/css">
            h1 {
                font: 30px {font:Title};
            }

            #content {
                font: 12px {font:Body};
            }
        </style>
    </head>
    ...
</html>

書き方については公式ドキュメントのTheme Optionsにも記載されているのでそちらを参考にしてみてください。

テーマオプションの応用でできること

このテーマオプションを応用することで、GoogleAnalyticsやTwitterウィジェットの設置も可能になります。

他にも背景画像を変更したり、スライダーの有無をオプションで設定したりと工夫しだいでかなりクールなテンプレートを作成することが可能。

このようなオプションを多数設定したテーマをこちらで無料公開していますので是非チェックしてみて下さい。