maesblog

一歩先行くTumblrの上手な使い方紹介

tumblr reblogging enviroment Advent Calendar 2013の12日目の記事となります。『mae’s works』という写真ブログをTumblrで始めて約3ヶ月。Tumblrでブログを運営していく中で発見したTumblrを上手に使うテクニックを今回は紹介したいと思います。

Tumblrを上手に使うテクニック

タグは最初の<5個まで>が重要!ダッシュボードからの検索対象となる

Tumblrで投稿する際は、その投稿に関連したタグを付けることになると思います。タグを付けることで、Tumblrのダッシュボードからの検索対象となり、多くの方に見てもらえる機会が増えることになります。「スキ」を押される機会、「リブログ」される機会も増えることになります。

ダッシュボードから「イルミネーション」での検索結果

そこで投稿する際のタグ付けは必須となってきますが、ここで気をつけたいのが、ダッシュボードからの検索対象となるタグは最初から5個までということです。付けたタグ全部が検索対象とはならないため、最初の5個のタグはしっかり考えて決めるようにしています。Tumblrは海外のユーザーが特に多いので、英語のタグもいくつか含めると効果的です

ブログへの「タグ検索機能」の実装をすごく簡単に行える

ブログに検索機能があると、利便性が抜群によくなります。私のTumblrのブログでも以下のように検索フォームを設置しています。

Tumblrの検索機能
↑クリックすると、私のTumblrの「イルミネーション」での検索結果が表示されます

ただ使用しているテンプレートによっては、「タグ検索機能」が実装されていないものもあります。一般的に検索機能を実装するには、ある程度のプログラミングの知識が必要です。特に検索結果ページを作るのは大変です。ところが、Tumblrの凄い所は、以下のURLを指定するだけで、検索結果ページが表示されるようになっています

http://○○○.tumblr.com/search/(タグ名)

つまり上記のURLに飛ばすようにタグ検索フォームを設置すれば「タグ検索機能」のできあがりです。検索フォームは以下のソースコードを好きな所にコピペすればOKです。

<form action="/search" method="get">
  <input type="text" name="q" value="{SearchQuery}">
  <input type="submit" value="タグ検索">
</form>

検索結果ページのデザインは「indexページ」と同じものが適用されますが、以下のタグを使うことで、独自のカスタマイズも可能です。

{block:SearchPage}{/block:SearchPage}

投稿した記事の「ランダム表示機能」の実装も簡単

Tumblrでは、投稿やリブログが手軽に行えるということで、投稿数も半端ない数になっている方も多いと思います。膨大な数となった記事をランダムに表示させて見てもらえるようになっていたら、きっとブログの魅力も増すことでしょう。

Tumblrのランダム表示機能
↑画像をクリックすると、私のTumblrの記事がランダムで表示されます

そんなランダム表示機能ですが、すでにTumblrには備わっています。上記の「タグ検索機能」と同じように、以下のURLを指定するだけです。

http://○○○.tumblr.com/random

ボタンなどのリンク先に上記のURLを指定しておけば、ボタンをクリックする度に記事がランダムに表示されるようになります。例えば、スマホの「シェイク」イベントを取得して、スマホが振られる度にランダムに記事を表示させる機能なんかも簡単に実装することができますね。シェイクイベントを取得するiOS向けのjQueryプラグイン「gShake」を使って実装すると以下のようになります。

<script src="jquery.js"></script>
<script src="gShake.js"></script>
<script>
$(document).ready(function () {

  $(this).gShake(function () {
    location.href = "http://○○○.tumblr.com/random";
  });

});
</script>

スマートフォン用のテンプレート(テーマ)も作れる

Tumblrでは、スマホ表示用に最適化されたテンプレートが最初から用意されており、「カスタマイズ > 詳細設定」の「モバイルレイアウトを使用する」をONにすることで、スマホ用テンプレートを使用することができます。(レスポンシブ対応でテンプレートを作成する場合は、こちらをOFFにしておくと良いでしょう。)

ただ、この用意されたテンプレートは自由にカスタマイズすることができません。自分でスマホ用のテンプレートを弄りたい場合は、「カスタマイズ > ページの追加」で「iphone-theme」というURLで「カスタムデザイン」のページを作ることで、スマホでアクセスした際にこちらのページが表示されるようになります。

なお、タグなど入力せずにページだけ生成しただけでは、ただ単に真っ白に表示されるだけとなってしまうので、ページ追加の際はお気をつけください。以下のテンプレートを利用してカスタマイズしていってもよいと思います。

コメント機能はDISQUSで!

Tumblrにはコメント機能がありませんが、DISQUSというサービスと連携できるようになっています。テンプレートがDisqusに対応していれば、「カスタマイズ」の「Disqus Shortname」欄にDISQUSで発行したアカウントを登録すれば、ブログ上にコメント欄が作成されます。

テンプレートによってはDisqusに対応していない場合もあるので、その際はDISQUSのサイトに用意されている以下のページを参照して、DISQUSをテンプレートにインストールする必要があります。

静的ファイルのアップロードも可能!Twitter Bootstrapも使える

Twitter Bootstrapなどのデザインフレームワークを使って、洗練されたテンプレートを作りたい場合、外部ファイルをページ内に取り込む必要があります。そうした「テンプレートをデザインすることを目的としたファイル」をアップロードする機能がTumblrには備わっています。

「カスタマイズ > HTMLを編集」より上部設定メニューの「テーマアセット」を選択し、「ファイルを追加」でファイルをアップロードすることができます。ファイルがアップロードされると、そのファイルへアクセスするためのURLが発行されます。

アップロードできるファイルは画像、CSS、JSなどのファイルとなります。またテンプレート以外で使用するファイルをアップロードした場合は、アカウントが凍結されるとのことなのでお気をつけ下さい。


以上、この3ヶ月の利用で発見したTumblrを上手に使うためのテクニックとなります。その他にもTumblrのサイトで紹介されている「裏ワザ」などもありますので、こちらもお試しください。引き続きTumblrを利用していて使えるテクニックを発見したら、またこちらのブログでまとめたいと思っています。

関連記事

コメント

  • 必須

コメント