Open in app

Sign in

Write

Sign in

初心者のためのTumblrリンク集をまとめてみた

Kozy Ogawa
16 min readJun 7, 2016

--

はじめに

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がおすすめ
・アフィリエイター向けのブログメディア→はてなブログがおすすめ
と言えるのではないでしょうか。

他のブログサービスとの比較

他のSNSとの比較

他のCMSとの比較

他のコンテンツ・プラットフォームとの比較

では、Tumblrの創設者David Karpはどう考えているのでしょうか?
David KarpはクリエイターのためのプラットフォームとしてTumblrの利用を想定しているようです。

2.Tumblrをコンテンツマーケティング・オウンドメディアでどう活用するか

企業のTumblr活用例です。参考になるサイトをまとめてみました。

3.Tumblrで、できること、できないこと

Webサイトやブログを構築する場合、あらかじめTumblrで、できること、できないことを検証する必要があります。

あえて、WordPressではなくTumblrで制作している事例もあります。

4.Tumblrの主なまとめサイト

まず、まとめサイトに目を通してTumblrの使い方について概要を把握してみましょう。

4.コンテンツを投稿する

Tumblrの投稿タイプには、テキスト・画像・引用・リンク・チャット・音声・動画・GIFがあります。

テキスト

Stackeditを利用した投稿の仕方

画像

Flickrのコンテンツの投稿の仕方

音声

SoundCloudのコンテンツの投稿の仕方

動画

Instagramは画像であってもTumblrでの投稿タイプは動画になります。

Instagramのコンテンツの投稿の仕方

YouTubeのコンテンツの投稿の仕方

Vineのコンテンツの投稿の仕方

IFTTTを利用した投稿の仕方

5.Tumblrの設定方法

初心者を陥れるTumblrの罠。

それはチュートリアルを完了しないとリダイレクトページを作成できないことです。
なぜこのような仕様になっているのか全く分かりませんが、早急にサイトを制作しなければならない場合、大きな支障になります。

またInstagramから自動投稿する場合、メインブログにしかできず、サブブログにはできません。
IFTTTを使用すれば回避できますが、将来APIの変更により投稿できなくなる可能性もあります。

メインブログとサブブログの違い

Tumblrにはメインブログとサブブログがあり、サブブログはいくつでも追加できます。サブブログはパスワード保護と複数ユーザーでの使用が可能です。

サブブログの利用方法

ページを追加する方法

タグを編集する方法

テーマの設定

Disqusコメントを設置する方法

タグクラウドを設定する方法

独自ドメインを設定する方法

問い合わせフォームを設定する方法

Google Analyticsを設定する方法

Tumblrにインポートする方法

Tumblrからエクスポートする方法

ユーザーとのコミュニケーション

その他小ワザ

ランディングページを作成する方法

6.Tumblrのテーマとカスタマイズ

テーマの紹介とカスタマイズの方法は、書籍やTumblrのまとめサイトで数多く扱われているので、ここでは主な記事のみ。

7.高機能無料テーマ「ELISE」の使い方

個人やスモールビジネスがオウンドメディアを制作するのに向いているテーマです。

とても無料とは思えないほどの高機能テーマです。主な特徴としては

・レスポンスWebデザイン

・レイアウトを変更できる

・投稿サイズを変更できる

・ピン機能、ハイド機能がある

・サイドバーにtext widgetが2箇所あり、例えばTwitterやFacebookPageのタイムライン、タグクラウド、Googleカレンダー、Googleマップなどを埋め込むことができる

また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に移行すれば良いわけで、世界中にこれだけのユーザーがいるわけですから、何らかの便利な移行ツールがでてくることでしょう。

CSS
Comics

--

--

Kozy Ogawa

Written by Kozy Ogawa

28 Followers

YouTuberカバーアーティストウォッチャー/http://kozy-ogawa.tumblr.com/

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams