はじめに

Tumblr（タンブラー）って聞いたことありますか？「なんとなくWebで字面だけは見たことある」という方は多いのではないでしょうか？

「使ってみたいけど何のサービスかわからない…」

「サイトが英語だから抵抗ある…」

「設定の仕方がわからない…」

という人の為に、Tumblrの始め方と楽しい使い方を細かくご紹介したいと思います。

Tumblrとは？どんなサービス？

日々インターネットをしていて、「この画像おもしろいなあ～」や、「この文章素敵だなー」と思うことはありませんか？もちろんありますよね！

でも、その「いいなあ～」と思っているものを、どこにも保存やメモをせずに、ただ見て、終わっていませんか？

Tumblrは、その「いいなあ～」と思ったものをなんでもスクラップできる、というサービスです。

ネタ画像を集めるもよし、感動した文章を集めるもよし、自分のお仕事に役立ちそうな情報を集めるもよし！

日々のインターネットを見ている中で気に入った画像や文章を、そこに保存していくだけで、自分の好きなものが集まった、自分だけのスクラップページができちゃうということです！

まずはアカウントを取ろう

アカウントを取るのは、超簡単です！英語が全く分からなくても全然問題ありません。

まずはその、超簡単なアカウントの取り方です。

STEP1

tumblr
Tumblrのサイトにアクセスします。

STEP2

そこの下にある、３つの白いしかくの中に、

• 自分のメールアドレス
• パスワード
• 希望するＵＲＬ

を入力し、横にある緑色のStartPosting!のボタンを押します。

STEP3

確認画面が表示されます。画面に表示されたちょっと読みにくい文字を解読し、下にある白いしかくの中に入力し、緑色のI'm human!のボタンを押します。

STEP4

ボタンを押すと、次の画面でいきなり「Create your first post!」というのが出ます。

そしてその後に、「Now customize your blog!」と出て、自分のTumblrの（このblogの）タイトルを入れるところと、アイコンを入れるところが現れるので、それぞれに入れ、下のボタンを押します。

すると、新しくできた自分のTumblrに飛びます。

これでもう自分のTumblrができました！

ダッシュボード（編集画面）はこんな感じ。

最初から入っている英語のpostはTumblrスタッフのアカウントです。これはあとでこのアカウントのフォローを外せば、表示されなくなります。

編集画面から、自分のTumblrページを見るには、ダッシュボードに大きくある自分のアイコンを押します。（この場合、はグレーのウサギのアイコン）

自分のアイコンを押して、飛んだ先には、できあがった自分のTumblr。もちろんまだなにもありません。右上のDashboardボタンから、いつでもダッシュボードに戻り、編集ができます。

他の人のTumblrを見てみよう＆フォローしてみよう！

Tumblrおすすめアカウント

世の中には、おもしろい画像や文章を集めまくっている人たちがいます。個人的なおすすめとして、いくつか紹介しますので、よかったら見てみてください。

• otsune tumblr まとめサイト 画像保管庫Q
• Maido! Tumblr
• :: H & A :: tumblr
• apple arts
• dvdp
• 人喰い生物 対 覆面人間
• inspire me now

実際にフォローしてみる

「おもしろいな～」と思う人のTumblrを見つけたら、そこのページの右上にある「Follow」というボタンを押します。

すると、その人のフォローしたものが、自分の編集画面にあるタイムラインみたいなところに流れてきます。

こちらの方のTumblrは可愛い女性の写真を集めているようですね。この人もフォローしてみます。

すると、また、自分の編集画面にあるタイムラインにこの人のTumblrしたものも流れてきます。

というように、自分が何もしていなくても、おもしろいものをTumblrする人をどんどんフォローすれば、勝手におもしろいものや素敵なものが集まってくる、というわけなのです。

「いいな」と思ったものを自分のTumblrに投稿する（Reblog）

流れてきたものをみて、「あ、いいな」と思ったら、自分のTumblrにも投稿してみましょう。

流れてきたものの右上に「reblog」というボタンがあります。ここを押すと、、

こんな画面に変わります。これ、reblogしますよ～という画面ですね。

下の方には、キャプションを入力できるところがあります。そこには、誰からreblogしたのか、すでにＩＤと、もともとついていたキャプションがついています。内容がOKなら、下の「Reblog Post」をクリック。

これで、自分のTumblrにも投稿されました。

実際の自分のTumblr画面にいって、プレビューを見てみるとこんな感じ。ちゃんと投稿されていますね。

自分が見つけたものをTumblrする

誰かが流したものを投稿するのではなく、自分で見つけたいいものを投稿するやり方です。

画像をTumblrする

たとえば、こんなサイトを見ていて、この画像いいなーとTumblrするとします。

ダッシュボードの上の方にある、自分のアイコンの横に、Text、Photo…などと並んでいるアイコンの中から、Photoを選びます。

するとこんな画面になるので、そこに、

• Tumblrしたい画像のURL
• この画像に対するメモ（なくても可）
• 画像を押したときに飛ぶリンク

を入力し、下のCreatePostを押します。

投稿されました！

リンクをTumblrする

このリンクとっておきたいな！というリンクだけも、投稿できます！
ダッシュボードの上の方にある、アイコンの中から、Linkを選びます。

すると、何をリンクしますか、的な画面になるので、

• リンクのタイトル
• リンクのURL

を入れてCreatePostを押せばＯＫ！

投稿されました！

文章をTumblrする

ブログを読んでいて、この一行すごい心に響くわ…、と思ったら、その文章もTumblrしちゃいましょう。
ダッシュボードの上の方にある、アイコンの中から、Quoteを選びます。

次の画面で

• 引用したい文章
• 引用元とメモ

を入れてを入れてCreatePostを押せばＯＫ！

投稿されました！

もっと簡単にTumblrする

以上が一通りの使い方ですが、これ以上にもっと簡単な使い方があります。

それがFirefoxのアドオン、「Tombloo」です。

firefoxでしか使えないのですが、使ってみると超～～簡単で、この世の気に入ったもの全てをTumblrするのも夢じゃありません。

Tomblooの詳しい説明、firefoxへのインストール方法などは、こちらのサイトを参考にしてください。インストールも簡単ですぐ終わります。

Github Tomblooとは

Tomblooを使って、画像をTumblrする

こんなサイトを見ていて、この画像をTumblrしたいな～と思ったら、

その画像の上で、右クリック。すると、Tomblooをインストールした後には、こんなのが出ますので、その中の「Shere-Photo」をクリック。

それだけでもう投稿されています！超簡単！クリックしかしていない！

Tomblooを使って、文章をTumblrする

同じように、文章も、超！簡単にTumblrできます！

Tumblrしたい部分をマウスで選択して、右クリック！そこに出た「Shere-Quote」をクリックするだけで…

投稿されています！

ダッシュボードではなく、自分のTumblrページに行ってみるとこんな感じ。着々と残したいものを残せています。

最近、Facebook や Twitter に飽きてきた人も多いのでは？

今回は次に流行すると思われる Tumblr について紹介します。

 

Tumbler とは何ですか？

・簡単に動画や画像、リンクなどの投稿ができる 

・Twitterより表現が豊か。

・簡単におしゃれなブログが作れる。

・デザインは自由自在。

ブログとTwitterとWordpressを合体させて良い所取りしたようなサービスです。

 

Tumbler のはじめ方

まずはトップページの登録ボタンから Tumblr に登録します。

 

つぎに好きなカテゴリーを３つ選びましょう。

とりあえず、スキップしてもOK!

 

Tumblr から登録確認メールが送られてくるので、「メールアドレスを認証する」をクリックしましょう。

 

たったこれだけで登録完了！すぐに Tumblr をはじめられます！

Facebook や Twitter のようにフォローしてるアカウントの記事やお勧めの記事がウォールに表示されてます。

Tumbler のはじめ方。Tumbler の遊び方。

1. get_bloginfo( $show, $filter )
   $show に対応した値を返す。
2. bloginfo( $show )
   上記の get_bloginfo で取得した値を echo する。
   詳しくはこちら→WordPress の get_bloginfo, bloginfo を詳しく見る。
   Webページに出力する値を中心にまとめられているようです。出力する必要のなさそうなプラグインのディレクトリだとか、管理画面のURLなどは対象外。
3. get_stylesheet_uri()
   =get_bloginfo( ‘stylesheet_url’ )
4. get_stylesheet_directory()
   =get_bloginfo( ‘stylesheet_directory’ )
   現在使用中のスタイルシートのディレクトリパス。管理画面で指定したテーマディレクトリを参照します。親テーマを指定した場合もこれは変わりません。
5. get_stylesheet_directory_uri()
   =get_bloginfo( ‘stylesheet_directory’ )

   使用例

   1	/* スタイルシートを読み込む. head 内で wp_head() よりも先に記述 */

   2	$handle = 'my-style';

   3	$css_url = get_stylesheet_directory_uri() . '/my-style.css';

   4	wp_register_style( $handle, $css_url );

   5	wp_enqueue_style( $handle );

6. get_template_directory()
   使用中のテーマディレクトリ。親テーマを定義している場合、この値は親テーマのディレクトリパス。親テーマを指定しない場合、get_stylesheet_directory() と同じ値。
   /wp-includes/default-constants.php で TEMPLATEPATH に、この値が定義される。
7. get_template_directory_uri()
   使用中のテンプレートディレクトリのURL
8. get_theme_roots()
   テーマディレクトリのベースネーム
   (例) /themes
9. get_theme_root()
   =get_bloginfo( ‘template_directory’ )
   テーマディレクトリの絶対パス
   (例) /root/account/public_html/wp-content/themes
10. get_theme_root_uri()
    テーマディレクトリへのURL
    (例) http://example.com/wordpress/wp-content/themes
    • ※使用中のテーマディレクトリのURLは get_bloginfo( ‘template_url’ ) で取得。
      (例) http://example.com/wordpress/wp-content/themes/my-template
    • ※使用中のメインスタイルシートのURLは get_bloginfo( ‘stylesheet_url’ ) で取得。
      (例) http://example.com/wordpress/wp-content/themes/my-style/style.css
11. site_url( $path = ”, $scheme = null )
    = get_bloginfo( ‘wpurl’ )
    ダッシュボードの「WordPress のアドレス (URL)」に設定した値。内部的に次の get_site_url( null, $path, $scheme ) を呼び出している。
12. get_site_url( $blog_id = null, $path = ”, $scheme = null )
    上記のsite_url のもとになる関数。 blog_id の引数を渡せる。
13. home_url( $path = ”, $scheme = null )
    引数を渡さない場合 get_bloginfo( ‘url’ ) と同値。 ‘siteurl’, ‘home’ も同じ値が返るが非推奨
    ダッシュボードの「サイトのアドレス (URL)」に設定した値。
    内部的に、次の get_home_url( null, $path, $scheme ) を呼び出している。
14. get_home_url( $blog_id = null, $path = ”, $scheme = null )
    上記のsite_url のもとになる関数。 blog_id の引数を渡せる。
15. admin_url( $path = ”, $scheme = null )
    管理画面用のURL。get_admin_url( null, $path, $scheme )
16. get_admin_url( $blog_id = null, $path = ”, $scheme = null )
    指定したブログIDの管理画面用のURLが返る。ディレクトリ名の ‘wp-admin/’ は決め打ち。
    フィルタ ‘admin_url’ を適用。
17. plugin_dir_path( $file )
    $file のディレクトリパスが返る。関数名に「plugin」とありますがまったく関係なし。単に ディレクトリパスの末尾にスラッシュをつけたものが返ってきます。しかも末尾は「スラッシュ」固定ですが、それより前にあるセパレータは環境依存のまま。中途半端な印象の関数です。コアシステムでも一切使用されていない意味不明な存在。
    v.3.1現在、デフォルトでこの関数を参照しているのは  wp-multibyte-patch プラグインのみ。dirname() を用いたほうが絶対にいいだろと思う。歴史的な意味があったのか知らん。
18. plugin_dir_url( $file )
19. plugins_url( $path = ”, $scheme = null )
    プラグインの「ルートディレクトリ」までのURLを返す。
    末尾にスラッシュは付かない。
20. plugin_basename( $file )
    引数で渡したファイルパスの文字列から plugin の「ルートディレクトリ」以下のパスを切り捨てて、ディレクトリセパレータを’/’に変換して返す。先頭にセパレータは付かない。
    プラグインのサブディレクトリに含まれているファイルにも対応。
    pluginディレクトリに含まれていないファイルパスを渡した場合は、切り取りは一切行われずにセパレータの変換のみを行う。

    使用例

    プラグインファイルのURLを取得する。

    1	$plugin_file_url = plugins_url() . '/' . plugin_basename( __FILE__ );  // __FILE__ までのURLが返る。間のスラッシュを忘れないこと。

    2	// 同じことは以下のようにも記述できる

    3	$plugin_file_url = plugins_url( plugin_basename( __FILE__ ) );

    4

    // これは間違い

    5	// $invalid_url = plugins_url( __FILE__ );

21. content_url( $path = ” )
    (カレントブログの) wp-content ディレクトリへのURLを返す。末尾にセパレータは無し。
    引数を渡せばそれを繋げたパスにして返る。
22. includes_url( $path = ” )
    (カレントブログの) wp-includes ディレクトリへのURLを返す。末尾にセパレータは無し。
    引数を渡せばそれを繋げたパスにして返る。
23. network_site_url()
24. network_home_url()
25. network_admin_url()
26. wp_login_url( $redirect = ” )
27. wp_logout_url( $redirect = ” )
28. wp_lostpassword_url( $redirect = ” )

CSS3を使ってグラデーションを作るとき、IEの場合はIE独自のfilterを用います。

IE5.5以上で有効なので、ほぼもれなく対応できます。

filter: progid:DXImageTransform.Microsoft .gradient(GradientType=0,startColorstr='#ffffffff', endColorstr='#ffdddddd');

GradientTypeが【引数】で、startColorstrは【開始の色】、endColorstrは【終了の色】です。

引数「GradientType」は、縦方向のグラデーションなら【0】、横方向のグラデなら【1】をいれます。

色の番号は通常の6ケタに、2ケタ加えた8ケタです。

最初の２桁は色の透明度の指示です。

00（透明）〜FF（不透明）。

【#FFFFFFFF】なら、【FF（不透明）】＋【FFFFFF（白）】という意味になります。

 

Webkit系（Chrome、Safari）の

background: -webkit-gradient(linear, center top, center bottom, from(#FFFFFF), to(#DDDDDD));

や

mozilla系（Firefox）の

background: -moz-linear-gradient(top, #FFFFFF, #DDDDDD);

と一緒に使えば、既存のブラウザはほぼ対応できます。

wp-includes/locale.phpの139行目あたりから下のこれ↓を

↓こういう風に書き換えます

そしたら表示する場所のPHPのコードのフォーマットをy/M/dとかに変えます。
しかし、これをやってしまうとwp_get_archivesで表示させてるアーカイブも2009年Augustみたいな和洋折衷表示でちょっとかっこわるくなってしまいます。
なので、今度はwp-includes/general-template.phpを開いて820行目あたりの「%1$s %2$d」というところに↓

↓「%1$s, %2$d」とカンマを書き足します。