• かちびと.net

    Tumblrのオリジナルテーマ作成用フレームワーク・tumblr-frameworkのご紹介です。Tumblrのテーマを自作する際にお世話になりそうですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

Tumblrのオリジナルテーマ作成用フレームワーク・tumblr-framework

スポンサーリンク

Tumblrでオリジナルのテーマを自作
するためのフレームワーク・tumblr
-frameworkのご紹介です。日本でも
企業が公式ブログ等にTumblrを使い
始めていますのでこういったフレー
ムワークも確保しておくと良さそう。

女優の水野美紀さん楽天NISSANのキャンペーンサイトなどなど企業や著名人でも徐々に利用し始められてきたTumblrですが、テンプレートは独自の記法を用いて作成する必要が有ります。

この独自記法が予め書かれているフレームワークがtumblr-frameworkです。

tumblr-framework


Tumblrのオリジナルテーマを作成するためのフレームワーク。

以下のような、よく使われるタグや条件分岐タグなどが一通り備わっています。

<h1 title="{Title}"><a href="/">{Title}</a></h1>
	{block:Description}
		<p class="description">{Description}</p>
	{/block:Description}

Googleアナリティクスも管理画面で設定出来るようになっています。

{block:IfGoogleAnalyticsID}
	<script>
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', '{text:Google Analytics ID}']);
		_gaq.push(['_trackPageview']);
		(function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();
	</script>
{/block:IfGoogleAnalyticsID}

このフレームワークで作成したテンプレート例も紹介されています。(ViewportPinstripeなど)

ただし、CSS部分は自分で書く必要があります。編集画面で色を変えられるようにするには以下のような書き方をします。

body {
    color:{color:Text};
    background-color: {color:Background};
    font-family: Meiryo,"MS PGothic",arial,sans-serif;
}

この辺はリファレンスを見ないとですけど、オリジナルテーマを配布する以外ではあまり必要ないような気もします。Tumblrは人気ですけど、こうしたリソースはあまり見かけないような気もするので覚えて置いて損は無いのではないかなと。

ライセンスはMITです。以下よりどうぞ。

tumblr-framework

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services