Mellow Like A … のテーマ - otsune tumblr まとめサイト画像保管庫Q

Click here to lend your support to: tombloo and make a donation at www.pledgie.com !

View my page on tumblrist

2009-05-01T06:00:23Z

Mellow Like A … のテーマ

vhudy6tx4dik9ol:

lookalikelike:

お友だち用覚書き

このテーマはHigh-Res Photos対応なので、必ず Customize > Advanced で Enable high-res photos にチェックを入れて下さい。チェックを入れてもテーマを書き換えない限りは大きな画像で表示されることはないです。最近は新しくTumblrを始めるとデフォルトでチェック入ってるので、チェックされてるかどうかの確認だけでいいと思います。
そちらがファーストポストしたのをリブログした時にこちらのサイトで大きな画像が見られるので、このテーマを使わないにしてもチェックは入れといてもらえると嬉しいです。折角なので大きな画像で見たい！

一番下のShuffleボタンはいらなければ丸ごと削除して下さい（CSSのshuffleの部分も）。使うなら http://***.tumblr.com/ の***の部分を自分のIDに変更すれば使えると思います。

下のテーマをコピーして Customize > Theme > Use custom HTML を押して出てきたフォームに丸ごと入れ替えペーストしてしまえばだいたい同じになると思います。ほんの少しだけ汎用性もたせました。色が変わらないって時はその横の Appearance から Reset default colors を押せばコピペしたテーマの先頭に指定してある色に変わるとおもいます。他の色に変更したいときはテーマを書き換えるのが面倒ならAppearanceの方で変えてしまうのが楽でしょう。

<!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>
        <!-- DEFAULT COLORS -->
        <meta name="color:Background" content="#fff"/>
        <meta name="color:Content Background" content="#fff"/>
        <meta name="color:Header Background" content="#fff"/>
        <meta name="color:Title" content="#4AADF0"/>
        <meta name="color:Description" content="#094E7C"/>
        <meta name="color:Date" content="#666"/>
        <meta name="color:Permalinks" content="#4AADF0"/>
        <meta name="color:Post Title" content="#333"/>
        <meta name="color:Text" content="#333"/>
        <meta name="color:Inline Link" content="#4AADF0"/>
        <meta name="color:Quote" content="#333"/>
        <meta name="color:Quote Source" content="#666"/>
        <meta name="color:Link Post" content="#4AADF0"/>
        <meta name="color:Conversation Background 1" content="#f4f4f4"/>
        <meta name="color:Conversation Background 2" content="#e8e8e8"/>
        <meta name="color:Conversation Border" content="#ccc"/>
        <meta name="color:Conversation Text" content="#000"/>
        <meta name="color:Photo Background" content="#f2f2f2"/>
        <meta name="color:Video Background" content="#f2f2f2"/>
        <!-- END DEFAULT COLORS -->

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>{Title}{block:PostSummary} - {PostSummary}{/block:PostSummary}{block:TagPage} [{Tag}]{/block:TagPage}</title>
        <link rel="icon" href="{Favicon}"/>
        <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
        <meta name="viewport" content="width=675"/> <!-- iPhone -->

        <style type="text/css">
            body {
                color:            {color:Text};
                margin:           30px;
                background-color: {color:Background};
                font-family:      'Lucida Grande', Helvetica, sans-serif;
            }
            
            #content {
                width:            570px;
                margin:           auto;
                padding:          30px;
                background-color: {color:Content Background};
            }

            a {
                color:            {color:Inline Link};
            }

            h1 {
                padding:          0px;
                margin:           0px;
                font:             Normal 30px Helvetica, sans-serif;
                line-height:      33px;
                letter-spacing:   -1px;
            }
            
            h1 a {
                color:            {color:Title};
                text-decoration:  none;
            }

            div#header {
                background-color: {color:Header Background};
                margin:           0 0 15px;
                padding:          0;
            }

            div#description {
                font-size:        14px;
                margin-top:       10px;
                color:            {color:Description};
            }
            
            div#description a {
                color:            {color:Description};
            }

            .date {
                font:             Normal 12px/1.25 Helvetica, sans-serif;
                border-bottom:    dotted 1px {color:Conversation Border};
                margin-bottom:    10px;
                text-transform:   uppercase;
            }
                .date a {
                    color: {color:Date};
                    text-decoration: none;
                }
                .date a:hover {
                    color: {color:Inline Link};
                }
            
            .post {
                margin-bottom:    40px;
                position:         relative;
            }

            .post h2 {
                font-weight:      Normal;
                font-size:        20px;
                color:            {color:Post Title};
                margin:           0px 0px 10px 0px;
            }

            .post h2 a {
                color:            {color:Post Title};
                text-decoration:  none;
            }
            
            /* Regular Post */
            .post .regular {
                font-size:        12px;
                line-height:      17px;
            }

            .post .regular blockquote {
                font-style:       italic;
            }

            pre {
                border: 1px solid #ccc;
                background: #fafafa;
                overflow: auto;
            }
            
            /* Photo Post */
            .post .photo {
                padding:          18px;
                background-color: {color:Photo Background};
            }
            
            .post .photo img {
                border:           solid 17px {color:Content Background};
            }

            .post .photo .caption {
                font-size:        13px;
                margin-top:       17px;
            }
            
            .post .photo .caption a {
                color:            {color:Text};
            }
            
            /* Quote Post */
            .post div.quote {
                padding: 0px 30px 0px 30px;
            }
            
            .post div.quote span.quote {
                font-size:        18px;
                letter-spacing:   -0.5px;
                color:            {color:Quote};
            }

            .post div.quote span.quote a {
                color:            {color:Quote};
            }

            .post div.quote span.quote big.quote {
                font-weight:      bold;
                font-size:        60px;
                line-height:      0px;
                vertical-align:   -28px;
                opacity:          0.5;
                -moz-opacity:     0.5;
                filter:           alpha(opacity=50);
                margin-left: -0.52em;
            }
            
            .post div.quote .source {
                font-size:        14px;
                color:            {color:Quote Source};
                margin-top: 0.5em;
            }

            .post div.quote .source a {
                color:            {color:Quote Source};
            }
            
            /* Link Post */
            .post .link a.link {
                font:             Bold 30px Helvetica, sans-serif;
                letter-spacing:   -1px;
                color:            {color:Link Post};
                text-decoration:  none;
                border-bottom:    dotted 1px {color:Link Post};
                line-height:      36px;
            }

            .post .link .description {
                font-weight:      normal;
                font-size:        14px;
                margin-top:       5px;
            }
            
            /* Conversation Post */
            .post .conversation ul {
                list-style-type:  none;
                margin:           0px 0px 5px 0px;
                padding:          1px;
                border:           solid 5px {color:Conversation Border};
            }
            
            .post .conversation ul li {
                font-size:        12px;
                padding:          4px 0px 4px 8px;
                color:            {color:Conversation Text};
            }
            
            .post .conversation ul li span.label {
                font-weight:      bold;
            }
            
            .post .conversation ul li.odd {
                background-color: {color:Conversation Background 1};
            }
            
            .post .conversation ul li.even {
                background-color: {color:Conversation Background 2};
            }
            
            /* Audio Post */
            .post .audio .caption {
                margin-top:       5px;
                font-size:        11px;
                color:            {color:Text};
            }
            
            .post .audio .caption a {
                color:            {color:Text};
            }
            
            /* Video Post */
            .post .video {
                width:            500px;
                margin:           auto;
                padding:          35px;
                background-color: {color:Video Background};
            }

            .post .video .caption {
                margin-top:       15px;
                font-size:        13px;
                color:            {color:Text};
                visibility: visible;
            }

            .post .video .caption ul {
                list-style-type: circle;
            }

            .post .video .caption a {
                color:            {color:Text};
            }

            /* Footer */
            #footer {
                margin:           20px 0px 0px 0px;
                text-align:       center;
                font-size:        18px;
            }
            
            #footer a {
                text-decoration:  none;
                color:            {color:Text};
            }
            
            #footer a:hover {
                text-decoration:  underline;
            }

            #footer p.tiny {
                margin:           30px 0px 0px 0px;
                font-size:        11px;
            }
            
            #footer p.tiny a {
                text-decoration:  underline;
                color:            {color:Text};
                font-weight:      bold;
            }

            #footer p.tiny .dim {
                filter:           alpha(opacity=50);
                -moz-opacity:     0.5;
                opacity:          0.5;
            }

            /* Permalinks */
            .post a.permalink,
            .post .photo .caption a.permalink,
            .post .video .caption a.permalink,
            .post .audio .caption a.permalink,
            .post .quote .source a.permalink {
                font-size:        10px;
                font-weight:      bold;
                color:            {color:Permalinks};
                margin-left: .5em;
            }

/*** CustomCSS ***/

        #header #portrait {
            float: right;
            padding: 1px;
            border: 1px solid {color:Photo Background};
        }

        /* sidebar */
            #sidebar{
                clear: both;
                font-size:10px;
                text-align: right;
                margin: 10px auto;
                color: {color:Text};
                padding: 7px;
                background-color: {color:Photo Background};
            }

            #sidebar * {
                margin: 0;
                padding: 0;
            }

            #sidebar a {
                color: {color:Permalinks};
                text-decoration: none;
            }

            #sidebar a:hover{
                color: {color:Text};
            }

            #sidebar ul {
                padding: 0;
            }

            #sidebar li {
                list-style: none;
                display: inline;
                padding-left: 15px;
            }

            #sidebar form {
                display: inline;
            }
            #sidebar form input {
                width: 110px;
                border: none;
                padding: 2px;
            }

        /* search-result */
            .searchresultcount {
                text-align:             center;
            }
            .query {
                font-weight:            bold;
            }

        /* Tag &lt; notes */
            .post .tag {
                margin: 0;
                padding: 0;
                color: {color:Text};
                font: normal 10px/12px Verdana, sans-serif;
                text-align: right;
            }

            .tag a {
                color: {color:Text};
                text-decoration: none;
            }

            .tag a:hover {
                color: {color:Inline Link};
            }

            .tag a img {
                border: 0;
                vertical-align: middle;
                margin: 0 2px;
            }

            ul#tag_list {
                margin: 0;
                padding: 0;
            }

            ol.notes {
                margin-top: 0;
                padding: 0;
                list-style-type: none;
                color: {color:Date};
                line-height: 1;
                font: normal x-small/1.25 Verdana, sans-serif;
                background-color: {color:Photo Background};
            }

            ol.notes li.note {
                border-bottom: 2px solid {color:Background};
                padding: 5px 10px;
                margin: 0;
            }
                ol.notes li:hover.note {background-color: {color:Conversation Background 1};}

            ol.notes li.note a {
                text-decoration: none;
                border-bottom: none;
                color: {color:Text};
            }
                ol.notes li.note a:hover {
                    color: {color:Inline Link};
                }

            ol.notes li.note img {
                margin-right: 10px;
                border: none;
                vertical-align: middle;
            }

        /* permalink page */

            #permalink {
                margin: 5px 10px 10px;
            }

            #permalink #content {
                width: auto;
                padding: 0;
            }

            #permalink h1 {
                margin: 0 0 5px;
                padding: 0;
                font-size: 1em;
                line-height: 1;
            }

            #permalink #header {
                margin: 0;
                padding: 0;
            }

            #permalink #description, #permalink #portrait {
                display: none;
            }

            #permalink #sidebar {
                margin: 0;
                padding: 3px 0;
                text-align: center;
            }

            #permalink #sidebar li {
                padding: 0 15px;
            }

            #permalink .date {
                font-size: 11px;
                line-height: 18px;
                height: 16px;
                border-bottom: none;
                margin-bottom: 0;
            }

            #permalink .post .photo {
                padding: 0;
                background-color: {color:Background};
            }
            
            #permalink .post .photo img {
                border: none;
                max-width: 100%;
            }

        /* shuffle */
            p.shuffle {
                position: fixed;
                top: -13px;
                left: 3px;
                _position: static;
                _text-align: right;
                z-index: 1;
            }
                *:first-child+html p.shuffle {
                    top: 3px;
                }

            p.shuffle a img {
                border: none;
            }

            {CustomCSS}
        </style>
    </head>

    <body{block:PermalinkPage} id="permalink"{/block:PermalinkPage}>
        <div id="content">
            <div id="header">
                <a href="/"><img id="portrait" src="{PortraitURL-48}" alt="User Portrait"/></a>
                <h1><a href="/">{Title}</a></h1>
                
                {block:Description}
                    <div id="description">
                        {Description}
                    </div>
                {/block:Description}
            </div>

            <div id="sidebar">
                <ul>
                    <li><a href="/random">Random</a></li>
                    <li><a href="/archive">Archive</a></li>
                    <li><form action="/search" method="get"><input type="text" name="q" value="{SearchQuery}"/></form></li>
                </ul>
            </div>

                        {block:SearchPage}
                            <div class="searchresultcount">
                                <p>Your search for <span class="query">{SearchQuery}</span> returned {SearchResultCount} result(s)</p>
                            </div>
                        {/block:SearchPage}

            {block:Posts}
                {block:NewDayDate}
                    <div class="date">
                        {Month} {DayOfMonth}, {Year}
                    </div>
                {/block:NewDayDate}
            
                <div class="post">
                    {block:Regular}
                        <div class="regular">
                            {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
                            {Body}
                            <a href="{Permalink}" class="permalink">{TimeAgo}</a>
                        </div>
                    {/block:Regular}

                {block:IndexPage}
                    {block:Photo}
                        <div class="photo">
                            {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
                            <div class="caption">
                                {Caption}
                                <a href="{Permalink}" class="permalink">{TimeAgo}</a>
                            </div>
                        </div>
                    {/block:Photo}
                {/block:IndexPage}

                {block:PermalinkPage}
                    {block:Photo}
                        <div class="photo">
                            {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}
                            <div class="caption">
                                {Caption}
                                <a href="{Permalink}" class="permalink">{TimeAgo}</a>
                            </div>
                        </div>
                    {/block:Photo}
                {/block:PermalinkPage}

                    {block:Quote}
                        <div class="quote">
                            <span class="quote">
                                <big class="quote">&#147;</big> {Quote}
                            </span>
                            <div class="source">
                                {Source}
                                <a href="{Permalink}" class="permalink">{TimeAgo}</a>
                            </div>
                        </div>
                    {/block:Quote}
                    
                    {block:Link}
                        <div class="link">
                            <a href="{URL}" class="link" {Target}>{Name}</a>
                            <div class="description">
                                {Description}
                                <a href="{Permalink}" class="permalink">{TimeAgo}</a>
                            </div>
                        </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">{Label}</span>{/block:Label}
                                        {Line}
                                    </li>
                                {/block:Lines}
                            </ul>
                            <a href="{Permalink}" class="permalink">{TimeAgo}</a>
                        </div>
                    {/block:Conversation}
                    
                    {block:Audio}
                        <div class="audio">
                            {AudioPlayerBlack}
                            <div class="caption">
                                {Caption}
                                <a href="{Permalink}" class="permalink">{TimeAgo}</a>
                            </div>
                        </div>
                    {/block:Audio}
                    
                    {block:Video}
                        <div class="video">
                            {Video-500}
                            <div class="caption">
                                {Caption}
                                <a href="{Permalink}" class="permalink">{TimeAgo}</a>
                            </div>
                        </div>
                    {/block:Video}

                    <p class="tag">
                        {block:HighRes}[<a href="{PhotoURL-HighRes}">High-Res</a>]{/block:HighRes}
                        {block:NoteCount}
                            &nbsp;&nbsp; <a href="{Permalink}">{NoteCountWithLabel}</a>
                        {/block:NoteCount}
                        {block:RebloggedFrom}
                            &nbsp;&nbsp; via <a href="{ReblogParentURL}" title="Reblogged from {ReblogParentName}"><img src="{ReblogParentPortraitURL-16}" alt="{ReblogParentName}" /></a> | 
                            <a href="{ReblogRootURL}" title="Posted by {ReblogRootName}"><img src="{ReblogRootPortraitURL-16}" alt="{ReblogRootName}" /></a>
                        {/block:RebloggedFrom}
                        {block:HasTags}
                            &nbsp;&nbsp; Tag: {block:Tags}<a href="{TagURL}">{Tag}</a><a href="{TagURLChrono}" title="chronological order">&#169;</a> {/block:Tags}
                        {/block:HasTags}
                    </p>
                    {block:PostNotes}
                        {PostNotes}
                    {/block:PostNotes}

                </div>
            {/block:Posts}

            <div id="footer">
            {block:Pagination}
                {block:PreviousPage}
                    <a href="{PreviousPage}">&#8592; Previous</a> &nbsp;&nbsp;
                {/block:PreviousPage}
                <span class="page">{CurrentPage}/{TotalPages}</span> &nbsp;&nbsp;
                {block:NextPage}
                    <a href="{NextPage}">Next &#8594;</a>
                {/block:NextPage}
            {/block:Pagination}

            {block:PermalinkPagination}
                {block:PreviousPost}
                    <a href="{PreviousPost}">&#8592; Older</a> &nbsp;&nbsp;
                {/block:PreviousPost}
                <span class="page"><a href="/random">Random</a></span> &nbsp;&nbsp;
                {block:NextPost}
                    <a href="{NextPost}">Newer &#8594;</a>
                {/block:NextPost}
            {/block:PermalinkPagination}

            {block:DayPagination}
                {block:PreviousDayPage}
                    <a href="{PreviousDayPage}">&#8592; {ShortMonth} {DayOfMonth}</a> &nbsp;&nbsp;
                {/block:PreviousDayPage}
                <span class="page"><a href="/random">Random</a></span> &nbsp;&nbsp;
                {block:NextDayPage}
                    <a href="{NextDayPage}">{ShortMonth} {DayOfMonth} &#8594;</a>
                {/block:NextDayPage}
            {/block:DayPagination}

                <p class="tiny">
                    Subscribe via <a href="/rss">RSS</a>
                    &nbsp;<span class="dim">/</span>&nbsp;
                    Powered by <a href="http://tumblr.com/">Tumblr</a>
                </p>
            </div>
        </div>

{block:IndexPage}
<!-- shuffle (http://shanti.tumblr.com/post/19454866) -->
<script type="text/javascript">
<!--
function shuffle() {
    var s1='<p class="shuffle"><a href="http://***.tumblr.com/{block:TagPage}tagged/{Tag}/{/block:TagPage}';
    var s2='</a></p>';
    Total=0+{TotalPages};
    if(Total>0) {
        var r=Math.ceil(Math.random() * Total);
        document.write(s1+'page/'+r+'">'+'<img src="http://data.tumblr.com/OY9NpboAI5k99ruwwRS7l61l_500.png">'+s2);
    }
}
shuffle();
//-->
</script>
<!-- /shuffle -->
{/block:IndexPage}

    </body>
</html>

otsune

Source: lookalikelike

Comments (33 notes)

Comments