スポンサーサイト

一定期間更新がないため広告を表示しています

Tumblr テーマのメモ:投稿タイプ別に表示を変える

設定は下記のように{block:***}〜{/block:***}で囲んだ部分が投稿別の表示になるようです。

{block:Text}Text{/block:Text}
{block:Link}Link{/block:Link}
{block:Quote}Quote{/block:Quote}
{block:Photo}Photo{/block:Photo}
{block:Photoset}Photoset{/block:Photoset}
{block:Video}Video{/block:Video}
{block:Audio}Audio{/block:Audio}
{block:Chat}Chat{/block:Chat}
{block:Answer}Answer{/block:Answer}

投稿別のパーマーリンク的に使っても良いかと思います。下記はテキスト投稿を場合のパーマーリンク。

{block:Text}<a href="{Permalink}">Text</a>{/block:Text}

Tumblr テーマのメモ

今回はこの部分を編集しました

Twitterのシェアボタン
<a href="javascript:(function(){window.twttr=window.twttr||{};var D=650,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C>A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('http://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');E=F.createElement('script');E.src='http://platform.twitter.com/bookmarklets/share.js?v=1';F.getElementsByTagName('head')[0].appendChild(E)}());" title="twitter share"><i class="icon-twitter"></i></a>
Facebookのシェアボタン
<a href="http://www.facebook.com/share.php?u={Permalink}" onclick="window.open(this.href, 'Facebook window', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"  title="facebook share"><i class="icon-facebook"></i></a>
Google+のシェアボタン
<a href="https://plus.google.com/share?url={Permalink}" onclick="window.open(this.href, 'Google+ window', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"  title="google+ share"><i class="icon-google-plus"></i></a>
Archiveへのリンクボタン
<a href="/archive" title="archive"><i class="icon-th-large"></i></a>
RSSへのリンクボタン
<a href="/rss" title="feed"><i class="icon-rss-sign"></i></a>
編集ページヘのリンクボタン
<a href="http://www.tumblr.com/edit/{PostID}" title="edit"><i class="icon-cog"></i></a>

アイコンはawesome.cssをdropboxにアップロードして使用しています。記事から編集ページへのリンクボタンは便利だと思います。もう少し記述を見なおしてみます。

下記は現在のテーマ
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<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" />
    {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
    
    <!-- Facebook -->
    <meta property="og:title" content="{Title}">
    <meta property="og:image" content="{PortraitURL-128}">

    {block:Title}<meta property="og:description" content="{Body}">{/block:Title}
    {block:Caption}<meta property="og:description" content="{Caption}">{/block:Caption}

    <!-- Twitter -->
    <meta name="twitter:image" content="{PhotoURL-100}" />
    <meta name="twitter:image" content="{PortraitURL-128}" />
    <meta name="og:title" content="{Title}" />
    <meta name="twitter:creator" content="memberjugem" />
    
    <!-- disable iPhone inital scale -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- /DEFULT -->
    <title>{block:IndexPage}{Title}{/block:IndexPage}{block:PostSummary}{PostSummary}{/block:PostSummary}</title>
    <link rel="shortcut icon" href="{Favicon}" />
    <link rel="alternate" type="application/rss+xml" href="{RSS}" />
    
    <!-- jquery.min.js -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
    <!-- jquery-ui.min.js -->
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>    
    <!-- lightbox.css -->
    <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/kium6gh/86Umdturg/lightbox.css">
    <!-- lightbox.js -->
    <script src="http://static.tumblr.com/kium6gh/WYQmdtus6/lightbox.js" type="text/javascript"></script>
    <!-- ui.totop.css -->
    <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/kium6gh/OWPmdrs6e/ui.totop.css">
    <!-- slowdownScroll.js -->
    <script src="http://static.tumblr.com/kium6gh/KGRmdrtzp/slowdownscroll.js" type="text/javascript"></script>
    <!-- easing plugin ( optional ) -->
    <script src="http://static.tumblr.com/kium6gh/W8Mmdrs8s/easing.js" type="text/javascript"></script>
    <!-- UItoTop plugin -->
    <script src="http://static.tumblr.com/kium6gh/fwGmdrsal/jquery.ui.totop.js" type="text/javascript"></script>

    <!-- Starting the plugin -->
    <script type="text/javascript">
    $(document).ready(function() {
        
        var defaults = {
              containerID: 'toTop', // fading element id
            containerHoverID: 'toTopHover', // fading element hover id
            scrollSpeed: 1200,
            easingType: 'linear'
         };
        
            
        $().UItoTop({ easingType: 'easeOutQuart' });
            
    });
    </script>

    <!-- jquery.vgrid -->
    <script src="http://dl.dropbox.com/u/60471214/js/jquery.easing.1.3.js" type="text/javascript" charset="UTF-8"></script>
    <script src="http://dl.dropbox.com/u/60471214/js/jquery.vgrid.0.1.8.js" type="text/javascript" charset="UTF-8"></script>

    <script type="text/javascript">   
    jQuery(function(){
        jQuery("#grid-content").vgrid({
            easeing: "easeOutQuint",
            useLoadImageEvent: true,
            time: 800,
            delay: 40,
            fadeIn: { //フェードインの指定
                time: 500,
                delay: 50
            }
        });
    });
    </script>  
    <!-- /jquery.vgrid -->
    
    <!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    
    <!-- font-awesome -->
    
    <link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/60471214/font.awesome/css/font-awesome.css">

    <link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/60471214/font.awesome/css/font-awesome-ie7.css">

<style type="text/css">
/* general
--------------------------------------------*/
* {margin:0px;padding:0px;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
a {text-decoration:underline;overflow:hidden;outline:none;}
img {border:none;vertical-align:middle;}
li {list-style-type:none;}
hr {display:none;clear:both;}
br.clear {clear:both;}

html {color:#000000; font-size: 100%;}

a {color:#B0B0B0; text-decoration:none;}
a:link {color:#B0B0B0; text-decoration:none;}
a:visited {color:#B0B0B0; text-decoration:none;}
a:hover {color:#000000; text-decoration:underline;}
a:active {color:#B0B0B0; text-decoration:none;}

body {
width:100%;
text-align:center;
font-family:Arial,"Hiragino Kaku Gothic Pro",Meiryo,"MS PGothic",sans-serif;
background-color:#ffffff;
line-height: 1.8; /* standard */
line-height: 1.8¥9; /* IE 8 and below */
*line-height: 1.6; /* IE 7 and below */
_line-height: 1.6; /* IE 6 */
}

/* layout
--------------------------------------------*/
#wrap {
width: 1100px;
background-color: #f5f8ff;
margin: 0px auto;
padding: 10px 5px 10px 5px;
text-align: left;
}

#header {
width: 1090px;
/* height: ; */
margin: 0px auto 5px;
padding: 0px;
background-color:#bccddb;
}

#main {
background-color: ;
margin: 0 0px;
}

#grid-content {
overflow: hidden;
height: 0;
}

#grid-content div.vgrid {
width: 500px;
height: auto;
background-color: #ffffff;
color: #000000;
margin: 5px;
padding: 20px;
}

#footer {
clear: left;
width: 1010px;
background-color: #f5f8ff;
margin:0px auto;
padding: 10px;
}
/* #header
--------------------------------------------*/
#header .header a {
    color: #333333;
    font-weight: bold;
    font-size: 160%;
    margin: 0 0 0 12px;
}
/* #main
--------------------------------------------*/
/*  #content
--------------------------------------------*/
/*   #post
--------------------------------------------*/
#grid-content .vgrid .header {
    color: #D0D0D0;
    font-weight: bold;
    font-size: 160%;
    line-height: 1.6; /* standard */
    line-height: 1.6¥9; /* IE 8 and below */
    *line-height: 1.2; /* IE 7 and below */
    _line-height: 1.2; /* IE 6 */
    margin-bottom: 2.0em;
}
#grid-content .vgrid .content img {
    max-width: 100%;
}
#grid-content .vgrid .content ul {
    margin: 0.5em 0 0.5em 2.0em;
}
#grid-content .vgrid .content li {
    list-style-type: disc;
}
#grid-content .vgrid .content blockquote img {
    max-width: 100%;
}
#grid-content .vgrid .caption {
    margin: 1em 0;
}
#grid-content .vgrid .caption ul {
    margin: 0.5em 0 0.5em 2.0em;
}
#grid-content .vgrid .caption li {
    list-style-type: disc;
}
#grid-content .vgrid .headerz {
    color: #D0D0D0;
    font-weight: bold;
    font-size: 160%;
}
#grid-content .vgrid .contenz {}
/*------------------------------------------*/
#grid-content .vgrid ul.chat {
    list-style: none;
    margin: 0;
    padding: 0 15px;
    border: 1px solid #F5F5F5;
    border-radius: 6px;
    background: #FAFAFA;
}
#grid-content .vgrid ul.chat li {
    margin: 15px 0;
    padding: 15px;
    border: 1px solid #F5F5F5;
    border-radius: 6px;
    background: #FFFFFF;
}
#grid-content .vgrid ul.chat .chat_label {
    margin-right: 6px;
    color: #B0B0B0;
    font-weight: bold;
}
/*------------------------------------------*/
#grid-content .vgrid .audio .albumart {
    margin-bottom: 1em;
}
#grid-content .vgrid .audio .audioinfo ul {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #808080;
}
#grid-content .vgrid .audio .audioinfo ul li.audioplayer {
    color: $B0B0B0;
    font-size: 11px;
}
#grid-content .vgrid .audio .audioinfo ul li.artist,
#grid-content .vgrid .audio .audioinfo ul li.trackname {
    font-weight: bold;
}
/*------------------------------------------*/
#grid-content .vgrid ul.source {
    list-style: none;
    overflow: hidden;
    margin: 1em 0 0 0;
    padding: 0;
    font-weight: bold;
    /zoom: 1;
}
#grid-content .vgrid ul.source li {
    display: inline;
}
#grid-content .vgrid ul.source li a {
    display: block;
    float: right;
    padding: 6px 10px;
    border-radius: 3px;
    line-height: 1;
}
#grid-content .vgrid ul.source li a:link, #post .post ul.source li a:visited {
    background: #B0B0B0;
    color: #FFFFFF;
    text-decoration: none;
}
#grid-content .vgrid ul.source li a:hover, #post .post ul.source li a:active {
    background: #000000;
    color: #FFFFFF;
    text-decoration: none;
}
/*------------------------------------------*/
#grid-content .vgrid ul.tags {
    list-style: none;
    margin: 1em 0 0 0;
    padding: 0;
    color: #B0B0B0;
    font-size: 11px;
    text-align: right;
    line-height: 1.2;
}
#grid-content .vgrid ul.tags li {
    display: inline;
    margin: 0 0 0 6px;
}
#grid-content .vgrid ul.tags li a:before {
    content: "#";
}
#grid-content .vgrid ul.tags li a:link, #post .post ul.tags li a:visited {
    color: #B0B0B0;
    text-decoration: none;
}
#grid-content .vgrid ul.tags li a:hover, #post .post ul.tags li a:active {
    color: #000000;
    text-decoration: underline;
}
/*------------------------------------------*/
#grid-content .vgrid ul.information {
    list-style: none;
    margin: 1em 0 0 0;
    padding: 16px 0 0 0;
    border-top: 1px solid #F5F5F5;
    color: #B0B0B0;
    font-size: 11px;
    text-align: right;
    line-height: 1.2;
}
#grid-content .vgrid ul.information li {
    display: inline;
}
#grid-content .vgrid ul.information li+li:before {
    content: " | ";
    margin: 0 6px;
    color: #D0D0D0;
}
#grid-content .vgrid ul.information li a {
    font-weight: bold;
}
#grid-content .vgrid ul.information li a:link, #post .post ul.information li a:visited {
    color: #B0B0B0;
    text-decoration: none;
}
#grid-content .vgrid ul.information li a:hover, #post .post ul.information li a:active {
    color: #000000;
    text-decoration: underline;
}
/*  #note
--------------------------------------------*/
#note .content ol.notes {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #B0B0B0;
}
#note .content ol.notes li.more_notes_link_container {
    margin-top: 1em;
    padding-top: 16px;
    border-top: 1px solid #F5F5F5;
    font-size: 11px;
}
/*  #navigation
--------------------------------------------*/
#navigation .content ul.pagination {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #B0B0B0;
    text-align: center;
    line-height: 1;
}
#navigation .content ul.pagination li {
    display: inline;
    margin: 0 5px;
}
#navigation .content ul.pagination li a {
    font-weight: bold;
}
/*  .content
--------------------------------------------*/

iframe { max-width: 100%;}

.photoset iframe { width: 100%;}

pre {
    font-size: 12px;
    padding: 0;
    margin: 5px 0px 5px 0px;
    background: #f5f8ff;
    line-height: 20px;
    border: none;
    color: #000000;
    width: 100%;
    overflow: auto;
    overflow-Y:hidden;
}

pre[title]:before {
    margin:0px 0px 5px 0px;
    display: block;
    content: attr(title);
    color: #000000;
}
pre[cite]:after {
    display: block;
    content: attr(cite);
    color: #000000;
    text-align: right;
}

pre code {margin: 0 20px 0 20px; padding: 10px 0; display: block;}

code {margin: 20px 10px;}

blockquote {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    border: none;
    border-left: 6px solid #F5F5F5;
    color: #808080;
}

blockquote[title]:before {
    margin:0px 0px 5px 0px;
    display: block;
    content: attr(title);
    color: #000000;
}
blockquote[cite]:after {
    display: block;
    content: attr(cite);
    color: #000000;
    text-align: right;
}

blockquote address {
    text-align: right;
}

/* CustomCSS
--------------------------------------------*/
{CustomCSS}

/* media screen
--------------------------------------------*/
@media screen and (max-width: 1099px) {
    #wrap {width: 550px; margin: 0 auto;}
    #header {width: 540px; /*height:;*/ }
    #main {width: 550px; margin: 0 auto;}
    #grid-content div.vgrid {width: 500px; height: auto;}
    #footer {width:500px;}
    
    #header .header a {font-size: 100%;}
}
@media screen and (max-width: 549px) {
    #wrap {width: 80%; margin: 0 auto; padding: 0;}
    #header {width: 100%; margin: 0 auto; padding: 0;}
    #main {width: 100%; margin: 0 auto; padding: 0;}
    #grid-content div.vgrid {width: 100%; height: auto;
    margin: 20px 0 0 0;
    padding: 10px 0 10px 0;
    }
    #footer {width: 100%; margin: 0 auto;}
    
    #grid-content .vgrid .caption {width: 100%; margin: 1em 0;}
    #grid-content div.vgrid .content img {width: 100%; height: auto}
    #grid-content div.vgrid .content iframe {width: 100%; height: auto}
    
    #grid-content .vgrid ul.information {text-align: left;}
    #grid-content .vgrid ul.tags {text-align: left;}
    
    #header .header a {font-size: 100%;}

}
</style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div class="header">
            <a href="/">{Title}</a>
            {block:TagPage} : <a href="/tagged/{Tag}">{Tag}</a>{/block:TagPage}
            {block:DayPage} : <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}</a>{/block:DayPage}
            {block:PermalinkPage}{/block:PermalinkPage}
            </div>
        </div>
        <div id="main">
            <div id="contents">
                <!-- Post -->
                <div id="grid-content">
                
                    <!-- Post -->
                    {block:Posts}
                    <div class="vgrid">
                        <!-- Text -->
                        {block:Text}
                        <div class="header">{block:Title}{Title}{/block:Title}</div>
                        <div class="content">
                            {Body}
                        </div>
                        {/block:Text}
                        <!-- /Text -->
                        <!-- Link -->
                        {block:Link}
                        <div class="header"><a href="{URL}" {Target} class="section_head">{Name}</a></div>
                        {block:Description}
                        <div class="content">
                            {Description}
                        </div>
                        {/block:Description}
                        {/block:Link}
                        <!-- /Link -->
                        <!-- Quote -->
                        {block:Quote}
                        <div class="content">
                            <blockquote class="quote">
                            {Quote}
                            <address class="source">{block:Source}{Source}{/block:Source}</address>
                            </blockquote>
                        </div>
                        {/block:Quote}
                        <!-- /Quote -->
                        <!-- Photo -->
                        {block:Photo}
                        <div class="content">
                            {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
                            {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
                        </div>
                        {/block:Photo}
                        <!-- /Photo -->
<!-- Panorama -->
{block:Panorama}
<div class="content">
    {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />{LinkCloseTag}
    {block:Caption}
        <div class="caption">{Caption}</div>
    {/block:Caption}
</div>
{/block:Panorama}
<!-- /Panorama -->
                        <!-- Photoset -->
                        {block:Photoset}
                        <div class="content">
                            {Photoset-500}
                            {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
                        </div>
                        {/block:Photoset}
                        <!-- /Photoset -->
                        <!-- Video -->
                        {block:Video}
                        <div class="content">
                            {Video-500}
                            {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
                        </div>
                        {/block:Video}
                        <!-- /Video -->
                        <!-- Audio -->
                        {block:Audio}
                        <div class="content">
                            <div class="audio">
                                {block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}" alt="{TrackName}" /></div>{/block:AlbumArt}
                                <div class="audioinfo">
                                    <ul>
                                        <li class="audioplayer">{AudioPlayerGrey} Count: {FormattedPlayCount}</li>
                                        {block:Artist}<li class="artist">{Artist}</li>{/block:Artist}
                                        {block:TrackName}<li class="trackname">{TrackName}</li>{/block:TrackName}
                                    </ul>
                                </div>
                            </div>
                            {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
                        </div>
                        {/block:Audio}
                        <!-- /Audio -->
                        <!-- Chat -->
                        {block:Chat}
                        {block:Title}<div class="header">{Title}</div>{/block:Title}
                        <div class="content">
                            <ul class="chat">
                                {block:Lines}
                                <li>{block:Label}<span class="chat_label">{Label}</span> {/block:Label}{Line}</li>
                                {/block:Lines}
                            </ul>
                        </div>
                        {/block:Chat}
                        <!-- /Chat -->
                        <!-- Answer -->
                        {block:Answer}
                        <div class="content">
                            <div class="question">
                                <img src="{AskerPortraitURL-30}" width="30" height="30" alt="portrait" />
                                <div class="question_text">
                                    {Asker}: {Question}
                                </div>
                            </div>
                            <div class="answer">
                                <img src="{PortraitURL-30}" width="30" height="30" alt="portrait" />
                                <div class="answer_text">
                                    {Answer}
                                </div>
                            </div>
                        </div>
                        {/block:Answer}
                        <!-- /Answer -->
                        <!-- Source -->
                        {block:ContentSource}
                        <ul class="source">
                            <li><a href="{SourceURL}" {Target}>Source: {block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}</a></li>
                        </ul>
                        {/block:ContentSource}
                        <!-- /Source -->

                        <!-- Tags -->
                        {block:HasTags}
                        <ul class="tags">
                            {block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}
                        </ul>
                        {/block:HasTags}
                        <!-- /Tags -->

                        <!-- Information -->
                        <ul class="information">
                        
                            {block:NoteCount}<li class="note_count"><a href="{Permalink}#note">note: {NoteCount}</a></li>{/block:NoteCount}
                            <li class="category">
                                {block:Text}<a href="{Permalink}">Text</a>{/block:Text}
                                {block:Link}<a href="{Permalink}">Link</a>{/block:Link}
                                {block:Quote}<a href="{Permalink}">Quote</a>{/block:Quote}
                                {block:Photo}<a href="{Permalink}">Photo</a>{/block:Photo}
                                {block:Photoset}<a href="{Permalink}">Photoset</a>{/block:Photoset}
                                {block:Video}<a href="{Permalink}">Video</a>{/block:Video}
                                {block:Audio}<a href="{Permalink}">Audio</a>{/block:Audio}
                                {block:Chat}<a href="{Permalink}">Chat</a>{/block:Chat}
                                {block:Answer}<a href="{Permalink}">Answer</a>{/block:Answer}
                            </li>
                            {block:Date}<li class="date"><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">{Year}.{MonthNumberWithZero}.{DayOfMonthWithZero}-{24HourWithZero}:{Minutes}</a></li>{/block:Date}
                        </ul>
                        <!-- Information -->
                    </div>
                    {/block:Posts}
                    <!-- /Post -->
                    <!-- onePage -->
                    {block:PermalinkPage}
                    <div class="vgrid">
                        <div class="headerz">Tag Cloud</div>
                        <div class="contenz">
                        <div id="tagCloud"></div>
<script src="http://post-theory.com/public/tagcloud/memberjugem?sort=alphabetical" type="text/javascript"></script>
                        </div>

                        <div class="headerz">Twitter</div>
                        <div class="contenz" style="height: 620px;">
                        <a class="twitter-timeline" href="https://twitter.com/memberjugem" data-widget-id="243584297120964609">@memberjugem からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                        </div>
                        <div>
                        <a href="javascript:(function(){window.twttr=window.twttr||{};var D=650,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C>A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('http://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');E=F.createElement('script');E.src='http://platform.twitter.com/bookmarklets/share.js?v=1';F.getElementsByTagName('head')[0].appendChild(E)}());" title="twitter share"><i class="icon-twitter"></i></a>
        
                        <a href="http://www.facebook.com/share.php?u={Permalink}" onclick="window.open(this.href, 'Facebook window', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"  title="facebook share"><i class="icon-facebook"></i></a>
    
                        <a href="https://plus.google.com/share?url={Permalink}" onclick="window.open(this.href, 'Google+ window', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"  title="google+ share"><i class="icon-google-plus"></i></a>
                        
                        <a href="/archive" title="archive"><i class="icon-th-large"></i></a>

                        <a href="/rss" title="feed"><i class="icon-rss-sign"></i></a>
                        
                        <a href="http://www.tumblr.com/edit/{PostID}" title="edit"><i class="icon-cog"></i></a>

                        </div>
                    </div>
                    {/block:PermalinkPage}
                    <!-- /onePage -->
                </div>
                <!-- /Post -->
            </div>
        </div><!-- main -->
        <div id="footer">
                <!-- Navigation-Pagination -->
                {block:Pagination}
                <div id="navigation">
                    <div class="content">
                        <ul class="pagination">
                            <li class="previous">{block:PreviousPage}<a href="{PreviousPage}">{/block:PreviousPage}Newer{block:PreviousPage}</a>{/block:PreviousPage}</li>
                            {block:JumpPagination length="5"}
                            {block:CurrentPage}<li>{PageNumber}</li>{/block:CurrentPage}
                            {block:JumpPage}<li><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}
                            {/block:JumpPagination}
                            <li class="next">{block:NextPage}<a href="{NextPage}">{/block:NextPage}Older{block:NextPage}</a>{/block:NextPage}</li>
                        </ul>
                    </div>
                </div>
                {/block:Pagination}
                <!-- /Navigation-Pagination -->
                <!-- Navigation-PermalinkPagination -->
                {block:PermalinkPagination}
                <div id="navigation">
                    <div class="content">
                        <ul class="pagination">
                            <li class="previous">{block:PreviousPost}<a href="{PreviousPost}">{/block:PreviousPost}Newer{block:PreviousPost}</a>{/block:PreviousPost}</li>
                            <li class="next">{block:NextPost}<a href="{NextPost}">{/block:NextPost}Older{block:NextPost}</a>{/block:NextPost}</li>
                        </ul>
                    </div>
                </div>
                {/block:PermalinkPagination}
                <!-- /Navigation-PermalinkPagination -->
                <!-- Navigation-DayPagination -->
                {block:DayPagination}
                <div id="navigation">
                    <div class="content">
                        <ul class="pagination">
                            <li class="previous">
                            {block:PreviousDayPage}<a href="{PreviousDayPage}">« {ShortMonth} {DayOfMonth}</a>{/block:PreviousDayPage}</li>
                            <li class="next">
                            {block:NextDayPage}<a href="{NextDayPage}">{ShortMonth} {DayOfMonth} »</a>{/block:NextDayPage}</li>
                        </ul>
                    </div>
                </div>
                {/block:DayPagination}
                <!-- /Navigation-DayPagination -->
                <!-- Note -->
                {block:PermalinkPage}
                {block:PostNotes}
                <div id="note">
                    <div class="content">
                        {PostNotes}
                    </div>
                </div>
                {/block:PostNotes}
                {/block:PermalinkPage}
                <!-- /Note -->
        </div>
    </div>

<script>// By Chris Coyier & tweaked by Mathias Bynens

jQuery(function() {

    // Find all YouTube videos
    var $allVideos = $("iframe[src^='http://www.youtube.com']"),

        // The element that is fluid width
        $fluidEl = $(".content");

    // Figure out and save aspect ratio for each video
    $allVideos.each(function() {

        $(this)
            .data('aspectRatio', this.height / this.width)
            
            // and remove the hard coded width/height
            .removeAttr('height')
            .removeAttr('width');

    });

    // When the window is resized
    // (You'll probably want to debounce this)
    jQuery(window).resize(function() {

        var newWidth = $fluidEl.width();
        
        // Resize all videos according to their own aspect ratio
        $allVideos.each(function() {

            var $el = $(this);
            $el
                .width(newWidth)
                .height(newWidth * $el.data('aspectRatio'));

        });

    // Kick off one resize to fix all videos on page load
    }).resize();

});</script>

</body>
</html>

Tumblr テーマのメモ

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<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" />
    {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
    
    <!-- Facebook -->
    <meta property="og:title" content="{Title}">
    <meta property="og:image" content="{PortraitURL-128}">

    {block:Title}<meta property="og:description" content="{Body}">{/block:Title}
    {block:Caption}<meta property="og:description" content="{Caption}">{/block:Caption}

    <!-- Twitter -->
    <meta name="twitter:image" content="{PhotoURL-100}" />
    <meta name="twitter:image" content="{PortraitURL-128}" />
    <meta name="og:title" content="{Title}" />
    <meta name="twitter:creator" content="memberjugem" />
    
    <!-- disable iPhone inital scale -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- /DEFULT -->
    <title>{block:IndexPage}{Title}{/block:IndexPage}{block:PostSummary}{PostSummary}{/block:PostSummary}</title>
    <link rel="shortcut icon" href="{Favicon}" />
    <link rel="alternate" type="application/rss+xml" href="{RSS}" />
    
    <!-- jquery.min.js -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
    <!-- jquery-ui.min.js -->
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>    
    <!-- lightbox.css -->
    <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/kium6gh/86Umdturg/lightbox.css">
    <!-- lightbox.js -->
    <script src="http://static.tumblr.com/kium6gh/WYQmdtus6/lightbox.js" type="text/javascript"></script>
    <!-- ui.totop.css -->
    <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/kium6gh/OWPmdrs6e/ui.totop.css">
    <!-- slowdownScroll.js -->
    <script src="http://static.tumblr.com/kium6gh/KGRmdrtzp/slowdownscroll.js" type="text/javascript"></script>
    <!-- easing plugin ( optional ) -->
    <script src="http://static.tumblr.com/kium6gh/W8Mmdrs8s/easing.js" type="text/javascript"></script>
    <!-- UItoTop plugin -->
    <script src="http://static.tumblr.com/kium6gh/fwGmdrsal/jquery.ui.totop.js" type="text/javascript"></script>

    <!-- Starting the plugin -->
    <script type="text/javascript">
    $(document).ready(function() {
        
        var defaults = {
              containerID: 'toTop', // fading element id
            containerHoverID: 'toTopHover', // fading element hover id
            scrollSpeed: 1200,
            easingType: 'linear'
         };
        
            
        $().UItoTop({ easingType: 'easeOutQuart' });
            
    });
    </script>

    <!-- jquery.vgrid -->
    <script src="http://dl.dropbox.com/u/60471214/js/jquery.easing.1.3.js" type="text/javascript" charset="UTF-8"></script>
    <script src="http://dl.dropbox.com/u/60471214/js/jquery.vgrid.0.1.8.js" type="text/javascript" charset="UTF-8"></script>

    <script type="text/javascript">   
    jQuery(function(){
        jQuery("#grid-content").vgrid({
            easeing: "easeOutQuint",
            useLoadImageEvent: true,
            time: 800,
            delay: 40,
            fadeIn: { //フェードインの指定
                time: 500,
                delay: 50
            }
        });
    });
    </script>  
    <!-- /jquery.vgrid -->
    
    <!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    
    <!-- font-awesome -->
    
    <link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/60471214/font.awesome/css/font-awesome.css">

    <link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/60471214/font.awesome/css/font-awesome-ie7.css">

<style type="text/css">
/* general
--------------------------------------------*/
* {margin:0px;padding:0px;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
a {text-decoration:underline;overflow:hidden;outline:none;}
img {border:none;vertical-align:middle;}
li {list-style-type:none;}
hr {display:none;clear:both;}
br.clear {clear:both;}

html {color:#000000; font-size: 100%;}

a {color:#B0B0B0; text-decoration:none;}
a:link {color:#B0B0B0; text-decoration:none;}
a:visited {color:#B0B0B0; text-decoration:none;}
a:hover {color:#000000; text-decoration:underline;}
a:active {color:#B0B0B0; text-decoration:none;}

body {
width:100%;
text-align:center;
font-family:Arial,"Hiragino Kaku Gothic Pro",Meiryo,"MS PGothic",sans-serif;
background-color:#ffffff;
line-height: 1.8; /* standard */
line-height: 1.8¥9; /* IE 8 and below */
*line-height: 1.6; /* IE 7 and below */
_line-height: 1.6; /* IE 6 */
}

/* layout
--------------------------------------------*/
#wrap {
width: 1100px;
background-color: #f5f8ff;
margin: 0px auto;
padding: 10px 5px 10px 5px;
text-align: left;
}

#header {
width: 1090px;
/* height: ; */
margin: 0px auto 5px;
padding: 0px;
background-color:#bccddb;
}

#main {
background-color: ;
margin: 0 0px;
}

#grid-content {
overflow: hidden;
height: 0;
}

#grid-content div.vgrid {
width: 500px;
height: auto;
background-color: #ffffff;
color: #000000;
margin: 5px;
padding: 20px;
}

#footer {
clear: left;
width: 1010px;
background-color: #f5f8ff;
margin:0px auto;
padding: 10px;
}
/* #header
--------------------------------------------*/
#header .header a {
    color: #333333;
    font-weight: bold;
    font-size: 160%;
    margin: 0 0 0 12px;
}
/* #main
--------------------------------------------*/
/*  #content
--------------------------------------------*/
/*   #post
--------------------------------------------*/
#grid-content .vgrid .header {
    color: #D0D0D0;
    font-weight: bold;
    font-size: 160%;
    line-height: 1.6; /* standard */
    line-height: 1.6¥9; /* IE 8 and below */
    *line-height: 1.2; /* IE 7 and below */
    _line-height: 1.2; /* IE 6 */
    margin-bottom: 2.0em;
}
#grid-content .vgrid .content img {
    max-width: 100%;
}
#grid-content .vgrid .content ul {
    margin: 0.5em 0 0.5em 2.0em;
}
#grid-content .vgrid .content li {
    list-style-type: disc;
}
#grid-content .vgrid .content blockquote img {
    max-width: 100%;
}
#grid-content .vgrid .caption {
    margin: 1em 0;
}
#grid-content .vgrid .caption ul {
    margin: 0.5em 0 0.5em 2.0em;
}
#grid-content .vgrid .caption li {
    list-style-type: disc;
}
#grid-content .vgrid .headerz {
    color: #D0D0D0;
    font-weight: bold;
    font-size: 160%;
}
#grid-content .vgrid .contenz {}
/*------------------------------------------*/
#grid-content .vgrid ul.chat {
    list-style: none;
    margin: 0;
    padding: 0 15px;
    border: 1px solid #F5F5F5;
    border-radius: 6px;
    background: #FAFAFA;
}
#grid-content .vgrid ul.chat li {
    margin: 15px 0;
    padding: 15px;
    border: 1px solid #F5F5F5;
    border-radius: 6px;
    background: #FFFFFF;
}
#grid-content .vgrid ul.chat .chat_label {
    margin-right: 6px;
    color: #B0B0B0;
    font-weight: bold;
}
/*------------------------------------------*/
#grid-content .vgrid .audio .albumart {
    margin-bottom: 1em;
}
#grid-content .vgrid .audio .audioinfo ul {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #808080;
}
#grid-content .vgrid .audio .audioinfo ul li.audioplayer {
    color: $B0B0B0;
    font-size: 11px;
}
#grid-content .vgrid .audio .audioinfo ul li.artist,
#grid-content .vgrid .audio .audioinfo ul li.trackname {
    font-weight: bold;
}
/*------------------------------------------*/
#grid-content .vgrid ul.source {
    list-style: none;
    overflow: hidden;
    margin: 1em 0 0 0;
    padding: 0;
    font-weight: bold;
    /zoom: 1;
}
#grid-content .vgrid ul.source li {
    display: inline;
}
#grid-content .vgrid ul.source li a {
    display: block;
    float: right;
    padding: 6px 10px;
    border-radius: 3px;
    line-height: 1;
}
#grid-content .vgrid ul.source li a:link, #post .post ul.source li a:visited {
    background: #B0B0B0;
    color: #FFFFFF;
    text-decoration: none;
}
#grid-content .vgrid ul.source li a:hover, #post .post ul.source li a:active {
    background: #000000;
    color: #FFFFFF;
    text-decoration: none;
}
/*------------------------------------------*/
#grid-content .vgrid ul.tags {
    list-style: none;
    margin: 1em 0 0 0;
    padding: 0;
    color: #B0B0B0;
    font-size: 11px;
    text-align: right;
    line-height: 1.2;
}
#grid-content .vgrid ul.tags li {
    display: inline;
    margin: 0 0 0 6px;
}
#grid-content .vgrid ul.tags li a:before {
    content: "#";
}
#grid-content .vgrid ul.tags li a:link, #post .post ul.tags li a:visited {
    color: #B0B0B0;
    text-decoration: none;
}
#grid-content .vgrid ul.tags li a:hover, #post .post ul.tags li a:active {
    color: #000000;
    text-decoration: underline;
}
/*------------------------------------------*/
#grid-content .vgrid ul.information {
    list-style: none;
    margin: 1em 0 0 0;
    padding: 16px 0 0 0;
    border-top: 1px solid #F5F5F5;
    color: #B0B0B0;
    font-size: 11px;
    text-align: right;
    line-height: 1.2;
}
#grid-content .vgrid ul.information li {
    display: inline;
}
#grid-content .vgrid ul.information li+li:before {
    content: " | ";
    margin: 0 6px;
    color: #D0D0D0;
}
#grid-content .vgrid ul.information li a {
    font-weight: bold;
}
#grid-content .vgrid ul.information li a:link, #post .post ul.information li a:visited {
    color: #B0B0B0;
    text-decoration: none;
}
#grid-content .vgrid ul.information li a:hover, #post .post ul.information li a:active {
    color: #000000;
    text-decoration: underline;
}
/*  #note
--------------------------------------------*/
#note .content ol.notes {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #B0B0B0;
}
#note .content ol.notes li.more_notes_link_container {
    margin-top: 1em;
    padding-top: 16px;
    border-top: 1px solid #F5F5F5;
    font-size: 11px;
}
/*  #navigation
--------------------------------------------*/
#navigation .content ul.pagination {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #B0B0B0;
    text-align: center;
    line-height: 1;
}
#navigation .content ul.pagination li {
    display: inline;
    margin: 0 5px;
}
#navigation .content ul.pagination li a {
    font-weight: bold;
}
/*  .content
--------------------------------------------*/

iframe { max-width: 100%;}

.photoset iframe { width: 100%;}

pre {
    font-size: 12px;
    padding: 0;
    margin: 5px 0px 5px 0px;
    background: #f5f8ff;
    line-height: 20px;
    border: none;
    color: #000000;
    width: 100%;
    overflow: auto;
    overflow-Y:hidden;
}

pre[title]:before {
    margin:0px 0px 5px 0px;
    display: block;
    content: attr(title);
    color: #000000;
}
pre[cite]:after {
    display: block;
    content: attr(cite);
    color: #000000;
    text-align: right;
}

pre code {margin: 0 20px 0 20px; padding: 10px 0; display: block;}

code {margin: 20px 10px;}

blockquote {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    border: none;
    border-left: 6px solid #F5F5F5;
    color: #808080;
}

blockquote[title]:before {
    margin:0px 0px 5px 0px;
    display: block;
    content: attr(title);
    color: #000000;
}
blockquote[cite]:after {
    display: block;
    content: attr(cite);
    color: #000000;
    text-align: right;
}

blockquote address {
    text-align: right;
}

/* CustomCSS
--------------------------------------------*/
{CustomCSS}

/* media screen
--------------------------------------------*/
@media screen and (max-width: 1099px) {
    #wrap {width: 550px; margin: 0 auto;}
    #header {width: 540px; /*height:;*/ }
    #main {width: 550px; margin: 0 auto;}
    #grid-content div.vgrid {width: 500px; height: auto;}
    #footer {width:500px;}
    
    #header .header a {font-size: 100%;}
}
@media screen and (max-width: 549px) {
    #wrap {width: 80%; margin: 0 auto; padding: 0;}
    #header {width: 100%; margin: 0 auto; padding: 0;}
    #main {width: 100%; margin: 0 auto; padding: 0;}
    #grid-content div.vgrid {width: 100%; height: auto;
    margin: 20px 0 0 0;
    padding: 10px 0 10px 0;
    }
    #footer {width: 100%; margin: 0 auto;}
    
    #grid-content .vgrid .caption {width: 100%; margin: 1em 0;}
    #grid-content div.vgrid .content img {width: 100%; height: auto}
    #grid-content div.vgrid .content iframe {width: 100%; height: auto}
    
    #grid-content .vgrid ul.information {text-align: left;}
    #grid-content .vgrid ul.tags {text-align: left;}
    
    #header .header a {font-size: 100%;}

}
</style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div class="header">
            <a href="/">{Title}</a>
            {block:TagPage} : <a href="/tagged/{Tag}">{Tag}</a>{/block:TagPage}
            {block:DayPage} : <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}</a>{/block:DayPage}
            {block:PermalinkPage}{/block:PermalinkPage}
            </div>
        </div>
        <div id="main">
            <div id="contents">
                <!-- Post -->
                <div id="grid-content">
                
                    <!-- Post -->
                    {block:Posts}
                    <div class="vgrid">
                        <!-- Text -->
                        {block:Text}
                        <div class="header">{block:Title}{Title}{/block:Title}</div>
                        <div class="content">
                            {Body}
                        </div>
                        {/block:Text}
                        <!-- /Text -->
                        <!-- Link -->
                        {block:Link}
                        <div class="header"><a href="{URL}" {Target} class="section_head">{Name}</a></div>
                        {block:Description}
                        <div class="content">
                            {Description}
                        </div>
                        {/block:Description}
                        {/block:Link}
                        <!-- /Link -->
                        <!-- Quote -->
                        {block:Quote}
                        <div class="content">
                            <blockquote class="quote">
                            {Quote}
                            <address class="source">{block:Source}{Source}{/block:Source}</address>
                            </blockquote>
                        </div>
                        {/block:Quote}
                        <!-- /Quote -->
                        <!-- Photo -->
                        {block:Photo}
                        <div class="content">
                            {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
                            {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
                        </div>
                        {/block:Photo}
                        <!-- /Photo -->
<!-- Panorama -->
{block:Panorama}
<div class="content">
    {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />{LinkCloseTag}
    {block:Caption}
        <div class="caption">{Caption}</div>
    {/block:Caption}
</div>
{/block:Panorama}
<!-- /Panorama -->
                        <!-- Photoset -->
                        {block:Photoset}
                        <div class="content">
                            {Photoset-500}
                            {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
                        </div>
                        {/block:Photoset}
                        <!-- /Photoset -->
                        <!-- Video -->
                        {block:Video}
                        <div class="content">
                            {Video-500}
                            {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
                        </div>
                        {/block:Video}
                        <!-- /Video -->
                        <!-- Audio -->
                        {block:Audio}
                        <div class="content">
                            <div class="audio">
                                {block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}" alt="{TrackName}" /></div>{/block:AlbumArt}
                                <div class="audioinfo">
                                    <ul>
                                        <li class="audioplayer">{AudioPlayerGrey} Count: {FormattedPlayCount}</li>
                                        {block:Artist}<li class="artist">{Artist}</li>{/block:Artist}
                                        {block:TrackName}<li class="trackname">{TrackName}</li>{/block:TrackName}
                                    </ul>
                                </div>
                            </div>
                            {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
                        </div>
                        {/block:Audio}
                        <!-- /Audio -->
                        <!-- Chat -->
                        {block:Chat}
                        {block:Title}<div class="header">{Title}</div>{/block:Title}
                        <div class="content">
                            <ul class="chat">
                                {block:Lines}
                                <li>{block:Label}<span class="chat_label">{Label}</span> {/block:Label}{Line}</li>
                                {/block:Lines}
                            </ul>
                        </div>
                        {/block:Chat}
                        <!-- /Chat -->
                        <!-- Answer -->
                        {block:Answer}
                        <div class="content">
                            <div class="question">
                                <img src="{AskerPortraitURL-30}" width="30" height="30" alt="portrait" />
                                <div class="question_text">
                                    {Asker}: {Question}
                                </div>
                            </div>
                            <div class="answer">
                                <img src="{PortraitURL-30}" width="30" height="30" alt="portrait" />
                                <div class="answer_text">
                                    {Answer}
                                </div>
                            </div>
                        </div>
                        {/block:Answer}
                        <!-- /Answer -->
                        <!-- Source -->
                        {block:ContentSource}
                        <ul class="source">
                            <li><a href="{SourceURL}" {Target}>Source: {block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}</a></li>
                        </ul>
                        {/block:ContentSource}
                        <!-- /Source -->

                        <!-- Tags -->
                        {block:HasTags}
                        <ul class="tags">
                            {block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}
                        </ul>
                        {/block:HasTags}
                        <!-- /Tags -->

                        <!-- Information -->
                        <ul class="information">
                        
                            {block:NoteCount}<li class="note_count"><a href="{Permalink}#note">note: {NoteCount}</a></li>{/block:NoteCount}
                            <li class="category">
                                {block:Text}<a href="{Permalink}">Text</a>{/block:Text}
                                {block:Link}<a href="{Permalink}">Link</a>{/block:Link}
                                {block:Quote}<a href="{Permalink}">Quote</a>{/block:Quote}
                                {block:Photo}<a href="{Permalink}">Photo</a>{/block:Photo}
                                {block:Photoset}<a href="{Permalink}">Photoset</a>{/block:Photoset}
                                {block:Video}<a href="{Permalink}">Video</a>{/block:Video}
                                {block:Audio}<a href="{Permalink}">Audio</a>{/block:Audio}
                                {block:Chat}<a href="{Permalink}">Chat</a>{/block:Chat}
                                {block:Answer}<a href="{Permalink}">Answer</a>{/block:Answer}
                            </li>
                            {block:Date}<li class="date"><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">{Year}.{MonthNumberWithZero}.{DayOfMonthWithZero}-{24HourWithZero}:{Minutes}</a></li>{/block:Date}
                        </ul>
                        <!-- Information -->
                    </div>
                    {/block:Posts}
                    <!-- /Post -->
                    <!-- onePage -->
                    {block:PermalinkPage}
                    <div class="vgrid">
                        <div class="headerz">Tag Cloud</div>
                        <div class="contenz">
                        <div id="tagCloud"></div>
<script src="http://post-theory.com/public/tagcloud/memberjugem?sort=alphabetical" type="text/javascript"></script>
                        </div>

                        <div class="headerz">Twitter</div>
                        <div class="contenz" style="height: 620px;">
                        <a class="twitter-timeline" href="https://twitter.com/memberjugem" data-widget-id="243584297120964609">@memberjugem からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                        </div>
                        <div>
                        <a href="javascript:(function(){window.twttr=window.twttr||{};var D=650,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C>A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('http://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');E=F.createElement('script');E.src='http://platform.twitter.com/bookmarklets/share.js?v=1';F.getElementsByTagName('head')[0].appendChild(E)}());" title="twitter share"><i class="icon-twitter"></i></a>
        
                        <a href="http://www.facebook.com/share.php?u={Permalink}" onclick="window.open(this.href, 'Facebook window', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"  title="facebook share"><i class="icon-facebook"></i></a>
    
                        <a href="https://plus.google.com/share?url={Permalink}" onclick="window.open(this.href, 'Google+ window', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"  title="google+ share"><i class="icon-google-plus"></i></a>
                        
                        <a href="/archive" title="archive"><i class="icon-th-large"></i></a>

                        <a href="/rss" title="feed"><i class="icon-rss-sign"></i></a>
                        
                        <a href="http://www.tumblr.com/edit/{PostID}" title="edit"><i class="icon-cog"></i></a>

                        </div>
                    </div>
                    {/block:PermalinkPage}
                    <!-- /onePage -->
                </div>
                <!-- /Post -->
            </div>
        </div><!-- main -->
        <div id="footer">
                <!-- Navigation-Pagination -->
                {block:Pagination}
                <div id="navigation">
                    <div class="content">
                        <ul class="pagination">
                            <li class="previous">{block:PreviousPage}<a href="{PreviousPage}">{/block:PreviousPage}Newer{block:PreviousPage}</a>{/block:PreviousPage}</li>
                            {block:JumpPagination length="5"}
                            {block:CurrentPage}<li>{PageNumber}</li>{/block:CurrentPage}
                            {block:JumpPage}<li><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}
                            {/block:JumpPagination}
                            <li class="next">{block:NextPage}<a href="{NextPage}">{/block:NextPage}Older{block:NextPage}</a>{/block:NextPage}</li>
                        </ul>
                    </div>
                </div>
                {/block:Pagination}
                <!-- /Navigation-Pagination -->
                <!-- Navigation-PermalinkPagination -->
                {block:PermalinkPagination}
                <div id="navigation">
                    <div class="content">
                        <ul class="pagination">
                            <li class="previous">{block:PreviousPost}<a href="{PreviousPost}">{/block:PreviousPost}Newer{block:PreviousPost}</a>{/block:PreviousPost}</li>
                            <li class="next">{block:NextPost}<a href="{NextPost}">{/block:NextPost}Older{block:NextPost}</a>{/block:NextPost}</li>
                        </ul>
                    </div>
                </div>
                {/block:PermalinkPagination}
                <!-- /Navigation-PermalinkPagination -->
                <!-- Navigation-DayPagination -->
                {block:DayPagination}
                <div id="navigation">
                    <div class="content">
                        <ul class="pagination">
                            <li class="previous">
                            {block:PreviousDayPage}<a href="{PreviousDayPage}">« {ShortMonth} {DayOfMonth}</a>{/block:PreviousDayPage}</li>
                            <li class="next">
                            {block:NextDayPage}<a href="{NextDayPage}">{ShortMonth} {DayOfMonth} »</a>{/block:NextDayPage}</li>
                        </ul>
                    </div>
                </div>
                {/block:DayPagination}
                <!-- /Navigation-DayPagination -->
                <!-- Note -->
                {block:PermalinkPage}
                {block:PostNotes}
                <div id="note">
                    <div class="content">
                        {PostNotes}
                    </div>
                </div>
                {/block:PostNotes}
                {/block:PermalinkPage}
                <!-- /Note -->
        </div>
    </div>

<script>// By Chris Coyier & tweaked by Mathias Bynens

jQuery(function() {

    // Find all YouTube videos
    var $allVideos = $("iframe[src^='http://www.youtube.com']"),

        // The element that is fluid width
        $fluidEl = $(".content");

    // Figure out and save aspect ratio for each video
    $allVideos.each(function() {

        $(this)
            .data('aspectRatio', this.height / this.width)
            
            // and remove the hard coded width/height
            .removeAttr('height')
            .removeAttr('width');

    });

    // When the window is resized
    // (You'll probably want to debounce this)
    jQuery(window).resize(function() {

        var newWidth = $fluidEl.width();
        
        // Resize all videos according to their own aspect ratio
        $allVideos.each(function() {

            var $el = $(this);
            $el
                .width(newWidth)
                .height(newWidth * $el.data('aspectRatio'));

        });

    // Kick off one resize to fix all videos on page load
    }).resize();

});</script>

</body>
</html>

Tumblr テーマのメモ

現在使用しているTumblrテーマのメモ

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<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" />
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<!-- disable iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- /DEFULT -->
<title>{block:IndexPage}{Title}{/block:IndexPage}{block:PostSummary}{PostSummary}{/block:PostSummary}</title>
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />

<!-- jquery.min.js -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<!-- jquery-ui.min.js -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>    
<!-- lightbox.css -->
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/kium6gh/86Umdturg/lightbox.css">
<!-- lightbox.js -->
<script src="http://static.tumblr.com/kium6gh/WYQmdtus6/lightbox.js" type="text/javascript"></script>
<!-- ui.totop.css -->
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/kium6gh/OWPmdrs6e/ui.totop.css">
<!-- slowdownScroll.js -->
<script src="http://static.tumblr.com/kium6gh/KGRmdrtzp/slowdownscroll.js" type="text/javascript"></script>
<!-- easing plugin ( optional ) -->
<script src="http://static.tumblr.com/kium6gh/W8Mmdrs8s/easing.js" type="text/javascript"></script>
<!-- UItoTop plugin -->
<script src="http://static.tumblr.com/kium6gh/fwGmdrsal/jquery.ui.totop.js" type="text/javascript"></script>

<!-- Starting the plugin -->
<script type="text/javascript">
$(document).ready(function() {

var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};


$().UItoTop({ easingType: 'easeOutQuart' });

});
</script>

<!-- jquery.vgrid -->
<script src="http://dl.dropbox.com/u/60471214/js/jquery.easing.1.3.js" type="text/javascript" charset="UTF-8"></script>
<script src="http://dl.dropbox.com/u/60471214/js/jquery.vgrid.0.1.8.js" type="text/javascript" charset="UTF-8"></script>

<script type="text/javascript">   
jQuery(function(){
jQuery("#grid-content").vgrid({
easeing: "easeOutQuint",
useLoadImageEvent: true,
time: 800,
delay: 40,
fadeIn: { //フェードインの指定
time: 500,
delay: 50
}
});
});
</script>  
<!-- /jquery.vgrid -->

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<style type="text/css">
/* general
--------------------------------------------*/
* {margin:0px;padding:0px;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
a {text-decoration:underline;overflow:hidden;outline:none;}
img {border:none;vertical-align:middle;}
li {list-style-type:none;}
hr {display:none;clear:both;}
br.clear {clear:both;}

html {color:#000000; font-size: 100%;}

a {color:#B0B0B0; text-decoration:none;}
a:link {color:#B0B0B0; text-decoration:none;}
a:visited {color:#B0B0B0; text-decoration:none;}
a:hover {color:#000000; text-decoration:underline;}
a:active {color:#B0B0B0; text-decoration:none;}

body {
width:100%;
text-align:center;
font-family:Arial,"Hiragino Kaku Gothic Pro",Meiryo,"MS PGothic",sans-serif;
background-color:#ffffff;
line-height: 1.8; /* standard */
line-height: 1.8¥9; /* IE 8 and below */
*line-height: 1.6; /* IE 7 and below */
_line-height: 1.6; /* IE 6 */
}

/* layout
--------------------------------------------*/
#wrap {
width: 1100px;
background-color: #f5f8ff;
margin: 0px auto;
padding: 10px 5px 10px 5px;
text-align: left;
}

#header {
width: 1090px;
/* height: ; */
margin: 0px auto 5px;
padding: 0px;
background-color:#bccddb;
}

#main {
background-color: ;
margin: 0 0px;
}

#grid-content {
overflow: hidden;
height: 0;
}

#grid-content div.vgrid {
width: 500px;
height: auto;
background-color: #ffffff;
color: #000000;
margin: 5px;
padding: 20px;
}

#footer {
clear: left;
width: 1010px;
background-color: #f5f8ff;
margin:0px auto;
padding: 10px;
}
/* #header
--------------------------------------------*/
#header .header a {
color: #333333;
font-weight: bold;
font-size: 160%;
margin: 0 0 0 12px;
}
/* #main
--------------------------------------------*/
/*  #content
--------------------------------------------*/
/*   #post
--------------------------------------------*/
#grid-content .vgrid .header {
color: #D0D0D0;
font-weight: bold;
font-size: 160%;
line-height: 1.6; /* standard */
line-height: 1.6¥9; /* IE 8 and below */
*line-height: 1.2; /* IE 7 and below */
_line-height: 1.2; /* IE 6 */
margin-bottom: 2.0em;
}
#grid-content .vgrid .content img {
max-width: 100%;
}
#grid-content .vgrid .content ul {
margin: 0.5em 0 0.5em 2.0em;
}
#grid-content .vgrid .content li {
list-style-type: disc;
}
#grid-content .vgrid .content blockquote img {
max-width: 100%;
}
#grid-content .vgrid .caption {
margin: 1em 0;
}
#grid-content .vgrid .caption ul {
margin: 0.5em 0 0.5em 2.0em;
}
#grid-content .vgrid .caption li {
list-style-type: disc;
}
#grid-content .vgrid .headerz {
color: #D0D0D0;
font-weight: bold;
font-size: 160%;
}
#grid-content .vgrid .contenz {}
/*------------------------------------------*/
#grid-content .vgrid ul.chat {
list-style: none;
margin: 0;
padding: 0 15px;
border: 1px solid #F5F5F5;
border-radius: 6px;
background: #FAFAFA;
}
#grid-content .vgrid ul.chat li {
margin: 15px 0;
padding: 15px;
border: 1px solid #F5F5F5;
border-radius: 6px;
background: #FFFFFF;
}
#grid-content .vgrid ul.chat .chat_label {
margin-right: 6px;
color: #B0B0B0;
font-weight: bold;
}
/*------------------------------------------*/
#grid-content .vgrid .audio .albumart {
margin-bottom: 1em;
}
#grid-content .vgrid .audio .audioinfo ul {
list-style: none;
margin: 0;
padding: 0;
color: #808080;
}
#grid-content .vgrid .audio .audioinfo ul li.audioplayer {
color: $B0B0B0;
font-size: 11px;
}
#grid-content .vgrid .audio .audioinfo ul li.artist,
#grid-content .vgrid .audio .audioinfo ul li.trackname {
font-weight: bold;
}
/*------------------------------------------*/
#grid-content .vgrid ul.source {
list-style: none;
overflow: hidden;
margin: 1em 0 0 0;
padding: 0;
font-weight: bold;
/zoom: 1;
}
#grid-content .vgrid ul.source li {
display: inline;
}
#grid-content .vgrid ul.source li a {
display: block;
float: right;
padding: 6px 10px;
border-radius: 3px;
line-height: 1;
}
#grid-content .vgrid ul.source li a:link, #post .post ul.source li a:visited {
background: #B0B0B0;
color: #FFFFFF;
text-decoration: none;
}
#grid-content .vgrid ul.source li a:hover, #post .post ul.source li a:active {
background: #000000;
color: #FFFFFF;
text-decoration: none;
}
/*------------------------------------------*/
#grid-content .vgrid ul.tags {
list-style: none;
margin: 1em 0 0 0;
padding: 0;
color: #B0B0B0;
font-size: 11px;
text-align: right;
line-height: 1.2;
}
#grid-content .vgrid ul.tags li {
display: inline;
margin: 0 0 0 6px;
}
#grid-content .vgrid ul.tags li a:before {
content: "#";
}
#grid-content .vgrid ul.tags li a:link, #post .post ul.tags li a:visited {
color: #B0B0B0;
text-decoration: none;
}
#grid-content .vgrid ul.tags li a:hover, #post .post ul.tags li a:active {
color: #000000;
text-decoration: underline;
}
/*------------------------------------------*/
#grid-content .vgrid ul.information {
list-style: none;
margin: 1em 0 0 0;
padding: 16px 0 0 0;
border-top: 1px solid #F5F5F5;
color: #B0B0B0;
font-size: 11px;
text-align: right;
line-height: 1.2;
}
#grid-content .vgrid ul.information li {
display: inline;
}
#grid-content .vgrid ul.information li+li:before {
content: " | ";
margin: 0 6px;
color: #D0D0D0;
}
#grid-content .vgrid ul.information li a {
font-weight: bold;
}
#grid-content .vgrid ul.information li a:link, #post .post ul.information li a:visited {
color: #B0B0B0;
text-decoration: none;
}
#grid-content .vgrid ul.information li a:hover, #post .post ul.information li a:active {
color: #000000;
text-decoration: underline;
}
/*  #note
--------------------------------------------*/
#note .content ol.notes {
list-style: none;
margin: 0;
padding: 0;
color: #B0B0B0;
}
#note .content ol.notes li.more_notes_link_container {
margin-top: 1em;
padding-top: 16px;
border-top: 1px solid #F5F5F5;
font-size: 11px;
}
/*  #navigation
--------------------------------------------*/
#navigation .content ul.pagination {
list-style: none;
margin: 0;
padding: 0;
color: #B0B0B0;
text-align: center;
line-height: 1;
}
#navigation .content ul.pagination li {
display: inline;
margin: 0 5px;
}
#navigation .content ul.pagination li a {
font-weight: bold;
}
/*  .content
--------------------------------------------*/

iframe { max-width: 100%;}

.photoset iframe { width: 100%;}

pre {
font-size: 12px;
padding: 0;
margin: 5px 0px 5px 0px;
background: #f5f8ff;
line-height: 20px;
border: none;
color: #000000;
width: 100%;
overflow: auto;
overflow-Y:hidden;
}

pre[title]:before {
margin:0px 0px 5px 0px;
display: block;
content: attr(title);
color: #000000;
}
pre[cite]:after {
display: block;
content: attr(cite);
color: #000000;
text-align: right;
}

pre code {margin: 0 20px 0 20px; padding: 10px 0; display: block;}

code {margin: 20px 10px;}

blockquote {
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: 0;
margin-right: 0;
padding-left: 10px;
border: none;
border-left: 6px solid #F5F5F5;
color: #808080;
}

blockquote[title]:before {
margin:0px 0px 5px 0px;
display: block;
content: attr(title);
color: #000000;
}
blockquote[cite]:after {
display: block;
content: attr(cite);
color: #000000;
text-align: right;
}

blockquote address {
text-align: right;
}

/* CustomCSS
--------------------------------------------*/
{CustomCSS}

/* media screen
--------------------------------------------*/
@media screen and (max-width: 1099px) {
#wrap {width: 550px; margin: 0 auto;}
#header {width: 540px; /*height:;*/ }
#main {width: 550px; margin: 0 auto;}
#grid-content div.vgrid {width: 500px; height: auto;}
#footer {width:500px;}

#header .header a {font-size: 100%;}
}
@media screen and (max-width: 549px) {
#wrap {width: 80%; margin: 0 auto; padding: 0;}
#header {width: 100%; margin: 0 auto; padding: 0;}
#main {width: 100%; margin: 0 auto; padding: 0;}
#grid-content div.vgrid {width: 100%; height: auto;
margin: 20px 0 0 0;
padding: 10px 0 10px 0;
}
#footer {width: 100%; margin: 0 auto;}

#grid-content .vgrid .caption {width: 100%; margin: 1em 0;}
#grid-content div.vgrid .content img {width: 100%; height: auto}
#grid-content div.vgrid .content iframe {width: 100%; height: auto}

#grid-content .vgrid ul.information {text-align: left;}
#grid-content .vgrid ul.tags {text-align: left;}

#header .header a {font-size: 100%;}

}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="header">
<a href="/">{Title}</a>
{block:TagPage} : <a href="/tagged/{Tag}">{Tag}</a>{/block:TagPage}
{block:DayPage} : <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}</a>{/block:DayPage}
{block:PermalinkPage}{/block:PermalinkPage}
</div>
</div>
<div id="main">
<div id="contents">
<!-- Post -->
<div id="grid-content">

<!-- Post -->
{block:Posts}
<div class="vgrid">
<!-- Text -->
{block:Text}
<div class="header">{block:Title}{Title}{/block:Title}</div>
<div class="content">
{Body}
</div>
{/block:Text}
<!-- /Text -->
<!-- Link -->
{block:Link}
<div class="header"><a href="{URL}" {Target} class="section_head">{Name}</a></div>
{block:Description}
<div class="content">
{Description}
</div>
{/block:Description}
{/block:Link}
<!-- /Link -->
<!-- Quote -->
{block:Quote}
<div class="content">
<blockquote class="quote">
{Quote}
<address class="source">{block:Source}{Source}{/block:Source}</address>
</blockquote>
</div>
{/block:Quote}
<!-- /Quote -->
<!-- Photo -->
{block:Photo}
<div class="content">
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Photo}
<!-- /Photo -->
<!-- Panorama -->
{block:Panorama}
<div class="content">
{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Panorama}
<!-- /Panorama -->
<!-- Photoset -->
{block:Photoset}
<div class="content">
{Photoset-500}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Photoset}
<!-- /Photoset -->
<!-- Video -->
{block:Video}
<div class="content">
{Video-500}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Video}
<!-- /Video -->
<!-- Audio -->
{block:Audio}
<div class="content">
<div class="audio">
{block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}" alt="{TrackName}" /></div>{/block:AlbumArt}
<div class="audioinfo">
<ul>
<li class="audioplayer">{AudioPlayerGrey} Count: {FormattedPlayCount}</li>
{block:Artist}<li class="artist">{Artist}</li>{/block:Artist}
{block:TrackName}<li class="trackname">{TrackName}</li>{/block:TrackName}
</ul>
</div>
</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Audio}
<!-- /Audio -->
<!-- Chat -->
{block:Chat}
{block:Title}<div class="header">{Title}</div>{/block:Title}
<div class="content">
<ul class="chat">
{block:Lines}
<li>{block:Label}<span class="chat_label">{Label}</span> {/block:Label}{Line}</li>
{/block:Lines}
</ul>
</div>
{/block:Chat}
<!-- /Chat -->
<!-- Answer -->
{block:Answer}
<div class="content">
<div class="question">
<img src="{AskerPortraitURL-30}" width="30" height="30" alt="portrait" />
<div class="question_text">
{Asker}: {Question}
</div>
</div>
<div class="answer">
<img src="{PortraitURL-30}" width="30" height="30" alt="portrait" />
<div class="answer_text">
{Answer}
</div>
</div>
</div>
{/block:Answer}
<!-- /Answer -->
<!-- Source -->
{block:ContentSource}
<ul class="source">
<li><a href="{SourceURL}" {Target}>Source: {block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}</a></li>
</ul>
{/block:ContentSource}
<!-- /Source -->

<!-- Tags -->
{block:HasTags}
<ul class="tags">
{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}
</ul>
{/block:HasTags}
<!-- /Tags -->

<!-- Information -->
<ul class="information">

{block:NoteCount}<li class="note_count"><a href="{Permalink}#note">note: {NoteCount}</a></li>{/block:NoteCount}
<li class="category">
{block:Text}<a href="{Permalink}">Text</a>{/block:Text}
{block:Link}<a href="{Permalink}">Link</a>{/block:Link}
{block:Quote}<a href="{Permalink}">Quote</a>{/block:Quote}
{block:Photo}<a href="{Permalink}">Photo</a>{/block:Photo}
{block:Photoset}<a href="{Permalink}">Photoset</a>{/block:Photoset}
{block:Video}<a href="{Permalink}">Video</a>{/block:Video}
{block:Audio}<a href="{Permalink}">Audio</a>{/block:Audio}
{block:Chat}<a href="{Permalink}">Chat</a>{/block:Chat}
{block:Answer}<a href="{Permalink}">Answer</a>{/block:Answer}
</li>
{block:Date}<li class="date"><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">{Year}.{MonthNumberWithZero}.{DayOfMonthWithZero}-{24HourWithZero}:{Minutes}</a></li>{/block:Date}
</ul>
<!-- Information -->
</div>
{/block:Posts}
<!-- /Post -->
<!-- onePage -->
{block:PermalinkPage}
<div class="vgrid">
<div class="headerz">Tag Cloud</div>
<div class="contenz">
<div id="tagCloud"></div>
<script src="http://post-theory.com/public/tagcloud/memberjugem?sort=alphabetical" type="text/javascript"></script>
</div>

<div class="headerz">Twitter</div>
<div class="contenz" style="height: 620px;">
<a class="twitter-timeline" href="https://twitter.com/memberjugem" data-widget-id="243584297120964609">@memberjugem からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
{/block:PermalinkPage}
<!-- /onePage -->
</div>
<!-- /Post -->
</div>
</div><!-- main -->
<div id="footer">
<!-- Navigation-Pagination -->
{block:Pagination}
<div id="navigation">
<div class="content">
<ul class="pagination">
<li class="previous">{block:PreviousPage}<a href="{PreviousPage}">{/block:PreviousPage}Newer{block:PreviousPage}</a>{/block:PreviousPage}</li>
{block:JumpPagination length="5"}
{block:CurrentPage}<li>{PageNumber}</li>{/block:CurrentPage}
{block:JumpPage}<li><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}
{/block:JumpPagination}
<li class="next">{block:NextPage}<a href="{NextPage}">{/block:NextPage}Older{block:NextPage}</a>{/block:NextPage}</li>
</ul>
</div>
</div>
{/block:Pagination}
<!-- /Navigation-Pagination -->
<!-- Navigation-PermalinkPagination -->
{block:PermalinkPagination}
<div id="navigation">
<div class="content">
<ul class="pagination">
<li class="previous">{block:PreviousPost}<a href="{PreviousPost}">{/block:PreviousPost}Newer{block:PreviousPost}</a>{/block:PreviousPost}</li>
<li class="next">{block:NextPost}<a href="{NextPost}">{/block:NextPost}Older{block:NextPost}</a>{/block:NextPost}</li>
</ul>
</div>
</div>
{/block:PermalinkPagination}
<!-- /Navigation-PermalinkPagination -->
<!-- Navigation-DayPagination -->
{block:DayPagination}
<div id="navigation">
<div class="content">
<ul class="pagination">
<li class="previous">
{block:PreviousDayPage}<a href="{PreviousDayPage}">≪ {ShortMonth} {DayOfMonth}</a>{/block:PreviousDayPage}</li>
<li class="next">
{block:NextDayPage}<a href="{NextDayPage}">{ShortMonth} {DayOfMonth} ≫</a>{/block:NextDayPage}</li>
</ul>
</div>
</div>
{/block:DayPagination}
<!-- /Navigation-DayPagination -->
<!-- Note -->
{block:PermalinkPage}
{block:PostNotes}
<div id="note">
<div class="content">
{PostNotes}
</div>
</div>
{/block:PostNotes}
{/block:PermalinkPage}
<!-- /Note -->
</div>
</div>

<script>// By Chris Coyier & tweaked by Mathias Bynens

jQuery(function() {

// Find all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),

// The element that is fluid width
$fluidEl = $(".content");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

$(this)
.data('aspectRatio', this.height / this.width)

// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');

});

// When the window is resized
// (You'll probably want to debounce this)
jQuery(window).resize(function() {

var newWidth = $fluidEl.width();

// Resize all videos according to their own aspect ratio
$allVideos.each(function() {

var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));

});

// Kick off one resize to fix all videos on page load
}).resize();

});</script>

</body>
</html>
  • このエントリーをはてなブックマークに追加
  • Check
1