tumblrの無料テーマでおすすめするものは、2017.03.07現在アップされているものの中から個人的にこれ良いじゃんって思ったデザイン24選です。
Expand
以下のポイントを重視して選んでおります。
カスタマイズ性なども1つ考えても良いかもしれませんね。
文字についてはデザイン作った方が日本語を考慮していることは少ないと思います。なのでその点に関しては自身でフォント指定をカスタマイズするしかありません。
基本的にデザインについてはカスタマイズする必要もないぐらい見栄えが良いものをピックアップしてみました。
写真、画像投稿向けのテーマか、テキストタイプのライター向けのテーマかという焦点に絞って分けていきたいと思います。
写真や画像がメインとなるグリッドレイアウト #フォト
写真や画像がメインとなる1カラムレイアウト #フォト #1カラム
ヘッダー、記事などのフォント、サイズ、カラーも細かく設定可能
表示、非表示の組み合わせだけでもオリジナリティが出る
Loading Typeでインフィニティスクロールやページネーションも
インストール:https://www.tumblr.com/theme/40552
サンプル:http://persona.themecloset.me/
Body Grid Columnsで1カラム~最大5カラムまで設定できる
Header Alignmentでタイトルなどの位置、Header Positionでヘッダー自体をひ左右のサイドバーにするかTopに出すか選べる
Opacityの設定での見せ方が豊富(欠点はテーマ編集の段階で見え方が確認できないところ)
背景の一枚絵を設定して記事やヘッダの透明度の工夫次第で一目置くデザインに
インストール:https://www.tumblr.com/theme/39633
サンプル:http://minimalism-theme.tumblr.com/
Column Countで2カラム~最大4カラムまで設定できる
Photo Animationで画像をマウスオーバーしたときのアニメーション
Show Elevatorでページ内Topへ戻るリンク有無
Show Categoriesで投稿につけたタグでカテゴリ別に表示メニュー(日本語だと反映されないかも?)
カテゴリは6つまで指定でき、下の方にタグ名入力欄があります
フォントの細かい指定を直接入力してデザインできるら欄がある
Googleフォントも2つまでAPIのURL入力可
インストール:https://www.tumblr.com/theme/40586
サンプル:https://theme-maverick.tumblr.com/
Use Black and White Photoをオンにすると画像をグレースケールで表示してくれる(はずが、どうやら不具合。下記にて対応可。)
テーマの編集で「HTMLを編集」をクリック、下のimgタグを検索して、「opacity:0;」を削除するとグレースケール適用されました。photosetの方は未確認です。
<img src="{PhotoURL-500}" style="position:relative;z-index:99922299;opacity:0;" class="small">
※おすすめの1つとして紹介しましたが中身見るとちょっとおすすめ出来ない作りになっておりました。。画像投稿しか利用しないとか、見た目だけでOKなのであれば特に問題ありません。
インストール:https://www.tumblr.com/theme/39903
サンプル:http://imnotwordy.com/
カラム数はThumbnails Sizeの指定で変わります。XS・Sで5カラム、M・Lで4カラム、XLで3カラムになります。
Thumbnails Marginで記事間のスペースを選択
Crop Thumbnailsで記事サイズに合わせて画像を表示
Show Index Entry Footerのオンオフで記事のフッター情報の有無
Single Column Modeでは画像でなくテキスト重視のライター向けに
SNSリンクもFacebook、Twitter、Pixiv、Instagramと最小限
※非常におすすめです。設定もシンプルで見た目も良い。ただサイズがXSやSだと個人的にかなり小さい印象。それでも画像投稿の数が多く画面に目一杯敷き詰めたい方にはおすすめ。
インストール:https://www.tumblr.com/theme/40571
サンプル:http://illustfolio4-sanographixtheme.tumblr.com/
カラム数はブラウザのウィンドウサイズに依存(幅1280pxで4カラム)
サイドバーがボタン式の隠しメニューで位置を四つ角で指定可能
※典型的なグリッドオンリーのテーマで写真や画像にはもってこいなデザイン。しかしソースに改行が入っていないのでソースコードをいじってカスタマイズしたい方には向かない。
インストール:https://www.tumblr.com/theme/40629
サンプル:http://theme-melvin-1.tumblr.com/
Show Profile Boxで投稿のTopにつねに定形の紹介文表示
※Lig社員の制作によるデザイン。JSを多く使用していて読み込みが若干遅いが、写真画像をおしゃれに見せるにはもってこい。tumblrのテーマづくりから連載記事で公開されていて、カスタマイズの勉強にもなる。
Tumblrテーマを本気でつくる Vol.1 Vol.2 Vol.3
Tumblrをカスタマイズして、無料テーマとして申請しました
インストール:https://www.tumblr.com/theme/39833
サンプル:http://simpligfolio.tumblr.com/
写真画像は大きく表示され、テキストを綺麗に見せるライター向け
インストール:https://www.tumblr.com/theme/39974
サンプル:http://emerald-themechimp.tumblr.com/
写真や画像メインとして利用したいが、テキストも問題ない
ヘッダーがサイドバーになっていてレスポンシブで幅が狭まると上にくる
Tagegoryというタグをカテゴリに見立てた画像つきリンクが6つまで設定可
※テーマ編集の設定項目は多いが、全体的なデザインとして秀逸。利用してみる価値あり。
インストール:https://www.tumblr.com/theme/40337
サンプル:http://belfort-theme.tumblr.com/
(adsbygoogle = window.adsbygoogle || []).push({});
ブログタイトル等を左サイドにフィックスした1カラムレイアウト
テーマ編集の設定項目はテーマカラーとリンク設定のみ
※カスタマイズのアシストこそ少ないが誰にでも受け入れられるシンプルなデザインが良い。レスポンシブ対応なのも高評価。
インストール:https://www.tumblr.com/theme/37818
サンプル:http://colorfalltheme.tumblr.com/
レイアウトはグリッドか1カラムのどちらかを選択できる
グリッドの場合は写真画像専用として利用して申し分ない
隠しメニューでページリンクやTwitterのウィジェットに対応
他、Show Post Notesで投稿日時を記事下に表示
※テキストも画像もという迷っている方には非常にオススメ。グリッドか1カラムかを変更するだけで良い。初期のフォントも見やすく、デザインとして綺麗です。
インストール:https://www.tumblr.com/theme/39508
サンプル:http://zen-wayvo.tumblr.com/
ブログタイトル等を左サイドにフィックスした1カラムレイアウト
テーマ編集はタイトルを見せるか、ツイートを見せるかの2つ
記事投稿1つ1つに日付が左上に付いて、日記のようなイメージ
※はてなダイアリーのような日記を書くイメージでブログを扱いたい方にはオススメ。テキストはPCからでは若干小さめだが気にならない程度。
インストール:https://www.tumblr.com/theme/36932
サンプル:http://appblogtheme.tumblr.com/
SNSのリンクを設定すると左サイドでフィックスされて表示
ヘッダに設定した画像をスクロールでアニメーションさせる設定あり
※記事間をボーダーで繋いだ特殊なデザインですが、タグや固定リンクのセンター表示でバランスが取れている作り。ヘッダにメインの画像を1枚設定してブログにしたい方にオススメ。
インストール:https://www.tumblr.com/theme/40193
サンプル:https://phaser-theme.tumblr.com/
Max Grid Columnでグリッドに設定したときの最大カラム数を指定
Grid Layoutのオンオフで1カラムかグリッドかを指定
Sidebarをオンにするとヘッダが左サイドバーに
Videoのアスペクト比やAudioのアーティスト情報の表示など設定項目も多様
※カードの名の通り、厚紙のカードを記事に見立てて並べたイメージのデザイン。テーマ編集上でのカスタマイズ項目も多く細かい好みにも対応。初期に設定されているフォントを自分好みに変更すれば良い味になります。
インストール:https://www.tumblr.com/theme/39644
サンプル:http://cards-simplicitythemes.tumblr.com/
Dark Themeをオンにすると背景が暗いタイプに
Featured Postをオンにするとタグに「Featured」を付けた投稿記事を必ず先頭に表示してくれる
Group Blogのオンオフで記事投稿者を表示非表示できる
※日付が左サイドにあり日記やカレンダーがイメージのデザイン。Featured機能で1つの記事をお知らせとしてずっとTopに表示してくれるが便利。
インストール:https://www.tumblr.com/theme/38187
サンプル:https://sensetheme.tumblr.com/
基本は2カラム、レスポンシブ対応でウィンドウサイズ狭いと1カラム
とにかく細かい色・ボーダー・フォントの指定項目が多い
SNSウィジェットの表示、記事個々の情報の表示など設定可
※フッターのデザインが秀逸。SNSのリンクもアイコンで表示してくれる。色に関しては本当に細かく設定できるのでオリジナルに化ける可能性も。
インストール:https://www.tumblr.com/theme/39425
サンプル:http://excelle.elletricity.com/
※レスポンシブデザインではないため、スマホなどではtumblrデフォルトのモバイルデザインを設定していないといけない。昔ながらの2カラムデザインという感じで色彩などは女性好みのデザインかも?
インストール:https://www.tumblr.com/theme/29192
サンプル:http://safe.txmblr.com/theme/preview/29192
ヘッダーがサイドバーになっていてレスポンシブで幅が狭まると上にくる
※オーソドックスなデザインのブログ。記事のwidthは自分で指定できるが、このままでもバランスが取れていて見やすい。
インストール:https://www.tumblr.com/theme/39874
サンプル:http://oscar-theme.tumblr.com/
Enable Syntax Highlightで記事内のpreタグでプログラム用の強調構文が利用できる
※グリッドデザインで前述した「Zen」とは別物。シンタックスハイライトについての参考記事はこちら↓
インストール:https://www.tumblr.com/theme/38954
サンプル:http://zen-sanographixtheme.tumblr.com/
ヘッダと記事間をボーダー1本で区切るシンプルなデザイン
投稿タイプによってバッジ(アイコン)の色を指定可能
レスポンシブ対応でヘッダメニューはスマホで隠しのドロワーに
※白背景にバッジで色分けされた投稿タイプ別の表記はアクセントになります。
インストール:https://www.tumblr.com/theme/39773
サンプル:http://posthat.tumblr.com/
Enable Permalink Pagerで記事個別ページに前後記事へのリンク設置
Simple Viewでは記事のタイトルのみのリンク表示になる
※特殊な要素はやはりSimple View。記事内容をインデックスページに表示させたくない場合には使える機能だと思います。
インストール:https://www.tumblr.com/theme/40241
サンプル:http://solo-sanographixtheme.tumblr.com/
記事の幅を700px,900px,1200pxから選択可
Use Sticky Headerでスクロールしてもヘッダが上部についてくる
※記事の幅が固定幅の3つからの選択なのでレスポンシブは非対応。モバイル用にはデフォルトのテーマを使いましょう。
インストール:https://www.tumblr.com/theme/39580
サンプル:http://thinkertheme.tumblr.com/
Fullres photo postsで画像を画面幅一杯に表示
Separator Textで記事間のセパレート文字をテキストで入力可
Additional linksでフッターにリンク追加(htmlタグで入力できる)
※コーダー向けのローマ字フォント設定されたもの。日本語フォントで打つには好みのフォントを指定して使いたいところ。個人的にはもの凄い好み。
インストール:https://www.tumblr.com/theme/39229
サンプル:https://monospace-theme.tumblr.com/
Show About Widgetでアバター画像とサイト説明文を右サイドバー表示
Show Stuff I Like WidgetでLikeした記事を表示
Show Latest Tweets WidgetでTwitterの最近のつぶやき表示
Show People I Follow Widgetで自分がフォローしてるユーザー表示
※最後はこのMiMiC Laboの元となったテーマをご紹介。xhtmlで古いデザインですが、ボーダーで区切られたシンプルなデザインに惹かれました。カスタマイズにも力が入りました。
インストール:https://www.tumblr.com/theme/10375
サンプル:http://safe.txmblr.com/theme/preview/10375
24選の中でご興味があるデザインは見つかりましたでしょうか?
今回ご紹介したテーマについては「無料」の「人気」の中からのチョイスですが、人気のもの以外にも無料のデザインはございますので、探してみるのもありかと思います。
また機会があったら別のデザインなど紹介したいと考えています。
あとは自分でデザインを作ってみようかと模索中ですので、このサイトでもし紹介できればと思います。