WebサイトのクリップをTumblrへ投稿する

20101122:WebサイトのクリップをTumblrへ投稿するやっとTumblrの使い道が出てきました。

参考サイトはこちら:それTomblooでできるよ! Webページのスクリーンショットをとる « ku

Tumblrは今でも使い道をしっかり把握しきれてませんが、端的に言えばブログっぽいけど記事の自動収集と引用が得意なブログという感じでしょうか。フォローした人の記事を自動で表示したりできるあたりはTwitterぽい。ちなみにスペルは「Tumblr」で、「Thumnbr」でも「Tumbler」でもないので注意(検索の時地味に困る)。

で、最近ブックマークの整理をしていたときに、仕事柄集めていたクールなサイトが大量に出てきたので、どんなデザインだったのか一覧で見れたらいいなと考えてました。

Firefoxのブックマークを拡張してサムネイルが表示できるものがあったのですが、最新版のFirefoxには対応しておらず断念(そもそもプロファイル容量が肥大化するのでおすすめできない)。他にGoogleBookmarksやEverNoteを試してみたものの、イマイチパッとせずどうしたもんかなと悩んでいました。
そういえばと思い出したのが「廃墟tumblr::Ruins」。このサイトは廃墟の画像を淡々と載せていたなということで、大量に集めたデザインサイト系ブックマークをサムネイル付きでまとめられんかなと思ったわけです。それも余計なソフトを立ち上げる必要なく数ステップで。

前置きが長くなりましたが、サムネイル付きブックマークをTumblrで作るには、「tombloo」というFirefoxのアドオンを使いました。これにより、ページのスクリーンショットを撮ったうえで、Tumblrに投稿されます。

手順としては以下のように行います。

  1. スクリーンショットを撮りたいサイトの上で右クリック
  2. Tomblooのメニュー(Shere Link・Shere・Tombloo)が出てくるので、その中の「Shere…」→「Photo – Capture」をクリック
  3. ダイアログが表示されたら、以下の中からキャプチャタイプを指定する
    1. Region:キャプチャ範囲を手動で指定
    2. Element:DOMに従いエレメント単位(divとかh1とかのHTML要素ごと)で指定
    3. View:現在表示されている範囲を指定
    4. Page:ページ全体を指定
  4. 実際に登録する画面が表示されるので、タイトル・タグ(Tag)・内容(Descripton)を必要に応じて入力し「Post」をクリックすればTumblrへ投稿される。
    ※タグと内容が表示してない場合は、タイトルバー横の「▼」をクリックすれば表示される。

Tumblrで表示したときのレイアウトを考慮すると、Viewで指定したほうがサイズが均一になって調度良いと思います。Pageだとブログ系の長いサイトはえらいことになってしまうので。

Tomblooはページキャプチャはもちろん、Flashサイトもキャプチャできるようになっているので、このアドオン一つで用事が済むようになっています。
画像の投稿に関しては、Tumbler以外にFlickrやTwitPic、Picasaなどを投稿先に指定できるので、Tumblrだけのツールというわけではありません。といっても、文字・リンク・写真・動画等一括で管理できるTumblrが一番親和性が高いのは事実ですが。

テーマについては、サムネイルの一覧が確保できるものということで、「New Book」を選びました。テーマは「New Tumblr Themes」という所に大量にあるので、自分にあったものを選んでください。

PUSSY MONEY THEMES」に変えました。ネーミングがアレだけど、きれいにグリッドで並んでくれるので。あとコードをちょっといじってボックスが横3つ限定だったのをウインドウ幅に合わせて可変するようにしてます。
このテーマは過去記事への連番がないので、それを表示するコードを入れてやればなんとか。
1ページあたりの表示件数が最大15件なんですが、30件くらいに増やす方法はないっぽい。まぁこのへんはユーザがAutoPagerとかに頼ってもらうしかないかも。

というわけで作成したTumblrのサイトはこちら。「cosyroom on tumblr.」国内外問わずいろんなサイトで紹介されていたものを集めています。

自分でテーマを作れって?Wordpressのテーマ把握で手一杯です・・・

【20101209追記】

20101122:WebサイトのクリップをTumblrへ投稿する2PUSSY MONEY THEMESテーマをいじって以下の点を変更。ソースは「続きを読む」からどうぞ。

  • コンテンツ幅を固定幅ではなく可変幅に変更
  • 「NEXT」と「PREVIOUS」しかなかったので、ページ番号リストを付加
  • AutoPagerizeの仕様に対応(AutoPagerは綺麗に出ません)

表示サイズを最小にして次々と表示させるとなかなか圧巻です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<!–
  Theme: PUSSY MONEY (+cosyroom Custom)
  Creator: Felice Fawn (http://felicefawn.tumblr.com) // PUSSY MONEY THEMES (http://pussymoneythemes.tumblr.com}
–>
<html>

<head>
    <title>{Title}{block:PostSummary} &raquo; {PostSummary}{/block:PostSummary}</title>
    <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
    <link rel="icon" href="{Favicon}" />

  <meta name="color:Links" content="#f47790"/>
  <meta name="color:Border" content="#ffffff"/>
  <meta name="if:Display Custom Links" content="0"/>
  <meta name="text:Link Title 1" content=""/>
  <meta name="text:Link URL 1" content=""/>
  <meta name="text:Link Title 2" content=""/>
  <meta name="text:Link URL 2" content=""/>
  <meta name="text:Link Title 3" content=""/>
  <meta name="text:Link URL 3" content=""/>
  <meta name="text:Link Title 4" content=""/>
  <meta name="text:Link URL 4" content=""/>
<style type="text/css">
* {
  margin:1px;
  padding:0;
  border:0;
  list-style-type:none;
}

p {
  margin-top: 10px;
}

body {
  background:#ffffff;
  color:#000000;
  font-family: Helvetica;
  font-size: 11px;
  text-align:center;
  margin: 0
}

#container {
  margin:0px auto 10px;
  text-align:left;
  width:100%
}

.description {
  font-size: 120%;
}
#portraitframe {
  margin-top: 20px;
  margin-bottom: 10px;
  width: 128px;
  height: 128px;
  background-image: url({PortraitURL-128});
}
#portraitframe .overlay {
  margin: 0;
  width: 128px;
  height: 128px;
  background: url(‘http://static.tumblr.com/l7hwqgf/paOl9hktd/portraitframe.png&#8217;) top left no-repeat;
}

.navigation {
  font-family: Impact;
  font-size: 14px;
  color:#000000;
  letter-spacing: 3px;
  word-spacing: 10px;
  text-transform: uppercase;
}
.navigation a {
  font-family: Impact;
  font-size: 14px;
  color:#000000;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.navigation a:hover {
  font-family: Impact;
  font-size: 14px;
  color:{color:Links};
  letter-spacing: 3px;
  text-transform: uppercase;
}

.post {
  background: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-color: {color:Border};
  float: left;
  height: 300px;
  margin: 10px;
  padding: 10px;
  position: relative;
  overflow: hidden;
  width: 255px;
  box-shadow: 0px 0px 9px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 9px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.3);
}

.notes {
  display:none;
}

body#permalink .notes {
  background: #ffffff;
  margin-left: 295px;
  display: block;
  text-align: center;
  height: auto;
  overflow: auto;
  padding: 10px;
  position: relative;
  width: 245px;
}

body#permalink .post {
  background: #ffffff;
  margin-left: 180px;
  height: auto;
  padding: 10px;
  position: relative;
  width: 505px;
  box-shadow: 0px 0px 9px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 9px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 9px rgba(0,0,0,0.3);
}

.searchresults {
  background: #fffff;
  float: left;
  height: 20px;
  margin: 5px;
  overflow: auto;
  padding: 10px;
  position: relative;
  width: 730px;
}

.post:hover,
.searchresults:hover {
  background: #ffffff;
}

body#permalink .image img {
  border: 0;
  margin: 5px 0;
  max-width: 500px;
}

.image img {
  margin: 5px 0;
  width: 100%;
}

.image img:hover {}
.post .video {
  text-align: center;
}

.video .caption {
   padding-top: 10px;
}

.post .link a {
  font-family: Impact;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.post .link a:hover {
  font-family: Impact;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

blockquote {
  background:#ffffff;
  margin:0;
  padding: 5px;
}

blockquote.quote {
  font-family: Impact;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.source {
  font-family: Helvetica;
  color: #000000;
  font-size: 11px;
  text-align: right;
}

.conversation ul li {
  color: #000000;
  padding: 3px;
}

.even {
  background: #f2f2f2;
}

ol li {
  list-style: none;
  margin: 0;
  padding: 0 0 5px;
}
a {
  color:{color:Links};
  text-decoration: none;
}
a:hover {
  color:#000000;
  text-decoration: none;
}
h1,h2,h3,h4,h5 {
  font-family: Helvetica;
}

.title {
  font-family: Impact;
  color:#000000;
  font-size:40px;
  letter-spacing: 8px;
  padding:0 0 9px;
  text-transform: uppercase;
}

#header {
  padding: 0px 5px 10px;
}

.description {
  width: 600px;
  margin-top: 20px;
}

h2 {
  color: #dc5957;
  font: normal 1.2em/1.8 Georgia, serif;
}

#footer {
  background: #ffffff;
  float: left;
  height: 10px;
  padding: 10px 0;
  text-align: center;
  width: 100%;
  margin: 0;
}

#pages {
  font-family: Helvetica;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  padding-top: 2.5em;
  padding-bottom: 2em;
}

#pages a{
  font-family: Helvetica;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  color: #000000;
}

#pages a:hover{
  font-family: Helvetica;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  color: {color:Links};
}

#pages .centertext {
  font-family: Helvetica;
  text-align: center;
}
#pages span.current_page,
#pages a.jump_page {
  border: 1px solid gray;
  margin: 2px;
  padding: 0.5em;
}
#pages span.current_page,
#pages a.jump_page:hover {
  color: #fff;
  background-color: gray;
}

.left {
  float:left; margin: 5px 0;
}
.right {
  float:right; margin: 5px 0;
}
.floatbreak {
  clear:both;
}

.regular img {
  max-width: 100%;
}

.post .text {
  height: 248px;
  overflow: hidden;
}

body#permalink .post .text {
  height: auto;
}

#notes {
  width: 100%;
}

body#permalink .readmore {
  visibility: hidden;
  display: none;
}

#postnav {
  position: relative;
  width: 885px;
}

#postnav a {
  color: #000000;
  font-family: Helvetica;
  font-size: 14px;
  text-transformat: uppercase;
  text-decoration: none;
}

#postnav a:hover {
  color: {color:Links};
  font-family: Helvetica;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
}

div.page a.old {
  float: right;
  margin-right: 20px;
  text-transform: uppercase;
}
div.page a.new {
  float: left;
  margin-left: 20px;
  text-transform: uppercase;
}
div.page a:hover {
  text-decoration: none;
  text-transform: uppercase;
}
{CustomCSS}
</style>
  {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
</head>

<body {block:permalink}id="permalink"{/block:permalink}>
  <div id="container">
    <div id="header" align="center">
      <div id="portraitframe"><div class="overlay"></div></div>
      <div class="title">{Title}</div>
      <div class="navigation">
        {block:IfDisplayCustomLinks}
        <a href="/">Home</a>
        <a href="/ask">Ask</a>
        <a href="/archive">Archive</a>
        <a href="{RSS}">RSS</a>
        {block:IfLinkURL1}<a href="{text:Link URL 1}">{text:Link Title 1}</a>{/block:IfLinkURL1}
        {block:IfLinkURL2}<a href="{text:Link URL 2}">{text:Link Title 2}</a>{/block:IfLinkURL2}
        {block:IfLinkURL3}<a href="{text:Link URL 3}">{text:Link Title 3}</a>{/block:IfLinkURL3}
        {block:IfLinkURL4}<a href="{text:Link URL 4}">{text:Link Title 4}</a>{/block:IfLinkURL4}
        {/block:IfDisplayCustomLinks}
      </div>
      <div class="description">{Description}</div>
    </div>
    {block:SearchPage}
    <div class="searchresults">
      <div class="left">
        <p>Your search for <span class="query">{SearchQuery}</span> returned {SearchResultCount} result(s).</p>
      </div>
      <div class="right">
        <form action="/search" method="get">
          <input type="text" size="15" id="searchbox" name="q" value="{SearchQuery}" />
          <input type="submit" id="submitsearch" value="Search" />
        </form>
      </div>
    </div>
    {/block:SearchPage}

    {block:Posts}
    <div class="post autopagerize_page_element">

      {block:Photo}
      <div class="left">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
      <!–<div class="right"><a href="{Permalink}">{NoteCountWithLabel}</a></div>–>
      <div class="floatbreak"></div>
      <div class="photo">
        <div class="image">{LinkOpenTag}<img src="{PhotoURL-250}" alt="{PhotoAlt}" />{LinkCloseTag}</div>
        {block:Caption}
        <div class="caption" align="center">{Caption}</div>
        {/block:Caption}
      </div>
      {/block:Photo}
     
      {block:Quote}
      <div class="left">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
      <!–<div class="right"><a href="{Permalink}">{NoteCountWithLabel}</a></div>–>
      <div class="floatbreak"></div>
      <blockquote class="quote">
        “ {Quote} ”
      </blockquote>
      {block:Source}
      <div class="source">&mdash; {Source}</div>
      {/block:Source}
      {/block:Quote}

      {block:Link}
      <div class="left">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
      <!–<div class="right"><a href="{Permalink}">{NoteCountWithLabel}</a></div>–>
      <div class="floatbreak"></div>
      <div class="link">
        <div align="center"><a href="{URL}" {target}="{target}">{Name}</a></div>
        {block:Description}
        <p class="description">{Description}</p>
        {/block:Description}
      </div>
      {/block:Link}

      {block:Conversation}
      <div class="left">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
      <!–<div class="right"><a href="{Permalink}">{NoteCountWithLabel}</a></div>–>
      <div class="floatbreak"></div>
      <div class="conversation">
        {block:Title}
        <h1><a href="{Permalink}">{Title}</a></h1>
        {/block:Title}
        <ul>
          {block:Lines}
          <li class="{Alt}">
            {block:Label}<span class="label">{Label}</span>{/block:Label}
            {Line}
          </li>
          {/block:Lines}
        </ul>
      </div>
      {/block:Conversation}

      {block:Video}
      <div class="left">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
      <!–<div class="right"><a href="{Permalink}">{NoteCountWithLabel}</a></div>–>
      <div class="floatbreak"></div>
      <div class="video" align="center">
        <div class="videobox" align="center">{Video-250}</div>
        {block:Caption}
        <div class="caption">{Caption}</div>
        {/block:Caption}
      </div>
      {block:PermalinkPage}{Video-500}{/block:PermalinkPage}
      {/block:Video}

      {block:Audio}
      <div class="left">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
      <!–<div class="right"><a href="{Permalink}">{NoteCountWithLabel}</a></div>–>
      <div class="floatbreak"></div>
      <div align="center">{AudioPlayerBlack}
      {block:Caption}
      <div class="caption">{Caption}</div>
      {/block:Caption}</div>
      {/block:Audio}

      {block:Text}
      <div class="left">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
      <!–<div class="right"><a href="{Permalink}">{NoteCountWithLabel}</a></div>–>
      <div class="floatbreak"></div>
      <div class="image">
        <div class="text">{Body}</div>
      </div>
      <div class="readmore"><a href="{Permalink}">Read more</a></div>
      {/block:Text}

      {block:Answer}
      <div class="left">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
      <!–<div class="right"><a href="{Permalink}">{NoteCountWithLabel}</a></div>–>
      <div class="floatbreak"></div>
        <b>{Asker}</b> asks: <i>{Question}</i><br />
      <div class="answer">{Answer}</div>
      {/block:Answer}
    </div>
    {/block:Posts}
    <div class="autopagerize_insert_before"></div>

    <div class="floatbreak"></div>

    <div id="notes">{PostNotes}</div>

    <div class="floatbreak"></div>

    <div style="clear:both;"></div>

    {block:Pagination}
    <div id="pages">
      <div class="centertext">
        {block:PreviousPage}
        <a class="previous" href="{PreviousPage}">« PREVIOS</a>
        {/block:PreviousPage}

        {block:JumpPagination length="20"}
          {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
          {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
        {/block:JumpPagination}

        {block:NextPage}
        <a class="next" href="{NextPage}" rel="next">NEXT »</a>
        {/block:NextPage}
      </div>
    </div>
    {/block:Pagination}

  </div>

  <div id="footer">
    Theme created by <a href="http://www.felicefawn.tumblr.com">Felice Fawn</a> for Tumblr // <a href="http://www.pussymoneythemes.tumblr.com">Pussy Money Themes</a> + Layout Custom by Hello360.
  </div>

</div>
</body>
</html>

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中