« 今週のお買い物 (2008.01.27～02.02) | トップページ | メモ: ランキング »
2008.02.06
自分の tumblr のテンプレートをさらしてみる
以下、「はらへた」で使っている、2008年2月6日現在のテンプレートです。dashboard で見かけた、各種 tips を参考にさせていただいています。 Thanks! 
Theme
<!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="en" lang="en">
<head>
<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#fff"/>
<meta name="color:Title" content="#444"/>
<meta name="color:Description" content="#777"/>
<meta name="color:Post Title" content="#6498cc"/>
<meta name="color:Text" content="#444"/>
<meta name="color:Inline Link" content="#6498cc"/>
<meta name="color:Quote" content="#888"/>
<meta name="color:Quote Border" content="#6498cc"/>
<meta name="color:Quote Source" content="#555"/>
<meta name="color:Link Post" content="#c00"/>
<meta name="color:Conversation Background 1" content="#f4f4f4"/>
<meta name="color:Conversation Background 2" content="#e8e8e8"/>
<meta name="color:Conversation Border" content="#bbb"/>
<meta name="color:Conversation Text" content="#444"/>
<meta name="color:Date" content="#ccc"/>
<meta name="color:Date Block" content="#6498cc"/>
<meta name="color:Date Block Text" content="#bbd5f1"/>
<!-- END DEFAULT COLORS -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
<link rel="icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<meta name="viewport" content="width=800"/> <!-- iPhone -->
<style type="text/css">
body {
margin: 0px;
background-color: {color:Background};
font-family: 'Lucida Grande', Helvetica, sans-serif;
}
a {
color: {color:Inline Link};
}
h1 {
width: 600px;
padding: 0px 100px 20px 100px;
margin: 50px auto 40px auto;
border-bottom: solid 1px #ccc;
text-align: center;
font: Bold 55px 'Trebuchet MS', Helvetica, sans-serif;
letter-spacing: -2px;
line-height: 50px;
position: relative;
}
h1 a {
color: {color:Title};
text-decoration: none;
}
h1 img {
border-width: 0px;
position: absolute;
right: 0px;
bottom: 10px;
width: 43px;
height: 23px;
}
div#content {
width: 420px;
margin: auto;
position: relative;
}
div#content div#description {
position: absolute;
right: -170px;
width: 160px;
text-align: right;
}
div#description {
font: Normal 17px Helvetica,sans-serif;
line-height: 20px;
color: {color:Description};
}
div#description a {
color: {color:Description};
}
div.post {
position: relative;
margin-bottom: 40px;
padding-right: 20px;
}
div.post div.date {
position: absolute;
left: -260px;
text-align: right;
width: 230px;
white-space: nowrap;
font: Normal 34px Helvetica, sans-serif;
letter-spacing: -2px;
color: {color:Date};
text-transform: uppercase;
line-height: 35px;
}
div.post div.date div.date_brick {
float: right;
height: 30px;
width: 45px;
background-color: {color:Date Block};
color: {color:Date Block Text};
font: Bold 12px Verdana, Sans-Serif;
text-align: center;
line-height: 12px;
margin-left: 10px;
padding-top: 5px;
letter-spacing: 0px;
overflow: hidden;
}
div.post img.permalink {
width: 14px;
height: 13px;
border-width: 0px;
background-color: #000;
display: none;
position: absolute;
right: 0px;
top: 0px;
z-index: 10;
}
div.post:hover img.permalink {
display: inline;
}
div.post h2 {
font-size: 18px;
font-weight: Bold;
color: {color:Post Title};
letter-spacing: -1px;
margin: 0px 0px 5px 0px;
}
div.post h2 a {
color: {color:Post Title};
text-decoration: none;
}
div.post div.caption {
font-size: 14px;
font-weight: bold;
color: {color:Text};
margin-top: 10px;
padding: 0px 20px 0px 20px;
}
div.post div.caption a {
color: {color:Text};
}
/* Regular Post */
div.post div.regular {
font-size: 12px;
color: {color:Text};
line-height: 17px;
}
div.post div.regular blockquote {
font-style: italic;
border-left: solid 2px {color:Text};
padding-left: 10px;
}
/* Quote Post */
div.post div.quote div.quote_text {
font-family: Helvetica, sans-serif;
font-weight: bold;
color: {color:Quote};
border-left: solid 5px {color:Quote Border};
padding-left: 10px;
}
div.post div.quote div.quote_text span.short {
font-size: 36px;
line-height: 40px;
letter-spacing: -1px;
}
div.post div.quote div.quote_text span.medium {
font-size: 25px;
line-height: 27px;
letter-spacing: -1px;
}
div.post div.quote div.quote_text span.long {
font-size: 16px;
line-height: 20px;
}
div.post div.quote div.quote_text a {
color: {color:Quote};
}
div.post div.quote div.source {
font-size: 16px;
font-weight: Bold;
color: {color:Quote Source};
margin-top: 5px;
}
div.post div.quote div.source a {
color: {color:Quote Source};
}
/* Link Post */
div.post div.link a.link {
font: Bold 20px Helvetica, sans-serif;
letter-spacing: -1px;
color: {color:Link Post};
}
div.post div.link span.description {
font-size: 13px;
font-weight: normal;
letter-spacing: -1px;
color: {color:Text};
}
/* Conversation Post */
div.post div.conversation ul {
list-style-type: none;
margin: 0px;
padding: 0px 0px 0px 1px;
border-left: solid 5px {color:Conversation Border};
}
div.post div.conversation ul li {
font-size: 12px;
padding: 4px 10px 4px 8px;
color: {color:Conversation Text};
margin-bottom: 1px;
}
div.post div.conversation ul li span.label {
font-weight: bold;
}
div.post div.conversation ul li span.user_1 {
color: #c00;
}
div.post div.conversation ul li span.user_2 {
color: #00c;
}
div.post div.conversation ul li span.user_3 {
color: #0a0;
}
div.post div.conversation ul li.odd {
background-color: {color:Conversation Background 1};
}
div.post div.conversation ul li.even {
background-color: {color:Conversation Background 2};
}
/* Video Post */
div.post div.video {
width: 400px;
margin: auto;
}
/* Footer */
div#footer {
margin: 40px 0px 30px 0px;
text-align: center;
font-size: 15px;
font-weight: bold;
color: {color:Text};
}
div#footer a {
text-decoration: none;
color: {color:Text};
}
div#footer a:hover {
text-decoration: underline;
}
div#footer div#credit {
font: Normal 13px Georgia, serif;
font-size: 13px;
margin-top: 15px;
}
{CustomCSS}
</style>
<script type="text/javascript">
function show_notes(s) {
id=s.substring(s.lastIndexOf('/')+1,s.length);
window.open('http://www.tumblr.com/dashboard/notes/'+id+'/DQrI2w9r6','_blank','width=500,height=600,scrollbars=1,resizable=1');
}
</script>
<meta name="verify-v1" content="*****************************************" />
</head>
<body>
<h1>
<a href="/">{Title}</a>
<a href="/rss"><img src="/themes/5/rss.gif" id="rss" alt="RSS"/></a>
</h1>
<div id="content">
<div id="description">
<div>
{Description}
<p><a href="/archive">Archive</a></p>
</div>
</div>
{block:Posts}
<div class="post">
{block:NewDayDate}
<div class="date">
<div class="date_brick">
{ShortMonth}<br/>
{DayOfMonth}{DayOfMonthSuffix}
</div>
{ShortDayOfWeek}
</div>
{/block:NewDayDate}
<a href="{Permalink}"><img src="/themes/5/permalink.gif"
class="permalink" alt="permalink"/></a>
{block:Regular}
<div class="regular">
{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
{Body}
</div>
{/block:Regular}
{block:Photo}
<div class="photo">
{LinkOpenTag}<img src="{PhotoURL-100}" alt="{PhotoAlt}"/>{LinkCloseTag}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
<!--[
<div class="photo">You can read this article via your dashboard@tumblr only.</div>
]-->
{/block:Photo}
{block:Quote}
<div class="quote">
<div class="quote_text"><span class="{Length}">{Quote}</span></div>
{block:Source}
<div class="source">— {Source}</div>
{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="link">
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
<span class="description">{Description}</span>
{/block:Description}
</div>
{/block:Link}
{block:Conversation}
<div class="conversation">
{block:Title}
<h2><a href="{Permalink}">{Title}</a></h2>
{/block:Title}
<ul>
{block:Lines}
<li class="{Alt}">
{block:Label}
<span class="label user_{UserNumber}">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
{/block:Conversation}
{block:Audio}
<div class="audio">
{AudioPlayerBlack}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Audio}
{block:Video}
<div class="video">
{Video-400}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Video}
<div class="showDetail">
<a href="#" onclick="show_notes('{Permalink}');return false;">show detail on this post</a>
</div>
{block:RebloggedFrom}
<div class="reblogInfo">
Reblogged from <a target="_new" href="{ReblogParentURL}" title="{ReblogParentTitle}"><img border="0" src="{ReblogParentPortraitURL-16}" /></a>
Posted by <a target="_new" href="{ReblogRootURL}" title="{ReblogRootTitle}"><img border="0" src="{ReblogRootPortraitURL-16}" /></a>
</div>
{/block:RebloggedFrom}
</div>
{/block:Posts}
<div id="footer">
{block:PreviousPage}
<a href="{PreviousPage}">« Previous</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}">Next »</a>
{/block:NextPage}
<div id="credit">
Powered by <a href="http://www.tumblr.com/"
target="_blank">Tumblr</a>
</div>
</div>
</div>
</body>
</html>
Advanced
.showDetail { text-align: right; font-weight: bold; font-size: x-small; margin: 15px 0px 20px 0px; }
.reblogInfo { text-align: right; font-weight: bold; font-size: x-small; margin: 15px 0px 20px 0px; color: #04F; }
参考
- a random Tumblr
「Dashboard の notes をとりあえず表ページでも見られるように」する方法 (cxx版・その1) - Untitled Shanti - Reblog notes script
a random Tumblr (cxxさん) の方法を改良した版の紹介と解説 (cxx版・その2) - MCSG SYM
「cxx版・その2」をさらに改造したもの (MCSG SYM版) - 2008-01-19 - MCSG SYM - たんぶら部 - Tumblove -
上記の「MCSG SYM版」を実際に適用しているテンプレートの例 - fialux’s clipboard
「Reblogged from リブログ元のユーザのアイコン Posted by ファーストポストしたユーザのアイコン」を表示する方法 - Tumblr: Creating a custom HTML theme for your tumblelog
tumblr の各種テンプレートタグの解説 (公式) - Tumblr Features - Uploading Media
Photo や Video の表示pixel数の変更方法 (上記の「テンプレートタグの解説」の方が情報としては新しい)
tumblr 内で「tumblr をカスタマイズする」話が書かれている場合、「表」のエントリを読んでも、意味がよくわからないことがあるのが難点。「裏」(dashboard) だとちゃんと読めるかというと、必ずしもそういう訳ではなくて、当該エントリをリブログするために開いたエディタ内で html ソースが読める状態に持ち込んで、やっと意味がわかったりします。結構、ややこしい。
そういうこともあって、今回、tumblr の外でテンプレートをさらすことで、どういうカスタマイズをやっているのか、すぐに読める状態にしてみました。特に、ソースコード中にコメントとか書いていませんが、何がどうなってるかは、それとなくわかると思います。難しいことはしてないし。
以上、何かの参考になるとうれしいです。
投稿者: tsupo 2008.02.06 午前 05:41
| 固定リンク
| 
| 
| 
|
アマゾンわくわく探検隊
トラックバック
この記事のトラックバックURL:
この記事へのトラックバック一覧です: 自分の tumblr のテンプレートをさらしてみる:
» tumblr カスタマイズ- Reblogged from アイコン表示ソース from kisatonomori blog
[観] 自分の tumblr のテンプレートをさらしてみる
こちらに紹介されてる
「Reblogged from リブログ元のユーザのアイコン
Posted by
ファーストポストしたユーザのアイコン」を表示する方法
これってかなりいいな～ということでここだけソースメモ
いままで誰からリブログしたか、元々のリンク先がどこなのか
最初にポストした人は誰なのかわかりにくかったけど、
これなら一目でわかります。
↑あ・これファーストとリブログポストおなじ人だったw
... 続きを読む
新着情報
