Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
病んでる紫色のTumblrテーマ

病んでる紫色のTumblrテーマ。

メモ

  • 既存のテーマ“Pink touch 2”をインスパイア。
  • まるで病んでいるかのようなダークパープル色に変貌させてみた。
  • 元テーマで非対応だったレスポンシブに部分対応。
  • テーマ送信やデモブログ作成がめんどくさく、GitHub Gistに書いている。←

ソースコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
    <title>{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
    <link rel="shortcut icon" href="{Favicon}" />
	<link rel="alternate" type="application/rss+xml" href="{RSS}" />
    {block:Description}
    <meta name="description" content="{MetaDescription}" />
    {/block:Description}      
	<meta name="if:Show notes" content="1">
	<meta name="text:Disqus Shortname" content="" />
	<meta property="og:title" content="{block:PostTitle}{PostTitle}{/block:PostTitle}" />
	
    {block:PermalinkPagination}<meta property="og:title" content="{block:Description}{MetaDescription}{/block:Description}" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="{Permalink}" />
{block:Posts}{block:Photo}  <meta property="og:image" content="{PhotoURL-500}" />{/block:Photo}{/block:Posts}
    <meta property="og:site_name" content="{Title}" />
    <meta property="og:description" content="{block:Description}{MetaDescription}{/block:Description}" />{/block:PermalinkPagination}
    {block:IndexPage}<meta property="og:title" content="{Title}" />
    <meta property="og:type" content="blog" />
    <meta property="og:image" content="{PortraitURL-128}" />
    <meta property="og:site_name" content="{Title}" />
    <meta property="og:description" content="{block:Description}{MetaDescription}{/block:Description}" />{/block:IndexPage}
	<link rel="stylesheet" href="//static.tumblr.com/h912qpi/Mgvohntsm/style.min.css">
	<style>{CustomCSS}</style>
</head>
<body>
	<div id="wrapper">
		<div id="header" role="banner">
			<h1><a href="/">{Title}</a></h1>
			
			{block:Description}
			<div id="description">
				<p>{Description}</p>
			</div>
			{/block:Description}
		</div>
		
		<div id="navigation">			
			<div class="wrapper">
				{block:HasPages} 
				<ul class="pages links" role="navigation">
					{block:Pages}
					<li><a href="{URL}">{Label}</a></li>
					{/block:Pages}                    
				</ul>
				{/block:HasPages}
				
				<form id="search" role="search" action="/search" method="get">
					<input type="text" name="q" class="search" value="{lang:Search}" onfocus="if(this.value == this.defaultValue) this.value = ''" onblur="if(!this.value) this.value = this.defaultValue" />
				</form>
			</div>
		</div>
		
		<div id="content" role="main">
    		{block:SearchPage}
    			{block:SearchResults}
			        <p class="search-results">{lang:Your search for SearchQuery returned SearchResultCount results 2}</p>
			    {block:SearchResults}
      
      
      
    			{block:NoSearchResults}
    			<div class="post">
    				<div class="content">
    					<p>{lang:No search results for SearchQuery 2}</p>	
    				</div>			        
			    </div>
			    {block:NoSearchResults}
    		{/block:SearchPage}
    
    
    
    
			{block:Posts}
			
					{block:Text}
					<div class="post text">
						{block:Date} 
						<div class="date">
							<p><span class="day">{DayOfMonthWithZero}</span> {MonthNumber} / {Year}</p>
						</div>
						{/block:Date}
						
						<div class="content">
							{block:Title}
							<h2 class="link"><a href="{Permalink}">{Title}</a></h2>
							{/block:Title}
		
							{Body}
						</div>
						
						<div class="info">							
							{block:HasTags} 
								<div>
									<p class="tags-label">Tags:</p>
									<ul class="tags">
										{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}
									</ul>
								</div>
							{/block:HasTags}
							<p><a href="{Permalink}">{lang:Permalink}</a> {block:IfShowNotes}{block:NoteCount}<a href="{Permalink}#notes"><span class="notes">{NoteCountWithLabel}</span></a>{/block:NoteCount}{/block:IfShowNotes} {block:IfDisqusShortname}<span style="float: right;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a></span>{/block:IfDisqusShortname}</p>
						</div>
						{block:Date} 
						<!--[if IE]><div class="date-shadow ie-rotate"><![endif]-->
						<!--[if !IE]><!--><div class="date-shadow"><!--<![endif]-->
							<span class="cover"></span>
							<span class="shadow"></span>
							<span class="darker"></span>
						</div>
						{/block:Date}
					</div>
					{/block:Text}

					
					
					
					
					{block:Link}
					<div class="post link">
						{block:Date} 
						<div class="date">
							<p><span class="day">{DayOfMonthWithZero}</span> {MonthNumber} / {Year}</p>
						</div>
						{/block:Date}
						
						<div class="content">
							<h2 class="link"><a href="{URL}" class="link" {Target}>{Name}</a></h2>
		
							{block:Description}
		                        <div class="description">{Description}</div>
		                    {/block:Description}
						</div>
						
						<div class="info">							
							{block:HasTags} 
								<div>
									<p class="tags-label">Tags:</p>
									<ul class="tags">
										{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}
									</ul>
								</div>
							{/block:HasTags}
							<p><a href="{Permalink}">{lang:Permalink}</a> {block:IfShowNotes}{block:NoteCount}<a href="{Permalink}#notes"><span class="notes">{NoteCountWithLabel}</span></a>{/block:NoteCount}{/block:IfShowNotes} {block:IfDisqusShortname}<span style="float: right;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a></span>{/block:IfDisqusShortname}</p>
						</div>
						{block:Date} 
						<!--[if IE]><div class="date-shadow ie-rotate"><![endif]-->
						<!--[if !IE]><!--><div class="date-shadow"><!--<![endif]-->
							<span class="cover"></span>
							<span class="shadow"></span>
							<span class="darker"></span>
						</div>
						{/block:Date}
					</div>
					{/block:Link}

					
					
					
					
					
					{block:Photo}
					<div class="post photo">
						{block:Date} 
						<div class="date">
							<p><span class="day">{DayOfMonthWithZero}</span> {MonthNumber} / {Year}</p>
						</div>
						{/block:Date}
						
						<div class="content">
							<p>
								{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
							</p>
							{block:Caption}
							<div class="caption">{Caption}</div>
							{/block:Caption}
						</div>
						
						<div class="info">							
							{block:HasTags} 
								<div>
									<p class="tags-label">Tags:</p>
									<ul class="tags">
										{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}
									</ul>
								</div>
							{/block:HasTags}
							<p><a href="{Permalink}">{lang:Permalink}</a> {block:IfShowNotes}{block:NoteCount}<a href="{Permalink}#notes"><span class="notes">{NoteCountWithLabel}</span></a>{/block:NoteCount}{/block:IfShowNotes} {block:IfDisqusShortname}<span style="float: right;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a></span>{/block:IfDisqusShortname}</p>
						</div>
						{block:Date} 
						<!--[if IE]><div class="date-shadow ie-rotate"><![endif]-->
						<!--[if !IE]><!--><div class="date-shadow"><!--<![endif]-->
							<span class="cover"></span>
							<span class="shadow"></span>
							<span class="darker"></span>
						</div>
						{/block:Date}
					</div>
					{/block:Photo}

		
		
		
		
		
					{block:Photoset}
					<div class="post photoset">
						{block:Date} 
						<div class="date">
							<p><span class="day">{DayOfMonthWithZero}</span> {MonthNumber} / {Year}</p>
						</div>
						{/block:Date}
						
						<div class="content">
							{Photoset-500}
		
							{block:Caption}
							<div class="caption">{Caption}</div>
							{/block:Caption}
						</div>
						
						<div class="info">							
							{block:HasTags} 
								<div>
									<p class="tags-label">Tags:</p>
									<ul class="tags">
										{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}
									</ul>
								</div>
							{/block:HasTags}
							<p><a href="{Permalink}">{lang:Permalink}</a> {block:IfShowNotes}{block:NoteCount}<a href="{Permalink}#notes"><span class="notes">{NoteCountWithLabel}</span></a>{/block:NoteCount}{/block:IfShowNotes} {block:IfDisqusShortname}<span style="float: right;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a></span>{/block:IfDisqusShortname}</p>
						</div>
						{block:Date} 
						<!--[if IE]><div class="date-shadow ie-rotate"><![endif]-->
						<!--[if !IE]><!--><div class="date-shadow"><!--<![endif]-->
							<span class="cover"></span>
							<span class="shadow"></span>
							<span class="darker"></span>
						</div>
						{/block:Date}
					</div>
					{/block:Photoset}

					
					
					
					{block:Quote}
					<div class="post quote">
						{block:Date} 
						<div class="date">
							<p><span class="day">{DayOfMonthWithZero}</span> {MonthNumber} / {Year}</p>
						</div>
						{/block:Date}
						
						<div class="content">
							<blockquote cite="url">
								<p>"{Quote}"</p>
							</blockquote>
							{block:Source}
							<div class="source">{Source}</div>
							{block:Source}
		
						</div>
						
						<div class="info">							
							{block:HasTags} 
								<div>
									<p class="tags-label">Tags:</p>
									<ul class="tags">
										{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}
									</ul>
								</div>
							{/block:HasTags}
							<p><a href="{Permalink}">{lang:Permalink}</a> {block:IfShowNotes}{block:NoteCount}<a href="{Permalink}#notes"><span class="notes">{NoteCountWithLabel}</span></a>{/block:NoteCount}{/block:IfShowNotes} {block:IfDisqusShortname}<span style="float: right;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a></span>{/block:IfDisqusShortname}</p>
						</div>
						{block:Date} 
						<!--[if IE]><div class="date-shadow ie-rotate"><![endif]-->
						<!--[if !IE]><!--><div class="date-shadow"><!--<![endif]-->
							<span class="cover"></span>
							<span class="shadow"></span>
							<span class="darker"></span>
						</div>
						{/block:Date}
					</div>
					{/block:Quote}

					
					
					
					
					{block:Chat}
					<div class="post chat">
						{block:Date} 
						<div class="date">
							<p><span class="day">{DayOfMonthWithZero}</span> {MonthNumber} / {Year}</p>
						</div>
						{/block:Date}
						
						<div class="content">
							{block:Title}
							<h2>{Title}</h2>
							{/block:Title}
							
							<ul class="chat">
								{block:Lines}
								<li class="{Alt} user_{UserNumber}">
									{block:Label}
									<strong>{UserNumber}:</strong>
									{/block:Label}
									
									{Line}
								</li>
								{block:Lines}
							</ul>
						</div>
						
						<div class="info">							
							{block:HasTags} 
								<div>
									<p class="tags-label">Tags:</p>
									<ul class="tags">
										{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}
									</ul>
								</div>
							{/block:HasTags}
							<p><a href="{Permalink}">{lang:Permalink}</a> {block:IfShowNotes}{block:NoteCount}<a href="{Permalink}#notes"><span class="notes">{NoteCountWithLabel}</span></a>{/block:NoteCount}{/block:IfShowNotes} {block:IfDisqusShortname}<span style="float: right;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a></span>{/block:IfDisqusShortname}</p>
						</div>
						{block:Date} 
						<!--[if IE]><div class="date-shadow ie-rotate"><![endif]-->
						<!--[if !IE]><!--><div class="date-shadow"><!--<![endif]-->
							<span class="cover"></span>
							<span class="shadow"></span>
							<span class="darker"></span>
						</div>
						{/block:Date}
					</div>
					{/block:Chat}

					
					
					
					
					
					{block:Video}
					<div class="post video">
						{block:Date} 
						<div class="date">
							<p><span class="day">{DayOfMonthWithZero}</span> {MonthNumber} / {Year}</p>
						</div>
						{/block:Date}
						
						<div class="content">
							{Video-500}
							
							{block:Caption}
								<div class="caption">
									<p>{Caption}</p>
								</div>
							{/block:Caption}										
						</div>
						
						<div class="info">							
							{block:HasTags} 
								<div>
									<p class="tags-label">Tags:</p>
									<ul class="tags">
										{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}
									</ul>
								</div>
							{/block:HasTags}
							<p><a href="{Permalink}">{lang:Permalink}</a> {block:IfShowNotes}{block:NoteCount}<a href="{Permalink}#notes"><span class="notes">{NoteCountWithLabel}</span></a>{/block:NoteCount}{/block:IfShowNotes} {block:IfDisqusShortname}<span style="float: right;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a></span>{/block:IfDisqusShortname}</p>
						</div>
						{block:Date} 
						<!--[if IE]><div class="date-shadow ie-rotate"><![endif]-->
						<!--[if !IE]><!--><div class="date-shadow"><!--<![endif]-->
							<span class="cover"></span>
							<span class="shadow"></span>
							<span class="darker"></span>
						</div>
						{/block:Date}
					</div>
					{/block:Video}

					
					
					
					
					{block:Audio}
					<div class="post audio">
						{block:Date} 
						<div class="date">
							<p><span class="day">{DayOfMonthWithZero}</span> {MonthNumber} / {Year}</p>
						</div>
						{/block:Date}
						
						<div class="content">
							{AudioPlayerBlack}
							
							{block:Caption}
								<div class="caption">
									<p>{Caption}</p>
								</div>
							{/block:Caption}										
						</div>
						
						<div class="info">							
							{block:HasTags} 
								<div>
									<p class="tags-label">Tags:</p>
									<ul class="tags">
										{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}
									</ul>
								</div>
							{/block:HasTags}
							<p><a href="{Permalink}">{lang:Permalink}</a> {block:IfShowNotes}{block:NoteCount}<a href="{Permalink}#notes"><span class="notes">{NoteCountWithLabel}</span></a>{/block:NoteCount}{/block:IfShowNotes} {block:IfDisqusShortname}<span style="float: right;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:Comments}</a></span>{/block:IfDisqusShortname}</p>
						</div>
						{block:Date} 
						<!--[if IE]><div class="date-shadow ie-rotate"><![endif]-->
						<!--[if !IE]><!--><div class="date-shadow"><!--<![endif]-->
							<span class="cover"></span>
							<span class="shadow"></span>
							<span class="darker"></span>
						</div>
						{/block:Date}
					</div>
					{/block:Audio}


            
                {block:Permalink}
                    <div class="notecontainer">                    	
                    	{block:IfDisqusShortname}
                        <div id="disqus_thread"></div>
                        <script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
                        <noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">{lang:View the discussion thread}</a></noscript>
                        {/block:IfDisqusShortname}
                        
                        <div id="notes">
                        	<div class="notes">
                        		{PostNotes}
                        	</div>
                        </div>
                    </div>
                {/block:Permalink}
            
			
						
			{/block:Posts}
			
			
			{block:Pagination}
			<div id="pagination" role="navigation">
				<p>						
					{block:NextPage}
					<a href="{NextPage}" class="older">&laquo; {lang:Older entries}</a>
					{/block:NextPage}
					
					{block:PreviousPage}
					<a href="{PreviousPage}" class="newer">{lang:Newer Entries} &raquo;</a>
					{/block:PreviousPage}
				</p>
			</div>
			{/block:Pagination}
			
			
			{block:PermalinkPagination}
			<div id="pagination" role="navigation">
				<p>																										
					{block:NextPost}
					<a href="{NextPost}" class="newer">{lang:Next post} &raquo;</a>
					{/block:NextPost}
					
					{block:PreviousPost}
					<a href="{PreviousPost}" class="older">&laquo; {lang:Previous post}</a>
					{/block:PreviousPost}
				</p>
			</div>
			{/block:PermalinkPagination}
		</div>				
	</div>

	
	<div id="footer">
	    <div class="footer_inner">
			<div class="wrapper">
				<ul class="links" role="navigation">
					<li><a href="/archive">{lang:Archive}</a></li>
					{block:AskEnabled}<li><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}
				<li><a href="{RSS}">{lang:RSS}</a></li>
				</ul>
				<p class="info-theme" role="contentinfo">Powered by <a href="http://www.tumblr.com" rel=“extarnal” target=“_blank”>Tumblr</a>.</p>
			</div>
	    </div>
	</div>

    {block:IfDisqusShortname}
        <script>
            (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/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
            })();
        </script>
    {/block:IfDisqusShortname}
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment