自分の tumblr のテンプレートをさらしてみる

観測気球

収集物の記録書庫 a data archive of collection -- collectible toys

[要旨] 私の tumblr のカスタマイズ状況をメモっておきます。参考になるようなら、参考にしてください。というか、私も、他の人のを参考にしつつ、カスタマイズしてるんですけどね。
[キーワード] tumblr,テンプレート,タグ,カスタマイズ

« 今週のお買い物 (2008.01.27~02.02) | トップページ | メモ: ランキング »

2008.02.06

自分の tumblr のテンプレートをさらしてみる

以下、「はらへた」で使っている、2008年2月6日現在のテンプレートです。dashboard で見かけた、各種 tips を参考にさせていただいています。 Thanks! cancer

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">&mdash; {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}">&#171; Previous</a> &nbsp;&nbsp;
                {/block:PreviousPage}
                
                {block:NextPage}
                    <a href="{NextPage}">Next &#187;</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; }

参考

tumblr 内で「tumblr をカスタマイズする」話が書かれている場合、「表」のエントリを読んでも、意味がよくわからないことがあるのが難点。「裏」(dashboard) だとちゃんと読めるかというと、必ずしもそういう訳ではなくて、当該エントリをリブログするために開いたエディタ内で html ソースが読める状態に持ち込んで、やっと意味がわかったりします。結構、ややこしい。

そういうこともあって、今回、tumblr の外でテンプレートをさらすことで、どういうカスタマイズをやっているのか、すぐに読める状態にしてみました。特に、ソースコード中にコメントとか書いていませんが、何がどうなってるかは、それとなくわかると思います。難しいことはしてないし。

以上、何かの参考になるとうれしいです。

投稿者: tsupo 2008.02.06 午前 05:41 | 固定リンク | このエントリーをはてなブックマークに追加 | このエントリを del.icio.us に登録 このエントリの del.icio.us での登録状況 | このエントリを Buzzurl に追加このエントリの Buzzurl での登録状況 | このエントリをlivedoorクリップに登録 このエントリのlivedoorクリップでの登録状況 このエントリをlivedoorクリップに登録している人の数 | 酢鶏巡回中

楽天市場


ウェブログ・ココログ関連」カテゴリ内の最近の記事

品揃え豊富で安い!NTT-X Store


アマゾンわくわく探検隊

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/6737/40012012

この記事へのトラックバック一覧です: 自分の tumblr のテンプレートをさらしてみる:

» tumblr カスタマイズ- Reblogged from アイコン表示ソース from kisatonomori blog
[観] 自分の tumblr のテンプレートをさらしてみる こちらに紹介されてる 「Reblogged from リブログ元のユーザのアイコン Posted by ファーストポストしたユーザのアイコン」を表示する方法 これってかなりいいな~ということでここだけソースメモ いままで誰からリブログしたか、元々のリンク先がどこなのか 最初にポストした人は誰なのかわかりにくかったけど、 これなら一目でわかります。 ↑あ・これファーストとリブログポストおなじ人だったw ... 続きを読む

受信: 2008.02.09 午前 08:40

コメント

コメントを書く




※イタズラ防止のため、メールアドレスを入力しないと投稿できません。

次からのコメント入力の手間を省くために、名前やメールアドレスをcookieに記憶しますか?


URL を入力すると、その URL にリンクがはられます。
なお、メールアドレスは公開されません。ご安心ください。


ワード

ニッセン

fujisan.co.jp

楽天市場