Toshi's Notes ～主にFlash,Flex,AS3の覚書: My Tumblr Template

http://toshigus.tumblr.com

This it my tumblr template. Originally this template was one of the official templere of "tumblr", but I fixed and fixed("KAIZEN" in Japanese).

Points I fixed:
*You can view texts and photos entirely.
*made colors and sizes of Font more beautiful and easier to recognize.
*changed the wallpaper.
*Added links
...and so on.

<!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>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <title>{Title}{block:PostSummary} - {PostSummary}{/block:PostSummary}</title>       
       <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
       <link rel="icon" href="{Favicon}"/>

       <!-- iPhone -->
       <meta name="viewport" content="width=860"/>
       <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
      
       <!-- DEFAULT COLORS -->
       <meta name="color:Alternate Text" content="#bfad8a"/>
       <!-- END DEFAULT COLORS -->       

       <style type="text/css">
           * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

           body {
            background: #000 url('http://raine.jp/reso/blog/monsan.jpg') fixed center top;
            font-family: arial,san-serif;
            font-size: 12px;
            color: #e4e4e4;
            text-align: center;
        }

           #container {
            width: 840px;
            margin: 0 auto;
            text-align: left;
        }
       
           .regular, .photo, .quote, .link, .conversation, .video, .audio, .metabox {
            padding: 10px;
        }

           .post {
            width: 270px;
            min-height: 450px;
            float: left;
            background: url('/themes/11/shade.png');
            margin-right: 10px;
            margin-bottom: 10px;
            position: relative;
            overflow: hidden;
        }

           .post:hover {
            background: #000;
        }

           .permalink {
            border-width: 0px;
            width: 100px;
            height: 11px;
            line-height: 11px;
            position: absolute;
            bottom: 10px;
            right: 10px;
            color: #333;
            text-align: right;
        }
       
           .permalink a {
            color: #e3e3e3;
            border-bottom: 1px dotted #333;
            font-size: 11px;
        }
       
           .permalink a:hover {
            color: #fafafa;
            border-bottom: 1px solid {color:Alternate Text};
        }
       
           .photobox {
            width: 260px;
            //min-height: 250px;
            overflow: hidden;
            margin-bottom: 10px;
        }

           .audio .photobox {
            background: #111;
        }

           .player {
            padding: 60px 20px;
            border: 1px solid #222;
        }

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

           .quotetext {
            font-size: 13px;
            font-family: Georgia;
            line-height: 22px;
            padding-bottom: 11px;
            color: {color:Alternate Text};
        }

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

           .caption {
            line-height: 18px;
        }

           .conversation ul li {
            line-height: 18px;
            border-bottom: 1px dotted #222;
            padding: 3px 0 3px 0px;
        }
       
           .conversation ul li span {
            color: {color:Alternate Text};
        }

           .even {
            border-bottom: 1px dotted #222;
        }
       
           ol li {
               list-style: decimal outside;
               margin: 0 0 0 20px;
               padding: 0 0 5px 0
           }

           a {
            color: {color:Alternate Text};
            border-bottom: 1px dotted #443e31;
            text-decoration: none;
        }

           a:hover {
            color: #CAC9C8;
            border-bottom: 1px solid #3F3F3F;
        }

           p {
            line-height: 18px;
            margin-bottom: 9px;

        }

           .photo strong, .photo b, .video strong, .video b, .audio strong, .audio b{
            font-family: Georgia;
            font-weight: normal;
            font-size: 17px;
            line-height: 18px;
            color: {color:Alternate Text};
        }

           h1 {
            font-family: Georgia;
            font-weight: normal;
            font-size: 17px;
            line-height: 18px;
            padding: 0 0 9px 0;
        }

           #header {
            padding: 40px 0 60px 0;
            position: relative;
        }

               #header h1 {
                width: 297px;
            }

                   #header h1 a {
                    color: #ffffff;
                    font-style: italic;
                    border: 0;border-bottom: 1px dotted #ffffff;
                    font-size: 28px;
                    line-height: 16px;
                }

                       #header h1 a:hover {
                        color: #fff;
                    }
        
      #header h2 {
       color: {color:Alternate Text};
       font: italic normal 1.2em/1.8 Georgia, serif;
      }


      #header toshi {
       color: #eeeeee;
       font: italic normal 1.2em/1.8 Georgia, serif;font-size: 12px;
      }

      #header toshi a{
       color: #eeeeee;
       font: italic normal 1.2em/1.8 Georgia, serif;font-size: 12px;border-bottom: 1px dotted #ffffff;
      }



               #header ul {
                position: absolute;
                left: 550px;
                top: 40px;
            }

                   #header ul li {
                    display: inline;color: #ffffff;
                }

           #header ul li form {
            display: inline;
           }
          
            #header ul li form #searchbox {
             background: #000;
             border: 1px solid {color:Alternate Text};
             opacity: 0.7;
             color: #fff;
            }
           
            #header ul li form #submitsearch {
             display: none;
            }

                       #header ul li a {
                        font-family: georgia;
                        color: #ddd;
                        font-style: italic;
                        border-bottom: 1px dotted #999;
                        margin-right: 11px;
                    }

                           #header ul li a:hover {
                            color: #fff;
                            border-bottom: 1px solid #fff;
                        }

           #navigation, .meta {
               text-align: center;
               height: 450px;
               float: left;
               width: 270px;
               background: url('/themes/11/shade.png');
           }

               #navigation a {
                   border: 0; font-size: 12px;
                   padding: 3px 8px;
                   background: #222;
               }

                   #navigation a:hover {
                       background: #333;
                   }

                   .pages {
                       font-family: Georgia;
                       font-size: 11px;
                       padding-bottom: 48px;
                   }

                       .pages span {
                           font-size: 90px;
                       }

           .total {
            color: #9e8e7e;
        }

           #footer {
            clear: both;
            padding: 40px 0;
            text-align: left;
        }

           body#perm #navigation {
            display: none;
        }

           body#perm .post {
            width: 550px;
        }

           body#perm .photobox, body#perm .videobox {
            float: right;
            margin-left: 10px;
        }

           .meta {
            display: none;
        }

           body#perm .meta {
            display: block;
            text-align: left;
        }

           body#perm .permalink {
            display: none;
        }

           .meta span, h3 {
            text-transform: uppercase;
            font-size: 10px;
            color: {color:Alternate Text};
            display: block;
            line-height: 18px;
        }

    #searchresultcount {
     text-align: left;
     margin-bottom: 20px;
     color: {color:Alternate Text};

    }

    .query { font-weight: bold; }
       
        {CustomCSS}
       </style>

       <!--[if IE]>
           <style type="text/css">
               .post, #navigation, .meta { background:#010101; }
       #header ul li form #searchbox { filter: alpha(opacity=70); }
           </style>
       <![endif]-->
   </head>
   <body {block:Permalink}id="perm"{/block:Permalink}>   
       <div id="container">    
        <div id="header">
               <h1><a href="/">{Title}</a></h1>
       <h2>{Description}</h2>
<toshi>Mail: raine.toshi@gmail.com</toshi><br/>
<toshi>Blog: <a href="http://r-toshi.blogspot.com/">Toshi's Web Diary</a></toshi>

         <ul>
             <li><a href="/archive">archive</a></li>
             <li><a href="{RSS}">rss feed</a></li>
       <li>
        <form action="/search" method="get">
            <input type="text"  size="15" id="searchbox" name="q" value="{SearchQuery}"/>
            <input type="submit"  id="submitsearch" value="Search"/>
        </form>
       </li>
         </ul>
        </div>
      
    {block:SearchPage}
    <div id="searchresultcount">
     <p>Your search for <span class="query">{SearchQuery}</span> returned {SearchResultCount} result(s).</p>
    </div>
    {/block:SearchPage}
   
           {block:Posts}
         <div class="post">
          {block:Regular}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>
           <div class="regular"> 
            {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
                           {Body}
                       </div>
                   {/block:Regular}
              
                   {block:Photo}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>
           <div class="photo">
            <div class="photobox">{LinkOpenTag}<img src="{PhotoURL-250}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>   
                           {block:Caption}
             <div class="caption">{Caption}</div>
                           {/block:Caption}
           </div>
                   {/block:Photo}
              
                   {block:Quote}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>
           <div class="quote">
                           <div class="quotetext">
             “ {Quote}
            </div>
                           {block:Source}<div class="source">— {Source}</div>{/block:Source}</div>
                   {/block:Quote}
              
                   {block:Link}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>
                       <div class="link">
            <h1><a href="{URL}" {Target}>{Name} » </a></h1>
                           {block:Description}
             <p class="description">{Description}</p>
                           {/block:Description}
                       </div>
                   {/block:Link}
              
          {block:Conversation}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></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="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>  
                       <div class="video"> 
                           <div class="videobox">{Video-250}</div>
                           {block:Caption}
                               <div class="caption">{Caption}</div>
                           {/block:Caption}
                       </div>
                   {/block:Video}
 
          {block:Audio}
              <div class="permalink"><a
              href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</a></div>
           <div class="audio">
                           <div class="photobox"><div class="player">{AudioPlayerBlack}</div></div>
                           {block:Caption}
                               <div class="caption">{Caption}</div>
                           {/block:Caption}
                       </div>
                   {/block:Audio}
               </div>

         <div class="meta">
             <div class="metabox">
                 <p><span>posted :</span> {MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} {24HourWithZero}:{Minutes}</p>
                 <p><span>tags :</span> {TagsAsClasses}</p>
                 {block:RebloggedFrom}<p><span>reblogged from :</span>
                 <a href="{ReblogParentURL}">{ReblogParentTitle}</a></p>{/block:RebloggedFrom}
             </div>

       <div style="font-size: 10px; text-align: left;"><a href="{Permalink}#disqus_thread">Comments (View)</a></div>
            </div>
           {/block:Posts}
{block:Permalink}
<script type="text/javascript">var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script>
<div id="disqus_thread"></div><script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/toshiswebmemo/embed.js"></script>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
{/block:Permalink}
<script type="text/javascript">
//<![CDATA[
(function() {
 var links = document.getElementsByTagName('a');
 var query = '?';
 for(var i = 0; i < links.length; i++) {
  if(links[i].href.indexOf('#disqus_thread') >= 0) {
   query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
  }
 }
 document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/toshiswebmemo/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>

        <div id="navigation">
         <div class="pages">
             <em>page</em> <span>{CurrentPage}</span> of
             <span class="total">{TotalPages}</span>
         </div>
        
      {block:PreviousPage}
       <a href="{PreviousPage}">« Previous Page</a>  
      {/block:PreviousPage}
  
      {block:NextPage}
       <a href="{NextPage}">Next Page »</a>
      {/block:NextPage}
        </div>

        <div id="footer">
         <a href="{RSS}">rss feed</a> /
         powered by <a href="http://www.tumblr.com/" target="_blank">tumblr</a> /
         theme by <a href="http://paulgiacherio.com" target="_blank">paulgiacherio</a>
        </div>
       </div>
2009/02/19

My Tumblr Template

0 Comment:

Toshi's Notes ～主にFlash,Flex,AS3の覚書

Profile

Archive

E-mail Address

Label

Comment
