Fork me on GitHub

JavaScriptの最新情報を紹介する週刊ブログ

Tumblrをブログとして利用する-実践編-

2011年02月23日 Edit on GitHub 編集履歴を見る

以前書いたTumblrをブログとして使うためにやるべき事 | Web scratchの焼き直しと投稿手法などについて詳細を追加したものです。

目次
   1. ブログ用サブtumblelogを作成
   2. ドメインの設定
   3. テーマの設定
   4. アクセス解析、DISQUSの設定
   5. ブログ内検索
   6. 記事の投稿について(new)

(実践編とあるがそれ以外はありません)

  • ブログ用サブtumblelogを作成

メイン(アカウントID)のTumblelogはなぜか共同更新など省かれている機能があるため、「Dashboard」の右側にあるメニューで「+Create a new Tumblelog」からブログ用のサブTumblelogを作成するのがよいと思います。
記事の投稿者名にはメインのIDが使用されるようなので、サブと言ってもメインと完全に切り離されたものではないことに注意しましょう。
-【連載】『Tumblr』のおさらい (12) 複数人でTumblelogを共同更新してみる | ネット | マイコミジャーナル

  • 独自ドメインの設定

Tumblrはドメインを設定できるため、ドメインを持っているなら活用しましょう。
ドメイン側の設定としてDNSレコードでTumblrのIPアドレスを振って、Customizeの「Info」 メニューの一番下にある 「Use a custom domain name」 にチェックして取得したドメインを設定することで反映できます。
http://www.tumblr.com/check_domainというチェックツールも用意されているので正しく設定されているかを確認しましょう。
-独自ドメインで Tumblr を使う | WWW WATCH

  • テーマの設定

Tumblrのテーマは「Theme」タブからテンプレートか自分でカスタマイズすることができます。そこそこ細かくいじれるため、既存のテーマやCreating a custom HTML theme | Tumblrを参考にしてテーマを作成するのが手っ取り早いです。どこまでカスタマイズするかは自由ですが、Autopagerizeが動かないと鈍器で殴られるので下を参考に対応しましょう。
-Autopagerizeが動かないtumblrなんて… – otsune tumblr まとめサイト 画像保管庫Q

またテーマに使用する画像やJavaScriptやCSSなどの静的なファイルはUpload a static fileにアップロードして利用することができます。

当サイトでは最近の投稿やタグクラウドを表示していますが、これはTumblrでタグリスト/新規投稿リストを出力してみる | Mach3.laBlogを利用してJavaScriptでAPIをたたいて毎回表示させているだけです。
-gist: 838726 - GitHub

  • アクセス解析、DISQUSの設定

ブログとして使いたい場合アクセス解析などをしたい場合があると思います。
TumblrではGoogle Analyticsに標準で対応しているテーマが多いため、「Apperence」タブのGoogle Analytics UA CodeにUA-xxxと入れるだけ使用できることがほとんどです。
しかし、多くの場合は古いGoogle Analyticsのコードであるため、非同期トラッキング コードに変更するといいかと思います。
変 更のために、まず元々ある{block:IfGoogleAnalyticsUACode}～ {/block:IfGoogleAnalyticsUACode}を削除してから、次のようなコードを</head>前に書いておくことで 非同期のトラッキングコードを利用できます。

{block:IfGoogleAnalyticsUACode}
<script type="text/javascript">
var _gaq = _gaq || [];
  _gaq.push(['_setAccount', '']);
  _gaq.push(['_trackPageview']);
  (function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
{/block:IfGoogleAnalyticsUACode}

Google Analyticsの非同期コードを入れたついでにGoogleウェブマスター ツールでsitemap.xmlを登録しましょう。使ってるTumblrのURLを追加して、所有者の確認で”Google Analytics アカウントにリンク”を選べば簡単に登録できます。(非同期コードを仕込んでいる必要がある)
サイト設定→サイトマップから”サイトマップを送信”でサイトマップのURLを追加します。
サイトマップのURLは http://<ドメイン>/sitemap.xml に自動的に生成されていると思うのでそれを指定します。

SEOを気にする人は以下を参考にMetaタグなどの設定をするとよいかもしれません。

  1. 4 Tumblr SEO Tips – Jauder Ho – tumblr, seo, sitemap, – links and things
  2. tumblr. note4 tumblrの４つのSEO対策 – 花あそびエコブログ (上の訳)
  3. tumblrがgoogle sitemaps対応になってた « ku
  4. SEO on Tumblr Blog | SocialBlogr

DISQUSについて

Tumblrでreblogやlikeの表示やコメント欄の作成にはDISQUSを利用すると簡単に設定できます。
こちらもアクセス解析と同じように「Apperence」タブのDisqus ShortnameにDISQUSのIDを入れることで利用できます。(テーマにDISQUSの表示についての記述が必要となります)

  • ブログ内検索

Tumblrで日本語検索をするいくつかの方法 – conflict errorからわかるようにTumblrの検索は日本語が通らない(タグでは通る)ので、何かしらの代用手段が必要になると思います。

これを解決するためJSer.infoではTrunk.lyというサービスを利用します。Trunk.lyは TwitterやRSSからリンクを取り込んで検索する事ができるサービスです。検索対象に自分のTumblrのRSSを取り込めば、取り込んだ時点から の内容は検索が可能になります。日本語も問題なく検索でき、記事中に出てきたリンク先も解析対象にするため検索の取りこぼしは少ないです。
Trunk.lyサイト内ならインクリメンタルサーチもできるため、検索機能自体はかなり優秀な印象です。
-All links shared by JSer | Trunk.ly: Never forget a link(このサイトのアカウント)

サイト内から検索結果にジャンプできるようにformのactrionにtrunk.lyを指定すると検索窓の代わりに使えたりします。

<form action="http://trunk.ly/jser/" method="get">
<input type="text" id="search" name="q" value="Lost something in the post?*" />
</form>

当サイトの右側にある検索窓はそれの実例です。

  • 記事の投稿について

ここからはJSer.infoではどのように記事を投稿しているかの紹介というか例みたいなものです。
まずは投稿の仕方ですが、基本的にはText Postから投稿を行います。(他のは妙に制限があったりするため)
またTumblrでは簡易なリッチエディタを使用して記事を書くことができますが、リッチエディタが妙に縦に短いためuserContent.cssを利用して少し拡張しています。

/* Tumblr */
@-moz-document url-prefix("http://www.tumblr.com/edit/"),
               url-prefix("http://www.tumblr.com/tumblelog/"){
    #post_two_ifr{
        height:500px!important;
    }
}

userContent.cssで上記のようにheightを少し変更して使用しています。(Wordpressみたいにリサイズ機能つければいいのに)

また記事を閲覧中に直ぐに編集ページにいけるように、Tumblr - Edit linkというGreasemonkeyを使用しています。(@includeは各自のドメインに直してください)
インストールすると各記事の左上にEditのリンクが表示されるようになります。

このサイトのようにプログラミングを扱う場合はコードを記事中に書き込みたい場合もあると思います。
Gist - GitHubのような埋め込みコードを利用する方法もありますが、静的にシンタックスハイライトを適応したコードを表示するためにVimColor - source code highlightを利用してコードをハイライト用のHTMLタグを生成して利用しています。
毎回サイトに行って生成するのは面倒なのでクリップボードの内容から生成してくれるようにClipboard_to_VimColorHTML.ngというNILScriptを書いて利用しています。クリップボードにハイライトしたいコードをコピーして実行するとシンタックスハイライト用のHTMLがクリップボードにコピーされます。(JavaScriptオンリーです)
シンタックスハイライト用のHTMLとなったコードには以下のようなCSSを適して表示しています。

pre{
  font-family: monospace;
  background-color: #FFEEAA;
  border:1px solid #000000;
  font-size:90%;
  overflow:auto;
  padding:5px;
  width:97%;
}
span.synSpecial{
  color: blue;
}
span.synType{
  color: blue;
}
span.synComment{
  color: green;
}
span.synPreProc{
  color: blue;
}
span.synIdentifier{
  color: teal;
}
span.synConstant{
  color: #c00000;
}
span.synStatement{
  color: blue;
}

という感じのCSSを適応しています。

最後にJSer.infoの記事の手順としては情報集めが一番大事なため、記事を書くための労力を最小限にしてTomblooのクロスポストを利用して下書きを情報集めと同時に書いています。
以下のようなローカルにHTMLを生成するTomblooパッチを書いて利用しています。
-gist: 781466 - Tomblooのデータフォルダに年月フォルダ内htmlで記録するパッチ- GitHub

個人的にはWikiHubのようなところと連携できるように書き直した方がもっといい感じになる気がしています。Tomblooパッチの方に話を戻しますが、紹介リンクの形式は

JSer.info
http://jser.info/

のようにblockquoteを使用しています。これはTumblrでreblogされるため常に自サイトのCSSが適されるわけではないことを想定しているからです。TumblrのダッシュボードやRSSリーダーなどではblockquoteはだいたい同じようなスタイルになっているので比較的表示が安定していることなどからこういう書き方になっています。

以上でTumblrをブログを使う実践については終わりですが、Tumblrはちょっと不安定なことがあったりしますが、あまり問題なく使えるのでブログの選択肢としては結構ありだと思います。
この手のサービスを使う場合にはPosterousが競合として挙げられることも多いですが、どちらもいいところはあるので自分に合ったものを使うのが一番いいと思います。

この記事へ修正リクエストをする
JSer.info Slackに参加する