【連載】

『Tumblr』のおさらい

11 タグを付けて投稿&タグクラウドを表示させる

    鈴木友博  [2009/04/26]

    記事にタグを付けて投稿する

    Tumblr』は、一般的なブログサービスと同様に投稿する記事に「タグ」を付けることができる。記事に付けたタグをリストクラウドとして、自分のTumblrブログ(Tumblelog)に表示させることが可能だ。記事のジャンルごとにタグを付ければ、サイトを訪れた人がタグを元に記事を探して読むことができ、親切でわかりやすいサイトになるだろう。

    また、タグを付けることは、自分で投稿した記事を見返す際にも役立つ。今回は、投稿する前に記事にタグを付け、さらにそのタグのリストを自分のTumblrに表示させる方法を紹介する。

    Tumblrの管理画面である「Dashboard」から投稿する場合は、投稿フォームの右上にある<Advaced options>ボタンをクリックしよう(図1)。すると、図2のように表示されるので、「Tag this post」の欄に投稿する記事のタグを入力する。タグを複数入力する際は、カンマで区切ればよい。入力したタグはボタン状で表示され、削除する時は「×」マークをクリックする(図3)。

    図1 投稿フォームの右上にある<Advanced options>ボタンをクリック

    図2 「Tag this post」の箇所にタグを入力する。複数入力する場合はカンマで区切る

    図3 それぞれのタグがボタン状で表示される。削除する場合は「×」をクリックしよう

    また、ブックマークレットで投稿する際は、ダイアログの右下にある「Advanced」をクリックする(図4)。すると、図5のような画面になるので、「Tag this with」の部分にタグをカンマで区切って入力し、下にある「close」をクリックしよう。元の画面で<Create ……>ボタンをクリックすれば、タグを付けた記事が投稿される(図6)。

    図4 ブックマークレットのダイアログで、右下にある「Advanced」をクリック

    図5 「Tag this with」の部分にタグを入力したら、「Close」をクリック

    図6 <Create ……>ボタンをクリックして投稿する

    「Tumblr」にタグリストを表示する

    記事にタグを付けて投稿しただけでは、自分のTumblrのサイトに変化はない(図7)。そこで、次はTumblrにタグのリスト(タグクラウド)を表示する方法を見ていこう。タグリストの表示には、Tumblrの「Third-Party Apps」でも紹介されている「Tumblr Tag Cloud Generator」を用いる(図8)。

    図7 記事にタグを付けるだけでは、Tumblrにタグのリストは表示されない

    図8 「Tumblr Tag Cloud Generator」のリンクをクリック

    リンクをクリックすると、図9のようなWebページが表示される。Webページの左側にあるHTMLソースをコピーしよう(図10)。これを所定の場所に貼り付ければ、タグのリストを表示することができる。

    図9 「Tumblr Tag Cloud Generator」のWebページが表示される

    図10 HTMLソースをコピーしよう

    次に、TumblrのDashboardで「Customize」をクリックして、カスタマイズのページを表示する(図11)。左上のメニューで「Info」をクリックし、「Description」の箇所に先ほどコピーしたHTMLソースを貼り付ける(図12)。最後に、ページ右上にある<SAVE CHANGES>ボタンをクリックしよう(図13)。

    図11 カスタマイズのページを開く

    図12 左上のメニューで「Info」を選択。「Description」にコピーしたHTMLソースを貼り付ける

    図13 ページ右上の<SAVE CHANGES>ボタンをクリック

    自分のTumblrのサイトを確認すると、図14のようにタグクラウドが表示される。タグをクリックすれば、特定のジャンルの記事だけを閲覧することができる。なお、カスタマイズのページで「Theme」の「Use custom HTML」をクリックして(図15)、テーマのスタイルシートに「Tumblr Tag Cloud Generator」のHTMLソースを貼り付けることも可能である。

    図14 タグのリストが表示される。記事数によってフォントサイズが変化する

    図15 「Theme」→「Use custom HTML」から、テーマのスタイルシートにHTMLソースを貼り付けることも可能

    (鈴木友博@ゴーガ)

    関連サイト

    関連したタグ

    新着記事

    特設サイトの情報

      人気記事

      一覧

        イチオシ記事

        新着記事

        特別企画

        マイナビニュースマガジン