TumblrのレスポンシブルのデモテーマからCOOLにカスタマイズする方法!


最近、Tumblrのテーマも色々なところで目にします。そして、かなりCoolなテーマを目にします。buildthemes.tumblr.comを見ると、43%しか無料のテーマを使っていことに驚かされます。そして、僕はできるだけ無料のテーマを出来るだけCoolなテーマとしようと時々暇な時にHTMLをイタズラしてます。そこで、Completed theme HTML and CSS(完全なデモテーマ)を見つけて、簡単なカスタマイズをしてみました。
Tumblrテーマガーデンは実に分かりやすいサイトで、僕はこのサイトから2つのデモを利用してブログテーマスタムを楽しみました。

tumblr_mcixhbsaRr1qzcnez

完全なデモテーマは、レスポンシブルだった!実は、ただのリキッドデザイン

モバイル時代に対応するには、レスポンシブのテーマが必要になる。このブログテーマもレスポンシブとなっている。最初はデフォルトにデモということなので、ちょっと勉強がてらにTumblrにアップロードしてみた。アップロードは、既存の無料テーマにコピペしただけど、バックグランドなどのカスタマイズが可能になる。背景やテキストなどをカンタにカスタマイズできるので、HTML,CSSの知識が殆ど無くても可能のです。

tumblr completed theme

tumblr completed theme
ここからソースをコピーします。

僕が行ったカスタマイズ

僕の行ったカスタマイズは、FbボタンなどもCSSの変更もしていません。表示させたい位置にTumblrのHTMLのカスタマイズエディタで書き加えるだけです。このテーマでは、マッチするテクスチャーの出来が決め手です。僕は岩と木を使ってみました。また飽きたらこの背景を変えてみたいと思います。

  • 背景のテクスチャ探しだ。deviantartで、「Texture」で検索して、気に入るものを何点か試してみた。
  • FacebookボタンとGoogle アドセンスのバナーを貼りこむ。
  • Image Resizer(googlr chormeエクステンショ)で様々なディバイスブラウザーで表示させて確認
  • サイドバーのGoogle アドセンスバナーをMac air 11では、サイドバーから外れるので削除

imac tumblr

iMac 27のブラウザーサイズをフルにすると少しポストの白い部分が目立ちます。しかし、大画面なので迫力があります。これはリキッドデザインですね!

macair11Tumblr

Mac Air11でちょうど見やすい感じなりました。

ais2008 tumblr

も一つのでも、2カラムでリキット。サイドバーをベースにしたテーマです。こちらもコードがあります。
デモはこちら:ais2010.tumblr

この2つのタイプの僕の気にった部分を合併させています。
iPhone-tumblr

iPhoneならTumblrはこのように反映されるので問題はありません。

こんなレスポンシブルテーマにしたい!

2カラムでは物足りない。そこで僕が目指すテーマは、以下の様な感じで行きたい。NHKスカイパークをCOOLにしたようなTumblrテーマを作ってみたい。
buildthemes.tumblr.com/ch5/infinite-scroll-and-gridでは、スクロールとグリッドレイアウトのチュートリアルでは、この古典的なレイアウトを作成するためにjQueryを使って石積みと無限スクロールを使用します。それはあなたが完全にこのコンポーネントを理解するためのjQueryを熟知していることをお勧めします。と次の僕の目的であるMasonryのようなサイトを目指してます。

inspirewell.stylehatch.co

Tumblrは他のブログサービスと異なり、個性のある画像が多いいが、個性のあるCOOLなテーマも多いい。それだけにカスタマイズしてもテーマを購入しても、フリーのテーマでもそれなりに楽しめる。

Masonry-plugin

最後にjQuery pluginsなどは、masonry.desandro.com/demos/animating-jquery.htmlが便利かもしれません。

やっと見つけた!フリーのTumblrのテーマここから!

やっと見つけた感じのjQueryのフリーのテンプレート。これだけあれば、自分のお気に入りのCOOLなテンプレートが選べるのではないでしょうか?

newtumblr

どうぞ、こちらから様々なテーマーをダウンロードしてください!
»インストロールテーマ

Related posts