これが無料?おしゃれなTumblrテーマ27選(レスポンシブデザイン対応)

tumblrのおすすめテーマ集

Tumblrが素晴らしいのは、超ハイクオリティーなデザインテンプレート(テーマ)を無料で使用することができる点です。以下で紹介するデザインテーマはどれも無料でインストールすることができます。また、どれもレスポンシブ対応です。

インストール

インストール方法は超簡単。テーマページを開き、右上の[設定する]をクリックするだけです。

おしゃれなレスポンシブテーマ

CANDICE

candice

ものすごく完成度の高いテーマです。Instagramと連携して写真を美しく並べることもできます。画像メインのウェブサイトを作りたければ、このテーマが決まりかもしれません。写真は使いたいものが無ければ、Unsplashなどのおしゃれ写真(商用フリー・無料)を使うのが良いのではないでしょうか。

Sugar

sugar

これが無料?と驚いてしまうほどにハイクオリティーな無料テーマです。コードの知識が無くても、簡単に表示の仕方をカスタマイズができます。記事ページもオシャレなので、tumblrをブログとして活用したいときにはおすすめです。

Hipster

tumblrのテンプレート例

こちらも最高におしゃれなデザインテーマ。デスクトップ表示の場合サイドバーは固定されており、カード部分(投稿だけ)が気持ちよくスクロールで動きます。レスポンシブ対応でスマホ表示も良い感じ。思わず新しいブログを作りたくなります。

Faded Theme

faded theme

Webデザイナーが震え上がりそうなほどにおしゃれなデザインです。レイアウトからホバーエフェクト、配色まで完璧です。企業のブランドサイトにそのまま使えそう。

Art Folio

art folio

写真ブログや旅行記サイトを作りたいならこのテーマがおすすめです。黒の背景にすると、写真がグッと引き締まって見えますね。これが無料なのはTumblrならでは。

Grid Theme

grid theme

グラデーションと配色がものすごく綺麗です。画像にカーソルを当てたときのホバーエフェクトも秀逸。これが無料だと…!?

Grid Theme

PASTEL THEME

さきほどの姉妹テーマ。全体的に細い白線でまとめられており、シャープでスマートな雰囲気となっています。

Persona

Persona

企業や店舗の公式Webサイトに使えそうなクオリティーの高さです。無限スクロール機能付き。本当によく出来ているので、一度プレビューを見てみることをおすすめします。

Eclipse

Lunar

「ミニマル」という言葉がよく似合う質素かつおしゃれなデザインです。グリッドの画像が整列されるアニメーションも素敵。

Wall Stocker

wallstocker

シンプルですが綺麗なレイアウトで画像を引き立ててくれそうです。ポートフォリオサイトに使うのが良いですね。

Pop Gallery Lite

dagd-11.jpg

Zeph

Zeph

黒をベースにした配色がかっこいいテーマ。全体的に落ち着きがあり大人な雰囲気が出ています。

Manila

manila

シンプルなカードデザインで画像を引き立ててくれます。ただし、テーマがコードで配布されているため、1クリックでインストールすることはできません。インストールするには[Get Theme]をクリックして表示されるコードをコピーし、こちらの記事の手順に従って現在のコードと入れ替えます。

Verbage

Verbage

ファーストビューがおしゃれなテンプレートです。日記やメモ書き、つぶやきなどの短文、写真などをサクッと投稿していくのが合いそうな印象。

2. WebポートフォリオにおすすめのTumblrテンプレート

STYLED

styled

画像だけを並べるためのテーマです。グリッド表示もホバーエフェクトも良い感じ。

SQUARE

Square

余計な表現はなく、シンプルに作品を引き立ててくれます。こちら日本人クリエイターの方が作成したもの。そのため、日本語フォントのテキストでも趣たっぷりに表示してくれます。

DIBLAH

DIBLAH

グリッド表示ですが、デスクトップ表示だとサイドバーが左側に固定されます。メニューが分かりやすくて良いですね。

Young Blood

Young blood

デモページの写真がイケイケですがよく出来ています。テーマ名までやんちゃですが(Young Blood:若い血)ですが、ページを開いたときに1番最初に見えるヘッダー部分には動画を美しく埋め込むことができます。

BIG GUY

big guy

写真を美しくレイアウトしてくれます。コメントを書けば画像の下に表示されます。写真のWebポートフォリオサイトを作るの良さそうです。

The Default Network

the default network

かなりシンプルで、余計な装飾は一切ないデザインになっています。サイトデザインではなく、写真やイラスト、アート作品で勝負したいときに使うのが良いかもしれません。ある程度スクロールすると自動で、記事をもっと読み込んでくれる無限スクロール機能がついています。これは便利。

3. ブログにおすすめのTumblrテーマ

VOID

VOID

隅から隅までとても美しいテーマです。グリッドのレイアウトがとても綺麗。これは目を引きますね。

Blogit Theme

blogit theme

爽やかで見やすい1カラムレイアウトのテンプレートです。スクロールするとナビゲーションメニューが上に固定されます。本格的にブログを始めたいときにも使えそうです。他と同じくレスポンシブ対応です。

ULTRAZEN

ultrazen

モノクロのデザインが美しいテンプレートです。文章もきれいに表示してくれます。日記や雑記のようなブログに使うのにはピッタリではないでしょうか。

PAPER

PAPER

太め・大きめのフォント、鮮やかな色使いがかわいく読みやすいデザインになっています。Tumblrで作られたようには見えないのがまた良いですね。

Simplify Theme

simplify theme

使い勝手の良さそうな1カラムデザインです。スクロールすると、ナビゲーションバーが上に固定されます。

APOLLO THEME

apollo theme

シンプルなブログを作りたいときにおすすめのテーマです。モノクロで余計なものが載っておらず、しっかりとレスポンシブに対応しており、スマホ表示も良い感じ。

Pink Touch

Pink touch2

おしゃれさという点では、他にやや劣る印象ですが、何かをメモするためのブログとしては良いでしょう。

4. レスポンシブ表示の設定をしておこう

ここまで紹介してきたテーマはどれもスマホ表示に対応したレスポンシブデザインです。しかし、Tumblrの初期設定では、スマホから閲覧したときにモバイル用のテーマが自動表示されてしまいます。そのため、スマホ表示でもオリジナルテーマが使用されるように設定を忘れずにしておきましょう。

手順1:テーマの編集画面へ

外観を編集をクリック

ダッシュボード右上にあるをクリックし、[外観を編集]を選びます。

テーマの編集をクリック

表示される設定画面の中から[テーマを編集]をクリックします。

テーマの編集画面

無事に「テーマの編集」画面が開きました。

手順2:詳細設定からモバイルテーマの使用をオフに

詳細設定

左のサイドバーで1番下までスクロールし[詳細設定]をクリックします。

デフォルトモバイルテーマを使用をオフに

[デフォルトのモバイルテーマを使用]をオフにします。

これでスマホ表示でも同じテーマで表示されるようになります。

その他のテーマを見つけたいときは…

その他、Tumblr公式サイトでたくさんのテーマを見つけることができます。有料テーマが多めですが、色々と探してみると楽しいかもしれません。


サルワカ