Information

Twitterの本を書きました。

twitterコミュニケーション・バイブル

RSS Feeds

Posted on January 7, 2008 at 11:26 pm

Tumblrをちょっとだけパワーアップしてみました

Tumblrを表から見てますか？

毎日楽しく見て、感じて、ReblogしているTumblr
お気に入りTumblrもたくさん見つけることができました。
でも表から普通のblogを見るように眺めることはほとんどありません。
1番最初、そのTumblrをfollowする前にザッと2.3ページ遡るくらいで、あとはDashboardかlivedoor Readerから見ています。
なのでテーマだけはいろいろ変えてはみたものの、表をいろいろいじることにはあまり必要性を感じていませんでした。
ただ、以前誰かに「AutoPagerizeに対応して欲しい！」と言われたことはありました。
(その時はどうせ見てる人は少ないだろうし少数意見過ぎると思ってスルーしてしまいましたが)

お正月休みで時間もあったのでAutoPagerize対応以外も表面のTumblrにあれこれ設置してみたのでまとめてみます。

AutoPagerize対応

TumblrとAutoPagerizeは切っても切れない関係なはずなのにずっと未対応のままですいません。
Tumblrデフォルトテーマを利用している場合は問題無いのですが、たまたま今利用しているテーマは個人で配布されているもの。
AutoPagerizeに対応するにはコードを修正する必要があります。
参考にさせていただいたのはこちら↓

取り上げられているテーマとワタシが利用中のテーマは異なりますが、基本的にやることは一緒。
コンテンツの繰返し部分と次ページへのナビゲーション部分を探します。

対応方法

1.繰返し部分({block:Posts}～{/block:Posts})をAutoPagerize用のクラスで囲む。

PLAIN TEXT
CODE:
  1. <div class=“autopagerize_page_element”>
  2. {block:Posts}
  3. (中略)
  4. {/block:Posts}
  5. </div>
  6. <div class=“autopagerize_insert_before hidden”>dummy</div>

2.次ページへのリンクにrel属性を追加

PLAIN TEXT
CODE:
  1. <a href=“{NextPage}” class=“next” rel=“next”>next page</a>


前ページへのリンクにもrel属性を追加した方がいいとのotsuneさんのブクマコメントを読み、rel=”prev”も追加しました。

PLAIN TEXT
CODE:
  1. <a href=“{PreviousPage}” class=“prev” rel=“prev”>previous page</a>

対応方法がわかればどんなテーマにもすぐ適用できますね。
今後は面倒くさがらず、テーマを変更した際は対処したいです。

検索窓設置


このスクリプトはページを開くたびに全POSTを取得しに行くためTumblrに高負荷をかけていることを教えていただきました。現在は外しています。(thx! os0x)

Tumblrにはカテゴリーもタグも検索機能もありません。
DashboardではPOSTを種類別等でソートできますが、過去の膨大なPOSTの中から目当てのPOSTを探すのには役立ちません。
Googleの検索窓を設置するという方法を試したこともありますが、最近インクリメンタルサーチの検索窓設置についてのPOSTを見かけたので今回はこちらを設置してみることにしました。
使わせていただいたのはこちら↓

設置方法

1.Head内にインクリメンタルサーチ用のコードを追加

PLAIN TEXT
CODE:
  1. <script src=”http://www.thisismydevsite.com/tumblr.js” type=”text/javascript”></script>

2.検索窓を表示させたい箇所に以下のコードを追加

PLAIN TEXT
CODE:
  1. <script type=”text/javascript”>Tumblr.searchBox()</script>

3.必要に応じてHead内に検索窓と検索結果用CSSを追加

jsファイルはなるべく個々のサーバーに置いて欲しいとのことが書いてあったので、後述するShuffleボタンのコードとまとめて自サーバーにUPして使っています。

検索イメージはこんな感じ↓

インクリメンタルサーチ

テキスト系のPOSTが多い場合うろ覚えのフレーズの一部分など検索してみるといいですね。
ワタシの場合残念ながらPhotoタイプのPOSTが大半を占めているのであまり使用頻度は多くなさそう。
「今後タグをつけていく習慣をいつけてみようかしら…」などと一瞬思ったりしましたがReblogのリズムが失われるので却下。

Shuffleボタン設置

これはちょっとしたお遊び。
検索機能もカテゴリーもない状態だからこそ偶然の出会いを楽しめるTumblrならではのShuffleボタンを設置してみました。
画面左上に表示されている「Shuffle」をクリックすることでランダムでページを表示します。

Shuffleボタン

設置方法

1.Head内にShuffleボタン用のコードを追加
(http://****.tumblr.com/は自分のTumblrに書き変える)

PLAIN TEXT
CODE:
  1. <script type=“text/javascript”>
  2. function shuffle() {
  3.     var s1=‘<p class="shuffle"><a href="http://****.tumblr.com/’;
  4.     var s2=‘</a></p>’;
  5.     Total=0+64;
  6.     if(Total>0) {
  7.         var r=Math.ceil(Math.random() * Total);
  8.         document.write(s1+‘page/’+r+‘">’+‘<img src="http://data.tumblr.com/OY9NpboAI1s7qus3Dvw52nRC_500.png" width="70" height="20">’+s2);
  9.     }
  10. }
  11. shuffle();
  12. </script>

2.Head内にShuffleボタン用CSSを追加

PLAIN TEXT
CSS:
  1. p.shuffle {
  2. position: fixed;
  3. top: 3px;
  4. left: 3px;
  5. _position: static;
  6. _margin: 3px;
  7. _text-align: right;
  8. z-index: 1;
  9. }

自分Tumblrが大好きなのでしばらくこのボタンをクリックしまくって遊んでしまいました。
今見ているTumblrにShuffleボタンを追加するグリモンがあっても面白いかもしれませんね。
それからボタンのイメージは直リンになっていますがそれぞれUPした方が望ましいのかもしれません。

コメント欄設置

最後は本当にオマケ
ここまでいろいろいじってみたのでついでにコメント機能も追加してみました。
が、「それReblogで十分」と思っているので正直必要性は感じていません。
普通のblogのようにTumblrを使いたい場合などこんなこともできますよということで。
コメント機能について参考にしたのはこちら↓

Disqusというコメントサービスに登録して指定のコードを追加することでTumblrでもコメント機能を使えるようになります。

サインアップ

まずはサインアップしてみましょう。

Disqus

登録はメールアドレス,ユーザー名,パスワードを入力するだけです。

設定

ヘッダーメニュー「Settings」よりアイコンやタイムゾーンの設定をしておきます。

Disqus

タイムゾーンは日本の場合「UTC+9」
時間表示のフォーマットはお好みで絶対時間(Absolute)か相対時間(Relative)かを選択できます。

設定が終わったら「Save」ボタンで設定を保存します。

設置方法

「Dashboard」の「Click here to Get Started!」をクリックして新しいコメントフォームを作成します。

Disqus

必要事項を入力したら「Create Form」をクリックしてTumblrアイコンをクリック。

Disqus

表示されたコードをCustom HTMLの指定の箇所にコピペします。

  • Tumblr Code(コメントフォーム)→{/block:Posts}の後
  • Number of Comments Code(コメント数表示)→bodyタグの直前

コメントの管理

Disqusの「Dashboard」でコメントの閲覧・削除ができます。
最新コメントのFeedも用意されているので購読しておくといいかもしれません。
「Dashboard」のタブメニューより必要に応じて細かい設定も可能です。

  • Integration Settings→コメントフォームのレイアウト/コメントのインポート・エクスポート
  • Forum Settings→フォーラムのテーマ(コメントをフォーラムとして一覧表示も可能)
  • Access & Moderators→アクセスコントロール(承認制/匿名投稿)

もしかしたらこのDisqusというコメントサービスは通常のblogのコメント機能として組み込んでみちゃってもいいのかも。

以上便利なものからオマケ的なものまで4つのカスタマイズをしてみました。
なぜかオマケ要素のコメント機能についての説明が1番長くなった気がする…

2 Responses to “Tumblrをちょっとだけパワーアップしてみました”

  1. Anonymous on March 14th, 2009 at 1:49 AM says:

    1.Head内にShuffleボタン用のコードを追加 の5行目

    Total=0+64;
    ここ、間違っていますよ

  2. あゆむ on September 11th, 2009 at 4:59 PM says:

    コメント設置{/block:Posts}がないのですが…

Leave a Reply

Recent Posts