Tumblrの使い方:ブログの作成〜デザインカスタマイズまで総まとめ

tumblrの使い方まとめ

今回はTumblr(タンブラー)の使い方を解説していきます。登録方法からブログの作り方デザインのカスタマイズ方法などまでまとめて紹介します。「Tumblrって何?」という方はお手数ですが、前回の記事を読んでみてください。


1. Tumblrの登録方法

手順1:アクセス

下記のリンクからTumblrのトップページにアクセスします。

Tumblr
タンブラーのトップページです。

手順2:登録

利用開始ボタンを押す

[利用開始]ボタンを押します。こちらの画像例はスマホ表示なので、PCからだと少し表示が異なるかもしれません。

sign up画面

Sign Upという画面が開きます。残念ながらこのページは英語表記になっています。上から以下の項目を入力していきます。

  • メールアドレス
  • パスワード
  • 誕生日(月・日・年)
  • 性別(選ばなくてもOK)

入力が完了したら[Continue]を押して進みましょう。

認証画面

認証画面が開きます。「私はロボットではありません」にチェックをつけて[Continue]を押します。

手順3:ブログのURLを決める

ブログ名をきめる

日本語に戻りました。ここではブログ名というより「ブログのURL」になる文字列を入れます。使えるのは英数字半角のハイフン(-)だけです。

例えば「saruwaka-web」と入力すると、ブログのURLは「https://saruwaka-web.tumblr.com/」となります。ブログタイトルの設定方法は後ほど説明します。

手順4:興味のあるトピックを選ぶ

フォローする人を選ぶ

関心のあるトピックを5つ以上選びます(でないと先に進めません)。Tumblrを利用開始したときに、選んだトピックについてのおすすめの投稿を表示してくれるようになります。

nextをクリック

例として綺麗な写真をたくさん表示してくれそうな「旅」「自然」「イラスト」などを選んでみました。その後[Next]をクリックします。

ダッシュボードが開く

画面が開く

ダッシュボードと呼ばれるTumblrのメインページが開きます。ここで投稿をしたり、他の人の投稿を見たりします。

このまま使い始めることもできるのですが「メール認証」も早いうちに済ましておきましょう。

手順5:メール認証して登録完了!

Tumblrは開いたままにして、登録したアドレスのメールボックスをチェックしましょう。現在Tumblrの運営元はアメリカのYahoo!です。そのため、Yahoo!から「Please verify your account」という件名のメールが届いているはずです。

メールをチェック

本文に「なんちゃらhereなんちゃら」と書かれているかと思います。この中のhereをクリックします。

登録完了画面

このような画面が表示されたら、登録完了です。お疲れ様でした!

[Return to…]というボタンを押すとYahooのページに飛ばされてしまうので、先程のTumblrのダッシュボードに戻りましょう。ダッシュボードページはブックマークするなどして、いつでもアクセスできるように保存しておくことをおすすめします。

2. 基本的な使い方

画面が開く

ここからはTumblrの画面の見方や使い方を説明していきます。ダッシュボードを開いておきましょう。

投稿例

下にスクロールしていくと、このような他の人の投稿がずらっと表示されます。

基本的にはフォローしたユーザーの投稿が表示されるのですが、はじめは「興味のあるトピックについてのおすすめの投稿」や「Tumblr日本語スタッフ」による投稿などが表示されます。

フォローする

フォローをクリック

左上にユーザー名やアイコン画像が表示されています。フォローしたいアカウントがあった場合には[フォロー]をクリックします。

今後、フォローしたアカウントの投稿がダッシュボードに表示されるようになります。

おすすめのアカウント

以下のページでおすすめのアカウントがまとめられています。誰をフォローしたら良いか分からない場合には参考にすると良いでしょう。

フォローの管理(解除)

PCの場合フォローの管理

フォローしているアカウントの確認や解除をしたいときは、①画面右上の人型アイコン ⇒ ②[フォロー]をクリックします。

スマホの場合スマホからの場合 フォローをクリック

スマホの場合は[メニューアイコン]⇒[フォロー]をタップします。

フォローの管理

これでフォローしているアカウントが一覧で表示されます。[ー]ボタンを押せばフォローが解除されます。

リブログする

リブログとは、ツイッターでいうリツイート機能です。シェアと言い換えても良いでしょう。気に入った投稿をリブログすることで、自分の投稿一覧の中に表示されるようになります。

リブログ

リブログするには、投稿の下の方にあるを押します。

コメントをつけてリブログ

するとこのような画面が開きます。「説明」の枠内にコメントを入力することもできます(空欄のままでもOK)。[リブログ]を押して完了です。

リブログした投稿

リブログした投稿はこのように表示されます。1番下には自分がつけ加えたコメントが載っています。

スキ(お気に入り機能)

「スキ」はツイッターでいう「いいね(旧ふぁぼ)」機能ですね。

スキ

「スキ」ボタンは投稿の右下にあるマークです。

スキを押した投稿は、後からまとめて見返すことができます。

PCの場合「スキ」の管理

PCの場合、⇒[ スキ]とクリックします。

スマホの場合スマホからの場合 スキをクリック

スマホの場合、メニューバーをタップした後に[ スキ]を選びます。

これで「スキ」した投稿が一覧になって表示されます。

投稿する

次に、自分の好きな記事(文章)や画像を投稿してみましょう。

PCの場合投稿するメディアの種類を選ぶ

まず投稿の種類を選びます。テキストだけでなく、画像や動画、音声、引用文など様々な種類から選ぶことができます。

スマホの場合スマホからの場合 投稿を作成をクリック スマホ投稿画面

スマホの場合、[メニューアイコン]⇒[投稿を作成]をタップします。すると1番下のような投稿画面が表示されます。好きなメディアの種類を選んで、投稿をしましょう。

例:画像を投稿してみる

画像の投稿方法

例えば画像を投稿するときには、①カメラのアイコンを押し ②[画像を選んでください]を押してアップしたい画像を選び ③文章ものせたい場合は入力し、最後に[投稿する]を押します。

投稿された写真が表示される

投稿するとこのように画像+入力したコメントが表示されます。アイコンをクリックすれば、後からでも編集可能です。

サルワカくんの顔(通常)
サルワカくん

ちなみに動画の場合、YouTubeのURLを入力して貼り付けるようなこともできます。

3. ブログとして表示させてみよう

Tumblrをダッシュボードだけで楽しむのは、少しもったいないのではないかと思います。なぜならTumblrでは自分の投稿をオリジナルデザインのページで表示させることができるからです。つまり、ブログやウェブサイトのように活用することができるのです。

自分のブログを見てみよう

ブログは登録時点で作られており、アクセスするためのURLは以下のようになっています。

https://ユーザー名.tumblr.com/例:https://saruwaka-web.tumblr.com/

ユーザーネーム

ユーザー名はアカウントを作るときに登録した文字列です。投稿した時にアイコンの右に表示されるやつですね。

自分のブログのデザイン

アクセスしてみると、このようなページが表示されます。初期設定のデザインはあまりカッコよくないですね…。1つずつ見た目を変えていきましょう。

サルワカくんの顔(喜)
サルワカくん

このページがブログのトップページになるので、ブックマークしておきましょう。なお、このページはTumblrに登録していない人でも見ることができます

広告を消す

※ ここからの設定はパソコンやタブレットなどの画面で行うことをおすすめします。
2016年7月〜Tumblrのブログページに広告が表示されるようになりました(おそらく下の方に表示されているはずです)。ただし、正当な方法で簡単に非表示にできます。

歯車アイコンをクリック

右上に表示されているをクリックします。

ブログ内広告をオフに

設定画面が開きます。下にスクロールすると[ブログ内広告]という項目が出てくるので、クリックしてオフにします。

これでブログページから広告が消えます。

ブログ名を変えてみよう

ブログのタイトルが「題名未設定」になってしまっているので、ちゃんとした名前にしましょう。

テーマの編集をクリック

ブログの設定画面で上の方にある[テーマの編集]をクリックします。

テーマの編集画面

「テーマの編集」という画面が開きます。

タイトルを書き換え

左のサイドバーに「タイトル」という部分があるので、ここに好きなブログタイトルを入力します。

反映される

入力した名前がデザインにリアルタイムに反映されます。今回はサルワカの別サイトということで「SARUWAKA+」という名前にしました。もちろん日本語でもOKです。

保存

[保存]ボタンを押して変更を確定します。

4. アイコンを変える

次にアイコンを変えてみましょう。

テーマの編集ページのプロフィール画像を変更

テーマ編集画面のサイドバーに[プロフィール画像]という項目があるので、その右側のをクリックします。

画像の選択ウィンドウが開くので、好きなものを選びましょう。

変更例

変更が反映されます。とくに理由なくクマの画像にしてみました。

ここで選んだ画像はブログだけでなく、ダッシュボードなどでのプロフィールアイコンとしても使われます。

5. ブログのデザインをカスタマイズ

Tumblrにはたくさんの無料テンプレートが用意されており、これを活用することで一瞬でオシャレで本格的なブログデザインに変えることができます。

テーマを探そう

こちらのページで超高品質な無料Tumblrテンプレートをまとめています。きっとお気に入りのテンプレートが見つかるはずです。

「このデザインにしたい」というものを見つけたら[詳細を見る]ボタンをクリックして、テーマページを開きましょう。

インストールしよう

インストール

テーマのインストールはとても簡単。テーマページ右上の[設定する]をクリックするだけです。

複数のブログを持っている場合には、テーマを適用するブログを選ぶことができます。

実際に変えてみる

例としてCandice Themeというテーマをインストールしてみます。さきほどの説明の通り、ページを開き[設定する]を押すだけです。いざ設定してみて気に入らなければ、別の良さげのテーマをインストールすれば良いですね。

candice theme

このような表示になりました。まだヘッダー画像が設定されていなかったりするので、ちょっと微妙な見た目ですね。

デザインをカスタマイズする

細かいデザイン設定を変えて、オシャレな見た目にしていきたいと思います。

編集画面を開く

edit themeをクリック

画面の右上に「Edit theme」と小さく表示されていると思います。ここをクリックして、テーマ編集画面を開きましょう。

ヘッダー画像を設定

ヘッダ画像を設定

サイドバーの[ヘッダ画像]のカメラアイコンをクリックします。画像の選択ウィンドウが開くので、なるべく綺麗な写真を選びましょう。

写真に困ったらUnsplashから探すのがおすすめです。無料の超オシャレな写真素材が見つかります。

表示例

今回はヘッダ画像にはオーロラの写真を設定してみました。上に表示される文字が白なので、少し暗めの写真が良いでしょう。

なお、このテーマだと下にスクロールすると、自分の投稿やリブログが表示されます。そこまで触れると長くなってしまうので、今回はヘッダーのカスタマイズにだけ触れることにします。

日本語用のフォントを設定してみよう

Tumblrではほとんどのテーマが海外の人により作られているため、日本語フォントの設定が少し微妙になっています。フォントは全体の印象をかなり左右するので、最適化しておきましょう。以下におすすめのフォント指定を書いてみました。特にこだわりのない方はこのコードをまるっとコピーしてください。。

body,h1,h2,h3,h4 { font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS Pゴシック','MS PGothic' }

詳細設定

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

カスタムcss

[カスタムCSSを追加]という欄があるので、ここにコピーしたコードを貼り付けます。これでフォント指定は完了です。しばらくすると、プレビュー画面に反映されるはずです。

なお、Font-familyをドラッグするだけで作れるツールも作ってみたので、よろしければ使ってみてください。

「Font-familyって何?」という方はこちら↓の記事が参考になるはずです。

Google Fontsを使う

グーグル・フォントとは使用できるフォントの幅を広げてくれるサービスです。現状ちゃんと使えるのは英語フォントだけですが、英語のフォントをオシャレなものにするだけでも全体の印象はかなり変わります。詳しくは以下の記事を読んでみてください。

例えば「Quicksand」というフォントを導入したいときには、さきほど[カスタムCSS]に貼り付けたコードを以下のコードにまるっと貼り替えます。

@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');/*フォントデータを読み込む*/ body,h1,h2,h3,h4 { font-family: 'Quicksand','Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS Pゴシック','MS PGothic' }

これで英語フォントにはQuicksandが使われるようになります。

完成

フォントを変えるとこのようなデザインになりました。なお「サルワカのTumblrページです」という文字は、[説明]という欄に入力したものが表示されています。

6. もっとカスタマイズしよう

テーマ編集画面のサイドバーを下にスクロールすると、ずらずらと英語で設定項目が並んでいるかと思います。それぞれデザイン設定なのですが、テーマごとに項目が異なるため、ここでは説明することができません。少し大変ですが、英単語の意味を調べるなどして、1つ1つ触っていくのが良いですね。また、実際にON/OFFを切り替えてみてプレビュー画面の変化を見て何についての設定なのかを見ていくの良いでしょう。

サルワカくんの顔(通常)
サルワカくん
Tumblrを使ってより本格的なWebサイトを作る方法は、他の記事で解説します。
サルワカ