2007年12月05日
■ [Theme] 俺のThemeを公開してみる 
サンプルはスクショ撮るの面倒だから俺のtumblrを見てくれ。
コンセプトは「虹」。7種類の投稿に赤橙黄緑青藍紫を割り振って色鮮やかに，しかし背景は暗めの灰色で落ち着いた雰囲気に。投稿の種類に応じてそれっぽいアイコンなんかも表示しちゃったりして。
対応ブラウザはIE，Firefox，Opera。見栄えがそれなりに同じになるように設計。
AutoPagerize対応。万が一tumblrのSITEINFOが変わってもMicoroformats（autopagerize_page_element＋autopagerize_insert_before）で対応しているので安心。
hAtomにも対応。だけどbodyの末尾にtumblr codeが自動的に埋め込まれるせいかうまく解析できない。
xFolkにも対応させたかったけど，QuoteやPhotoのtaggedlinkをどうすればいいのか分からなかったので諦めた。
ソースは続きから。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="viewport" content="width=675" /><!-- iPhone --> <link rel="index" href="/" /> <link rel="alternate" media="handheld" type="text/html" href="/mobile" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss" /> <link rel="icon" href="http://assets.tumblr.com/images/favicon.gif" /> <link rel="shortcut icon" href="http://assets.tumblr.com/images/favicon.gif" /> <title>{block:PostTitle}{PostTitle} - {/block:PostTitle}{Title}</title> <style type="text/css"> /** * post type icon powered by http://somerandomdude.net/srd-projects/clearbits */ body { margin: -40px 30px 20px 30px; padding: 0; background: #999; font-size: 14px; font-family: 'Lucida Grande', Helvetica, sans-serif; } a { text-decoration: underline; } a:link { color: #00c; } a:visited { color: #609; } a:hover, a:active, a:focus { color: #f00; } a img { text-decoration: none; } img { border: 0; vertical-align: middle; } #content { width: 700px; padding: 40px 0 0 0; background: #fff; } /* header */ #header { position: relative; margin: 40px 10px 30px 10px; } #header a:link { color: #000; } #header a:visited { color: #000; } #header a:hover, #header a:active, #header a:focus { color: #f00; } #header .title { padding: 0; margin: 0; font-size: 30px; line-height: 32px; } #description { margin-top: 14px; } #widget { margin-top: 14px; } /* footer */ #footer { margin-top: 20px; font-size: 20px; text-align: center; } #footer a:link { color: #000; } #footer a:visited { color: #000; } #footer a:hover, #footer a:active, #footer a:focus { color: #f00; } #footer .tiny { margin: 32px 0 0 0; font-size: 12px; } #footer .tiny a { font-weight: bold } /* every post */ .post { position: relative; border-top: 1px solid; margin-bottom: 40px; padding: 0 140px 0 40px; } .post .icon { position: absolute; top: 4px; left: 4px; _left: -36px; /* IE */ background: top left no-repeat url(http://f.hatena.ne.jp/images/fotolife/S/SweetPotato/20071113/20071113150523.gif); } .post .content { width: 520px; margin: 4px 0 0 0; _margin: -12px 0 0 0; /* IE */ } .post .content .title { margin: 0 0 16px 0; font-size: 20px; font-weight: normal; } .post .content .sub { margin: 16px 0 0 0; } .post .date, .post .permalink { position: absolute; right: 0; width: auto; color: #999; font-size: 12px; line-height: 24px; text-align: right; padding-right: 4px; border-bottom: 1px solid; } .post .date { top: 2px; } .post .date abbr { border: none; } .post .permalink { top: 28px; } .post a.permalink:link, .post a.permalink:visited { color: #999; text-decoration: none; } .post a.permalink:hover, .post a.permalink:active, .post a.permalink:focus { color: #000; text-decoration: none; } /* regular (text) post */ .regular, .regular .date, .regular .permalink { border-color: #03c; } .regular .icon { background-color: #03c; } /* photo post */ .photo, .photo .date, .photo .permalink { border-color: #c00; } .photo .icon { background-color: #c00; } /* quote post */ .quote, .quote .date, .quote .permalink { border-color: #f60; } .quote .icon { background-color: #f60; } .quote .content .main { font-size: 16px; } /* link post */ .link, .link .date, .link .permalink { border-color: #390; } .link .icon { background-color: #390; } /* conversation (chat) post */ .conversation, .conversation .date, .conversation .permalink { border-color: #990; } .conversation .icon { background-color: #990; } .conversation .content ul.main { padding-left: 0; margin-left: 0; border: solid #ccc; border-width: 0 0 0 3px; list-style-type: none; } .conversation .content ul.main li { padding: 0 0 0 5px; } .conversation .content ul.main li.odd { background-color: #e5e5e5; } .conversation .content ul.main li.even { background-color: #f7f7f7; } .conversation .content ul.main li span.label { font-weight: bold; } .conversation .content ul.main li.user1 span.label { color: #900; } .conversation .content ul.main li.user2 span.label { color: #090; } .conversation .content ul.main li.user3 span.label { color: #009; } /* audio post */ .audio, .audio .date, .audio .permalink { border-color: #09c; } .audio .icon { background-color: #09c; } /* video post */ .video, .video .date, .video .permalink { border-color: #60c; } .video .icon { background-color: #60c; } </style> </head> <body> <div id="content" class="hfeed"> <div id="header"> <h1 id="title"><a href="/">{Title}</a></h1> {block:Description} <div id="description">{Description}</div> {/block:Description} <div id="widget"> <!-- Google Site Search --> <form id="search-form" method="get" action="http://www.google.co.jp/search"> <p> <input name="q" type="text" size="31" maxlength="255" value="" /> <input type="submit" value="search on this tumblr" /> <input name="domains" type="hidden" value="xxx.tumblr.com" /> <input name="sitesearch" type="hidden" value="xxx.tumblr.com" /> </p> </form> <p> <a href="/rss">RSS</a> | <a href="/archive">Archive</a> </p> </div> </div> {block:Posts} {block:Regular} <div class="post regular hentry autopagerize_page_element"> <img src="http://f.hatena.ne.jp/images/fotolife/S/SweetPotato/20071113/20071113151658.gif" width="16" height="16" alt="T" class="icon" /> <div class="content"> {block:Title}<h2 class="title entry-title"><a href="{Permalink}">{Title}</a></h2>{/block:Title} <div class="main entry-content">{Body}</div> </div> <span class="date"><abbr class="published" title="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}+09:00">{24Hour}:{Minutes} on {ShortMonth} {DayOfMonth}, {Year}</abbr></span> <a href="{Permalink}" rel="bookmark" class="permalink">» permalink</a> </div> {/block:Regular} {block:Photo} <div class="post photo hentry autopagerize_page_element"> <img src="http://f.hatena.ne.jp/images/fotolife/S/SweetPotato/20071113/20071113152139.gif" width="16" height="16" alt="P" class="icon" /> <div class="content entry-content"> <div class="main">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}</div> <div class="sub entry-title">{Caption}</div> </div> <span class="date"><abbr class="published" title="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}+09:00">{24Hour}:{Minutes} on {ShortMonth} {DayOfMonth}, {Year}</abbr></span> <a href="{Permalink}" rel="bookmark" class="permalink">» permalink</a> </div> {/block:Photo} {block:Quote} <div class="post quote hentry autopagerize_page_element"> <img src="http://f.hatena.ne.jp/images/fotolife/S/SweetPotato/20071113/20071113145554.gif" width="16" height="16" alt="Q" class="icon" /> <div class="content entry-content"> <div class="main">“{Quote}”</div> <div class="sub entry-title">— {Source}</div> </div> <span class="date"><abbr class="published" title="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}+09:00">{24Hour}:{Minutes} on {ShortMonth} {DayOfMonth}, {Year}</abbr></span> <a href="{Permalink}" rel="bookmark" class="permalink">» permalink</a> </div> {/block:Quote} {block:Link} <div class="post link hentry autopagerize_page_element"> <img src="http://f.hatena.ne.jp/images/fotolife/S/SweetPotato/20071113/20071113151359.gif" width="16" height="16" alt="L" class="icon" /> <div class="content entry-content"> <h2 class="title entry-title"><a href="{URL}">{Name}</a></h2> <div class="main">{Description}</div> </div> <span class="date"><abbr class="published" title="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}+09:00">{24Hour}:{Minutes} on {ShortMonth} {DayOfMonth}, {Year}</abbr></span> <a href="{Permalink}" rel="bookmark" class="permalink">» permalink</a> </div> {/block:Link} {block:Conversation} <div class="post conversation hentry autopagerize_page_element"> <img src="http://f.hatena.ne.jp/images/fotolife/S/SweetPotato/20071113/20071113152451.gif" width="16" height="16" alt="C" class="icon" /> <div class="content"> {block:Title}<h2 class="title entry-title"><a href="{Permalink}">{Title}</a></h2>{/block:Title} <ul class="main entry-content"> {block:Lines} <li class="{Alt} user{UserNumber}"> {block:Label}<span class="label">{Label}</span>{/block:Label} {Line} </li> {/block:Lines} </ul> </div> <span class="date"><abbr class="published" title="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}+09:00">{24Hour}:{Minutes} on {ShortMonth} {DayOfMonth}, {Year}</abbr></span> <a href="{Permalink}" rel="bookmark" class="permalink">» permalink</a> </div> {/block:Conversation} {block:Audio} <div class="post audio hentry autopagerize_page_element"> <img src="http://f.hatena.ne.jp/images/fotolife/S/SweetPotato/20071113/20071113152522.gif" width="16" height="16" alt="A" class="icon" /> <div class="content entry-content"> <div class="main">{AudioPlayerBlack}</div> <div class="sub entry-title">{Caption}</div> </div> <span class="date"><abbr class="published" title="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}+09:00">{24Hour}:{Minutes} on {ShortMonth} {DayOfMonth}, {Year}</abbr></span> <a href="{Permalink}" rel="bookmark" class="permalink">» permalink</a> </div> {/block:Audio} {block:Video} <div class="post video hentry autopagerize_page_element"> <img src="http://f.hatena.ne.jp/images/fotolife/S/SweetPotato/20071113/20071113152540.gif" width="16" height="16" alt="V" class="icon" /> <div class="content entry-content"> <div class="main">{Video-500}</div> <div class="sub entry-title">{Caption}</div> </div> <span class="date"><abbr class="published" title="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}+09:00">{24Hour}:{Minutes} on {ShortMonth} {DayOfMonth}, {Year}</abbr></span> <a href="{Permalink}" rel="bookmark" class="permalink">» permalink</a> </div> {/block:Video} {/block:Posts} <div id="footer" class="autopagerize_insert_before"> {block:PreviousPage} <a href="{PreviousPage}" rel="prev">« Prev</a> {/block:PreviousPage} {block:NextPage} <a href="{NextPage}" rel="next">Next »</a> {/block:NextPage} <div class="tiny"> Powered by <a href="http://www.tumblr.com/">Tumblr</a> </div> </div> </div> </body> </html>
コメント
ku05222007/12/05 12:51ありがとうございますー。(\d+)$だとtumblr側の気まぐれで#とか?がつくようになったらマッチしなくなるのでpost/(\d+)で修正しました!
SweetPotato2007/12/05 13:40こちらこそ対応ありがとうございます。確かにその正規表現の方が意図通りにマッチしますね。速攻でアップデートしました。
トラックバック - http://tumblr.g.hatena.ne.jp/SweetPotato/20071205