初心者のためのTumblrリンク集をまとめてみた
はじめに
Tumblrはカスタマイズに関する書籍は数多くありますが、初心者向けに、何に使うのか、どう使うのか、どう作るのかという入門書はありません。
そこで、自分のようにHTML/CSS/JavaScriptが全く分からない初心者のためのリンク集をまとめてみました。
1.Tumblrとは何か
まず誰もが最初に思う疑問「Tumblrってどう使うの?」
答えは「使い方はあなた次第」としか言いようがありません。
ブログサービスであり、SNSであり、CMSであるTumblrは、初心者にとってつかみどころのないサービスだと思います。
Tumblrのサイトでは「マイクロブログサービス」と表記されています。
しかしこれが誤解を招く表現だと言えます。
Tumblrは一言で説明すると「コンテンツ・キュレーション・プラットフォーム」だと言えます。
自分のコンテンツをキュレーションすれば、オウンドメディアやポートフォリオサイトとして利用できます。
他者のコンテンツをキュレーションすれば、スクラップブックやまとめサイトとして利用できます。
特にInstagram・Fliclr・YouTube・Viemo・Vine・SoundCloudのコンテンツをキュレーションするポートフォリオサイト、オウンドメディアにTumblrは向いています。
もちろんブログメディアとしても利用できますが、長文の投稿にはTumblrのエディターは向いていません。
この投稿もStackeditというツールを使って作成しています。
Tumblrをはじめて2年、あくまでも個人的な感想ですが…
Tumblrに向いているものは
・クリエイター(デザイナー、イラストレーター、フォトグラファー)のポートフォリオサイト
・個人(例えばミュージシャン)のオウンドメディア
・スモールビジネス(例えば飲食店、サロン、士業)のオウンドメディア
・海外向けに情報発信するメディア(例えばインバウンドマーケティング)
例えば、ホームページはWix・Jimdo、ブログはアメブロで情報発信している個人やスモールビジネスは、Tumblrに移行してホームページ(固定ページ)とブログ(投稿ページ)を統合して、ひとつのサイトで運用すると便利です。
逆にTumblrに向いていないものは、
・長文を投稿するブログメディア→Mediumがおすすめ
・コンテンツをマネタイズしたい→noteがおすすめ
・アフィリエイター向けのブログメディア→はてなブログがおすすめ
と言えるのではないでしょうか。
他のブログサービスとの比較
- ブログ作成におすすめしたい、人気無料ブログサービス21比較まとめ【2016年版】|ferret [フェレット]
- Blogger・Tumblr・はてなブログの徹底比較 〜真面目に文章を書くときのブログ選び〜 | ku:neko ism
他のSNSとの比較
- Facebook、Google+、Twitter、Tumblrから自分に合うものを選ぶためのガイド | ライフハッカー[日本版]
- Google+ vs facebookの時代じゃなくて、キュレーションの時代の先駆者はTumblrですよ! — WEB DREAM BLOG
他のCMSとの比較
他のコンテンツ・プラットフォームとの比較
- tumblr、Medium、cakes…ソーシャル機能や思想を持つ『ブログプラットフォーム』の使い分けを考察
- ブログの復権:2015年のブログプラットフォーム(1) — MdN Design Interactive — デザインとグラフィックの総合情報サイト
- ブログの復権:2015年のブログプラットフォーム(2) — MdN Design Interactive — デザインとグラフィックの総合情報サイト
- ブログの復権:2015年のブログプラットフォーム(3) — MdN Design Interactive — デザインとグラフィックの総合情報サイト
では、Tumblrの創設者David Karpはどう考えているのでしょうか?
David KarpはクリエイターのためのプラットフォームとしてTumblrの利用を想定しているようです。
- クリエイターのためのプラットフォームとして成長を続けるTumblr(前編) | デジタル・チェンジ | 現代ビジネス [講談社]
- クリエイターのためのプラットフォームとして成長を続けるTumblr(後編) | デジタル・チェンジ | 現代ビジネス [講談社]
- 25歳のCEOがTumblrを作った理由 — 3分間ビジネスモデル
- 「リブログ」が生み出す巨大なチャンスとは、Tumblrの26歳創業者が来日 — INTERNET Watch Watch
- デイヴィッド・カープ | デイヴィッド・カープが、ヤフーへのTumblr売却後に考えたこと « INNOVATION INSIGHTS
2.Tumblrをコンテンツマーケティング・オウンドメディアでどう活用するか
企業のTumblr活用例です。参考になるサイトをまとめてみました。
- 【事例集】ユーザー数は1億超。ウェブログサービス「Tumblr」の企業活用事例
- オウンドメディアを手軽に始める。Tumblrの4つの特徴と使い方 | インバウンドサイトを作るときに知っておきたいこと | インバウンドサイトのエムハンド
- 大企業の「Tumblr」を用いたコンテンツマーケティング5事例 | インフォバーン総研 | インフォバーン
- Tumblrを活用した企業プロモーション事例8選
- めっちゃお洒落!有名企業・ブランドのTumblrサイト29選
- Tumblr(タンブラー)がオウンドメディアに使える3つの理由 | cherry-pick BLOG | 株式会社cherry-pick
3.Tumblrで、できること、できないこと
Webサイトやブログを構築する場合、あらかじめTumblrで、できること、できないことを検証する必要があります。
- TumblrでWebサイトやブログを構築する際に知っておいた方がいいこと | Designlabo-Mika-Blog
- Tumblr(タンブラー)がCMSとして使えるかWebディレクター目線で調べてみた | cherry-pick BLOG | 株式会社cherry-pick
- ボヤ騒ぎを起こさずTumblr(タンブラー)でWebサイトを制作したい人へ贈る事前チェックポイント | cherry-pick BLOG | 株式会社cherry-pick
あえて、WordPressではなくTumblrで制作している事例もあります。
- Tumblr+カゴ落ちしない決済画面で作るストレスゼロの次世代ECサイト|ECzine(イーシージン)
- Tumblrのカスタマイズで作るWebサイト〜苦戦したポイントTOP5〜@Creators MeetUp #27
- 素人がtumblrでコーポレートサイト的HPを作った話 — B型ドットコム
4.Tumblrの主なまとめサイト
まず、まとめサイトに目を通してTumblrの使い方について概要を把握してみましょう。
- Tumblr(タンブラー)の使い方まとめ!【カスタマイズサイト】 | 株式会社LIG
- 今更聞けない!Tumblrと登録方法を解説
- Tumblrの使い方からカスタマイズまで。初心者が見ておくべき良記事16選|ferret [フェレット]
- 『Tumblr』のおさらい (1) いまさらだけど『Tumblr』ってなに? — スクラップが便利なシンプルブログ | マイナビニュース
- Tumblrでポートフォリオを作ろう(基本編)(1) | マンガでなれる?WEBデザイナー講座
- :: Tumblr更新マニュアル ::
- Tumblr (タンブラー) をはじめよう! — GreenSpace
4.コンテンツを投稿する
Tumblrの投稿タイプには、テキスト・画像・引用・リンク・チャット・音声・動画・GIFがあります。
テキスト
Stackeditを利用した投稿の仕方
- ブログエディタはStackEditが最強かもしれない — 6VOX
- Markdown エディタなら『StackEdit』がおすすめ! — mattintosh note
- 超シンプルで高機能なMarkdownエディタの『StackEdit』がいい感じ! | バンクーバーのうぇぶ屋
- ちょっと便利なもん — StackEdit(マークダウンエディタ) — てきとーやねん
- StackEdit から Tumblr に投稿する際に「Could not publish on Tumblr.」が出たときの対処方法
- StackEdit ? In-browser markdown editor は使える!: Jkun Blog
画像
Flickrのコンテンツの投稿の仕方
音声
SoundCloudのコンテンツの投稿の仕方
動画
Instagramは画像であってもTumblrでの投稿タイプは動画になります。
Instagramのコンテンツの投稿の仕方
YouTubeのコンテンツの投稿の仕方
Vineのコンテンツの投稿の仕方
IFTTTを利用した投稿の仕方
- 資料的なお話 — tumblrのサブブログをiftttで連携する方法
- TumblrからTwitterに写真付きで投稿したい!「IFTTT」を使った画像の連携、設定方法 | かめらとブログ
- IFTTTで作る自動ブログ!InstagramとTumblrの連携レシピでブログ作ってみたw
- IFTTTでTumblr(タンブラー)のレシピを解説! | ネットライフ備忘録
5.Tumblrの設定方法
初心者を陥れるTumblrの罠。
それはチュートリアルを完了しないとリダイレクトページを作成できないことです。
なぜこのような仕様になっているのか全く分かりませんが、早急にサイトを制作しなければならない場合、大きな支障になります。
またInstagramから自動投稿する場合、メインブログにしかできず、サブブログにはできません。
IFTTTを使用すれば回避できますが、将来APIの変更により投稿できなくなる可能性もあります。
メインブログとサブブログの違い
Tumblrにはメインブログとサブブログがあり、サブブログはいくつでも追加できます。サブブログはパスワード保護と複数ユーザーでの使用が可能です。
サブブログの利用方法
ページを追加する方法
- Tumblrでリダイレクトが利用できるまでの道のり(条件): Jkun Blog
- 【Tumblrの便利な小技(1)】リダイレクトページで別サイトへリダイレクトする… | Designlabo-Mika-Blog
タグを編集する方法
- 【Tumblrの小ワザ(2)】複数投稿編集ツールでタグや記事の編集を一括管理する… | Designlabo-Mika-Blog
- ITライフハック |Tumblrで複数の投稿に一気にタグを付ける【知っ得!虎の巻】
テーマの設定
Disqusコメントを設置する方法
タグクラウドを設定する方法
独自ドメインを設定する方法
- Tumblrで独自ドメインを設定する方法。[お名前.comの場合] | かめらとブログ
- 5分でできるTumblr(タンブラー)でお名前.comの独自ドメインの設定をする簡単な方法 | スタートアップアカデミア
- Tumblrで独自ドメインを使う方法を解説(Value Domainの場合)
問い合わせフォームを設定する方法
Google Analyticsを設定する方法
Tumblrにインポートする方法
Tumblrからエクスポートする方法
ユーザーとのコミュニケーション
その他小ワザ
ランディングページを作成する方法
- セルフパブリッシャーのためのTumblrテーマ 「でんでんランディングページ」をリリースしました — 電書ちゃんねるBlog
- プロの作家も自著の”営業”に使うべき!「でんでんランディングページ」 : NewsACT
- Tokusetsu 2 — 同人音楽CD特設サイトが一瞬で作れるTumblrテンプレート
- 同人イベント告知にピッタリ!素敵すぎるTumblrテーマ『Tokusetsu2』の使い方
6.Tumblrのテーマとカスタマイズ
テーマの紹介とカスタマイズの方法は、書籍やTumblrのまとめサイトで数多く扱われているので、ここでは主な記事のみ。
- ブログのカスタマイズ | Tumblr
- オシャレすぎて一目置かれるTumblrでオススメしたいテーマ48選|ferret [フェレット]
- Tumblrでもここまでデザインできる!オリジナルカスタマイズの実例解説 | 株式会社LIG
7.高機能無料テーマ「ELISE」の使い方
個人やスモールビジネスがオウンドメディアを制作するのに向いているテーマです。
とても無料とは思えないほどの高機能テーマです。主な特徴としては
・レスポンスWebデザイン
・レイアウトを変更できる
・投稿サイズを変更できる
・ピン機能、ハイド機能がある
・サイドバーにtext widgetが2箇所あり、例えばTwitterやFacebookPageのタイムライン、タグクラウド、Googleカレンダー、Googleマップなどを埋め込むことができる
- デモサイト Elise Theme
- インストール Elise | Tumblr
- ドキュメント(仕様書) elise-theme.tumblr.com/documentation
またTumblrは、チュートリアルを完了しないとリダイレクトページを作成できないため、 リダイレクトページが作成できるまでの間、「drop-down menu」にリダイレクト先のリンクを表示することもできます。
デフォルトではオンになっている機能がありますが、一旦すべての機能をオフにして、必要な機能のみオンしてください。
A. Header and navigation
ヘッダー画像は10枚まで登録でき、それぞれにキャプションを表示できます。
B. Posts section
レイアウトは4つから選べます。
・MASONRY
・GRID
・SINGLE COLUMN
・TWO COLUMNS
C. Sidebar section
・About labelにProfile、About(説明)にプロフィール内容を設定する。
・Sidebar text widget1 labelに例えばTwitter、Sidebar text widget1 contentにTwitterタイムラインのコードを埋め込む。
・Sidebar text widget2 labelに例えばFacebook、Sidebar text widget2 contentにFacebookページのタイムラインのコードを埋め込む。
・ソーシャルリンクを設定する。
・Sidebar tags labelを設定する。
・Tagをそれぞれ設定する
D. Footer section
・Footer Tags label を設定する。
・Tagをそれぞれ設定する。
E. Other options
Disqus Comments、Google Analytics、Google Fontsを設定する。
GRIDレイアウト、MASONRYレイアウトの場合、タグによって投稿サイズが選べます。
FOR GRID LAYOUT
- add tag vertical or _vertical — (330 x 660) px vertical post.
- add tag horizontal or _horizontal — (660 x 330) px horizontal post.
- add tag large or _large — (660 x 660) px large post.
- add tag extended or _extended — (660 x 990) px extended post.
FOR MASONRY LAYOUT
- add tag large or _large — for two column post (double width).
ピン機能
タグに#pinnedを設定すると投稿がHomeの先頭に表示されます。
ハイド機能
タグに#hideを設定するとHomeに投稿が表示されません。
最後に
Tumblrを利用して一番のリスクは、Tumblrというサービスそのものが終了することです。
その時は、WordPressに移行すれば良いわけで、世界中にこれだけのユーザーがいるわけですから、何らかの便利な移行ツールがでてくることでしょう。