Hatena::Grouptumblr

54kanのたんぶら日記 このページをアンテナに追加 RSSフィード

2008/04/30

[]mosaic mosaic - 54kanのたんぶら日記 を含むブックマーク はてなブックマーク - mosaic - 54kanのたんぶら日記 mosaic - 54kanのたんぶら日記 のブックマークコメント

http://www.freecsstemplates.org/preview/mosaic

↑これをtumblrで使えるように当てはめてみた。だけ。

  • 特徴
    • AutopagerizeとLDRizeが効く
      • LDRizeは効くけれどReblogCommandの[t]でリブログができない
  • まぁ許せるかなの壁
    • next, Previous の部分が適当
    • chatも適当
    • postが短いと下が余る
    • quoteがtextの時と変わらない感じ
  • 未完成部分
    • サーチフォーム

サーチフォームは私がhtmlわからなかっただけで、わかる人が直して使ったら使えるだろうし、そんなものいらぬと思ったらごっそり削除しちゃえばいいですよね。

ReblogCommandもわかりません。

手を加えて使ってください。

  • 下からまたは( 54kan.otodo.net/20080430-p2.txt )このファイルのコピペで。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Mosaic
Description: A two-column, fixed width Web 2.0 design with fluid header and menu. Suitable for small business websites and blogs.
Version    : 1.0
Released   : 20071028

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="/rss">
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	background: url(http://media.tumblr.com/uYOc2obDp8f7x9uadjG8qvni_500.jpg);
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	color: #972F1C;
}

h1, h2, h3 {
	text-transform: lowercase;
	color: #505956;
}

h1 {
	font-size: 42px;
}

hr {
	display: none;
}

a {
	color: #990000;
}

a:hover {
	text-decoration: none;
}

/* Header */

#header {
	height: 160px;
	background: url(http://media.tumblr.com/uYOc2obDp8f7zecimvUXaoqh_500.jpg);
}

#logo {
	height: 40px;
	padding-right: 10px;
	background: url(http://media.tumblr.com/uYOc2obDp8f80civWX33IThB_500.jpg) no-repeat right top;
	text-align: right;
}

#logo h1, #logo p, #logo a {
	display: inline;
	text-decoration: none;
	text-transform: lowercase;
	letter-spacing: -2px;
	font-size: 30px;
	font-weight: bold;
	color: #612A0F;
}

#menu {
	height: 96px;
}

#menu ul {
	list-style: none;
}

#menu li {
	float: left;
	height: 96px;
}

#menu a {
	float: left;
	height: 66px;
	padding: 30px 20px 0 20px;
	text-transform: lowercase;
	text-decoration: none;
	letter-spacing: -2px;
	font-size: 30px;
	font-weight: bold;
	color: #E6CFB4;
}

#menu a:hover {
	color: #FFFFFF;
}

#menu li.current_page_item a {
	background: url(http://media.tumblr.com/uYOc2obDp8f81lf6U1tsukfL_500.jpg) repeat-x;
	color: #647472;
}

/* Page */

#page {
	width: 980px;
	margin: 0 auto;
}

#page p,
#page ul,
#page ol {
	margin-bottom: 1.5em;
	line-height: 150%;
}

#page ul,
#page ol {
	list-style-position: inside;
}

/* Content */

#content {
	float: left;
	width: 680px;
	background: url(http://media.tumblr.com/uYOc2obDp8f864inD2ewDjty_500.jpg) no-repeat right top;
}

/* Post Block */

.post {
	background: url(http://f.hatena.ne.jp/images/fotolife/s/s54kan/20080430/20080430192901.jpg) repeat-y 147px 0;
}

.post .bgbottom {
	height: 60px;
	background: url(http://f.hatena.ne.jp/images/fotolife/s/s54kan/20080430/20080430192900.jpg) no-repeat 147px 0;
}

.post .meta {
	float: left;
	width: 149px;
	height: 355px;
	background: url(http://media.tumblr.com/uYOc2obDp8f81wad9kzb92aR_500.jpg) no-repeat;
	text-align: center;
	text-transform: lowercase;
	font-size: 14px;
	font-weight: bold;
	color: #333333;
}

.post .meta a {
}

.post .meta .date, .post .meta .comments {
	display: block;
	text-decoration: none;
	color: #333333;
}

.post .meta .d, .post .meta .c {
	display: block;
	font-size: 36px;
	padding: 95px 0 10px 0;
}

.post .title {
	margin-left: 149px;
	padding: 40px 40px 20px 20px;

	background: url(http://media.tumblr.com/uYOc2obDp8f84wqkfgeUsj3Y_500.jpg) no-repeat;
}

.post .title a {
	padding-right: 50px;
	background: url(http://media.tumblr.com/uYOc2obDp8f88ae5GingxDBo_400.gif) no-repeat right top;
	text-decoration: none;
	letter-spacing: -3px;
	font-size: 42px;
	color: #505956;
}

.post .entry {
	margin: 0 33px 0 149px;
	padding: 20px 20px 0 20px;
	background: url(http://media.tumblr.com/uYOc2obDp8f891axtmRtA4JY_500.jpg) no-repeat;
}

.post .entry a:link {
	padding: 0 5px;
	background: #E29269 url(http://media.tumblr.com/uYOc2obDp8f89r89YPGLC6rw_400.gif);
	text-decoration: none;
	color: #FFFFFF;
}

.post .entry a:hover {
	background: #A54112;
	color: #FFFFFF;
}

/* Content Bar - The widget-ready sidebar in the content area. */

#contentbar {
	clear: both;
	padding-top: 20px;
}

#contentbar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#contentbar li {
	display: block;
	float: left;
	width: 325px;
	margin-left: 10px;
	background: url(http://media.tumblr.com/uYOc2obDp8f8b0zf3HLDeLEo_500.jpg) repeat-y;
}

#contentbar li ul {
	padding: 0 20px 40px 20px;
	background: url(http://media.tumblr.com/uYOc2obDp8f8awaeeGKKJiMa_500.jpg) no-repeat left bottom;
}

#contentbar li li {
	float: none;
	width: auto;
	margin: 0;
	padding: 5px 0 5px 30px;
	background: url(http://media.tumblr.com/uYOc2obDp8f8fca8nUUrlz9S_400.gif) no-repeat left center;
}

#contentbar .widgettitle {
	padding: 45px 20px 20px 20px;
	background: url(http://media.tumblr.com/uYOc2obDp8f8am7nq9m1NkTl_500.jpg) no-repeat;
	letter-spacing: -2px;
}

/* Recent Posts */

#recent-posts {
}

#recent-posts .widgettitle{
	background-image: url(http://media.tumblr.com/uYOc2obDp8f8emm3fQhQWPwp_500.jpg);
}

#contentbar #recent-posts ul {
	background-image: url(http://media.tumblr.com/uYOc2obDp8f8fhle91ApnNNk_500.jpg);
}

/* Recent Comments */

#recent-comments ul {
	font-size: 10px;
	color: #D3AE8E;
}

#recent-comments a {
	display: block;
	font-size: 16px;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 300px;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
	position: relative;
	margin-bottom: 20px;
	background: url(http://media.tumblr.com/uYOc2obDp8f8guwmqNWCAOIt_500.jpg) repeat-y;
}

#sidebar li ul, #calendar_wrap {
	padding: 20px 20px 30px 20px;
	background: url(http://media.tumblr.com/uYOc2obDp8f8h6839Y38h6T8_500.jpg) no-repeat left bottom;
}

#sidebar li li {
	margin: 0;
	background: none;
}

#sidebar .widgettitle {
	padding: 15px;
	background: url(http://media.tumblr.com/uYOc2obDp8f8fykaF391ZAxa_500.jpg) no-repeat;
	letter-spacing: -2px;
	color: #AF5B19;
}

#sidebar .freetext {
	padding: 15px;
}

#sidebar a:link {
	padding: 0 5px;
	background: #FFBF00 url(http://f.hatena.ne.jp/images/fotolife/s/s54kan/20080430/20080430193627.gif);
	text-decoration: none;
}

#sidebar a:hover {
	background: #E29269 url(http://media.tumblr.com/uYOc2obDp8f89r89YPGLC6rw_400.gif);
	color: #FFFFFF;
}

/* Search */

#sidebar #search {
	height: 100px;
	background: url(http://media.tumblr.com/uYOc2obDp8f8g921AClJuvUk_500.jpg) no-repeat;
}

#search form {
	padding: 22px 0 0 20px;
}

#search br {
	display: none;
}

#search input {
	display: none;
	font: bold 14px Georgia, "Times New Roman", Times, serif;
	text-transform: lowercase;
	background: none;
	border: none;
}

#search #s {
	display: block;
	width: 170px;
	letter-spacing: -2px;
	word-spacing: .6em;
	font-size: 20px;
	color: #FFFFFF;
}

/* Calendar */

#calendar table {
	width: 90%;
	text-align: center;
}

/* Tag Cloud */

#tag_cloud {
	padding-bottom: 20px;
	text-align: center;
}

#tag_cloud .widgettitle {
	margin-bottom: 10px;
	text-align: left;
}

#tag_cloud a {
	margin: 0 20px 0 0;
}

/* Footer */

#footer {
	clear: both;
	width: 980px;
	height: 76px;
	margin: 0 auto;
	padding: 30px 0;
	background: url(http://f.hatena.ne.jp/images/fotolife/s/s54kan/20080430/20080430193524.jpg) no-repeat left center;
}

#footer p {
	margin: 0;
	padding: 10px 0 0 20px;
	font-size: smaller;
	font-weight: bold;
	letter-spacing: -1px;
}
</style>
</head>
<body>
<!-- start header -->
<div id="header">
	<div id="logo">
		<h1><a href="/">{Title}</a></h1>
	</div>
	<div id="menu">
		<ul>
			<li class="current_page_item"><a href="/">Home</a></li>
			<li><a href="/random">Random</a></li>
			<!-- <li><a href="http://tumview.inucara.net/id/***">Tumview</a></li> -->
			<li><a href="/archive">Archives</a></li>
			<li><a href="{RSS}">RSS</a></li>
		</ul>
	</div>
</div>
<!-- end header -->
<hr />
<!-- start page -->
<div id="page">
	<!-- start content -->
	<div id="content">
	{block:Posts}
	
	{block:Regular}
		<div class="post autopagerize_page_element">
			<p class="meta">{block:NewDayDate}<span class="date"> <span class="d">{DayOfMonthWithZero}</span> <span class="m">{ShortMonth} </span> </span>{/block:NewDayDate}{block:SameDayDate}<span class="date"> <span class="d">{DayOfMonthWithZero}</span> <span class="m">{ShortMonth} </span> </span>{/block:SameDayDate} &nbsp;&nbsp;&nbsp; <a href="{Permalink}" class="comments"> <span class="c">&#8734;</span> permalink </a></p>
			{block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
			<div class="entry">
				{Body}
			</div>
			<div class="bgbottom" style="clear: both;"></div>
		</div>
	{/block:Regular}
	
	{block:Photo}
		<div class="post autopagerize_page_element">
            <p class="meta">{block:NewDayDate}<span class="date"> <span class="d">{DayOfMonthWithZero}</span> <span class="m">{ShortMonth} </span> </span>{/block:NewDayDate}{block:SameDayDate}<span class="date"> <span class="d">{DayOfMonthWithZero}</span> <span class="m">{ShortMonth} </span> </span>{/block:SameDayDate} &nbsp;&nbsp;&nbsp; <a href="{Permalink}" class="comments"> <span class="c">&#8734;</span> permalink </a></p>
			<div class="entry">
				<p>{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}</p>
				{block:Caption}{Caption}{/block:Caption}
			</div>
			<div class="bgbottom" style="clear: both;"></div>
		</div>
	{/block:Photo}
	
	{block:Quote}
		<div class="post autopagerize_page_element">
			<p class="meta">{block:NewDayDate}<span class="date"> <span class="d">{DayOfMonthWithZero}</span> <span class="m">{ShortMonth} </span> </span>{/block:NewDayDate}{block:SameDayDate}<span class="date"> <span class="d">{DayOfMonthWithZero}</span> <span class="m">{ShortMonth} </span> </span>{/block:SameDayDate} &nbsp;&nbsp;&nbsp; <a href="{Permalink}" class="comments"> <span class="c">&#8734;</span> permalink </a></p>
			<div class="entry">
				<blockquote>&ldquo;{Quote}&ldquo;</blockquote>
				{block:Source}&mdash; {Source}{/block:Source}
			</div>
			<div class="bgbottom" style="clear: both;"></div>
		</div>
	{/block:Quote}
	
	{block:Link}
		<div class="post autopagerize_page_element">
			<p class="meta">{block:NewDayDate}<span class="date"> <span class="d">{DayOfMonthWithZero}</span> <span class="m">{ShortMonth} </span> </span>{/block:NewDayDate}{block:SameDayDate}<span class="date"> <span class="d">{DayOfMonthWithZero}</span> <span class="m">{ShortMonth} </span> </span>{/block:SameDayDate} &nbsp;&nbsp;&nbsp; <a href="{Permalink}" class="comments"> <span class="c">&#8734;</span> permalink </a></p>
			<h1 class="title"><a href="{URL}" class="link" {Target}>{Name}</a></h1>
			<div class="entry">
				{block:Description}{Description}{/block:Description}
			</div>
			<div class="bgbottom" style="clear: both;"></div>
		</div>
	{/block:Link}
	
	{block:Conversation}
		<div class="post autopagerize_page_element">
			<p class="meta">{block:NewDayDate}<span class="date"> <span class="d">{DayOfMonthWithZero}</span> <span class="m">{ShortMonth} </span> </span>{/block:NewDayDate}{block:SameDayDate}<span class="date"> <span class="d">{DayOfMonthWithZero}</span> <span class="m">{ShortMonth} </span> </span>{/block:SameDayDate} &nbsp;&nbsp;&nbsp; <a href="{Permalink}" class="comments"> <span class="c">&#8734;</span> permalink </a></p>
			{block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
			<div class="entry">
				<ul>
				{block:Lines}
					<li>{block:Label}{Label}{/block:Label}
					{Line}</li>
				{/block:Lines}
				</ul>
			</div>
			<div class="bgbottom" style="clear: both;"></div>
		</div>
	{/block:Conversation}
	
	{block:Audio}
		<div class="post autopagerize_page_element">
			<p class="meta">{block:NewDayDate}<span class="date"> <span class="d">{DayOfMonthWithZero}</span> <span class="m">{ShortMonth} </span> </span>{/block:NewDayDate}{block:SameDayDate}<span class="date"> <span class="d">{DayOfMonthWithZero}</span> <span class="m">{ShortMonth} </span> </span>{/block:SameDayDate} &nbsp;&nbsp;&nbsp; <a href="{Permalink}" class="comments"> <span class="c">&#8734;</span> permalink </a></p>
			<div class="entry">
				{AudioPlayerWhite}
				<div class="description">{block:Caption}{Caption}{/block:Caption}</div>
			</div>
			<div class="bgbottom" style="clear: both;"></div>
		</div>
	{/block:Audio}
    
	{block:Video}
		<div class="post autopagerize_page_element">
            <p class="meta">{block:NewDayDate}<span class="date"> <span class="d">{DayOfMonthWithZero}</span> <span class="m">{ShortMonth} </span> </span>{/block:NewDayDate}{block:SameDayDate}<span class="date"> <span class="d">{DayOfMonthWithZero}</span> <span class="m">{ShortMonth} </span> </span>{/block:SameDayDate} &nbsp;&nbsp;&nbsp; <a href="{Permalink}" class="comments"> <span class="c">&#8734;</span> permalink </a></p>
			<div class="entry">
				{Video-400}
                <div class="description">{block:Caption}{Caption}{/block:Caption}</div>
			</div>
			<div class="bgbottom" style="clear: both;"></div>
		</div>
	{/block:Video}
	
	{/block:Posts}
	
			<div class="entry autopagerize_insert_before">
			<p>
			{block:PreviousPage}
				<a href="{PreviousPage}">&#171; Previous</a> &nbsp;&nbsp;
			{/block:PreviousPage}

			{block:NextPage}
				<a href="{NextPage}" rel="next">Next &#187;</a>
			{/block:NextPage}
			</p>
			</div>
			<div class="bgbottom" style="clear: both;"></div>
	</div>
	
	<!-- end content -->
	<!-- start sidebar -->
	<div id="sidebar">
		<ul>
			<!-- search form わかんない\(^o^)/ -->
			<li id="search" class="widget widget_search">
				<form id="searchform" method="get" action="">
					<div>
						<input type="text" name="s" id="s" size="15" value="" />
						<br />
						<input type="submit" value="Search" />
					</div>
				</form>
			</li>

			<li id="about" class="widget">
				<h2 class="widgettitle">About</h2>
				<div class="freetext">{Description}</div>
			</li>
			
			<!-- こんな感じでサイドバー増やせるハズ。
			
			<li id="ほにゃらら" class="widget">
				<h2 class="widgettitle">タイトル</h2>
				<div class="freetext">フリーテキスト</div>
			</li>
			
			でも、ul 使うなら
			
			<li id="ほにゃらら" class="widget">
				<h2 class="widgettitle">タイトル</h2>
				<ul>
					<li>リスト</li>
					<li>リスト2</li>
				</ul>
			</li>
			
			こうしてください。 -->
		</ul>
	</div>
	<!-- end sidebar -->
</div>
<!-- end page -->
<hr />
<!-- start footer -->
<div id="footer">
	<p>Powered by <a href="http://www.tumblr.com">Tumblr</a>. &nbsp;&bull;&nbsp; Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>, <a href="http://www.freecsstemplates.org/preview/mosaic">mosaic</a>.</p>
</div>
<!-- end footer -->
</body>
</html>

ConyersConyers2012/01/10 02:26Stay with this guys, you're helping a lot of pelope.

qcbilotqcbilot2012/01/10 18:00ONIxzC <a href="http://suutdkzoqpca.com/">suutdkzoqpca</a>

pweccfrpweccfr2012/01/10 23:38EhahOH , [url=http://llhfznnabnqm.com/]llhfznnabnqm[/url], [link=http://yqihnhedhacv.com/]yqihnhedhacv[/link], http://ynirtzzdykws.com/

iylatyzjliylatyzjl2012/01/12 23:26xBnKrS <a href="http://kpeoeuyofikc.com/">kpeoeuyofikc</a>

ertjycrtzmjertjycrtzmj2012/01/15 01:48cMAUvs , [url=http://rjrjreeywuga.com/]rjrjreeywuga[/url], [link=http://fsrcvtgqepkn.com/]fsrcvtgqepkn[/link], http://zfolzpqrxadi.com/