無料ブログ作成ならJUGEM(ジュゲム)

ホーム

テンプレートHTML・CSSについて: 公開されているテンプレートのHTMLに{ad}タグがないものありますので、エラーが表示された場合は{ad}タグを追加してご利用ください。
テンプレートの利用について: 弊社が著作権を所有する画像等以外のテンプレートに関する著作権は制作者にあります。弊社提供以外のブログサービスで利用した場合は、その都度制作者の方にご確認ください。

テンプレート名 : Sincerely yours

HTML・CSSをコピーして使う

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">

<head>

</head>

<body onload="javascript:initval();">
{gmo_header_src}

<div id="skip">
		<p id="top">Page Top</p>
		<p><a href="#main">Skip to Contents</a></p>
	</div>

<div id="wrapper">

<div id="header">

<h1>{blog_name}</h1>
			<p id="description">{blog_description}</p>

<div id="searchform">
				<form method="get" action="./">
					<label for="search">Search this site</label>
					<input id="search" name="search" size="20" class="text"  value="search this site."  onblur="if(this.value==''){this.value='search this site.';}" onfocus="this.value='';" />
				</form>
			</div>

<div id="content">

<div id="main">		
		   
				
				<div class="entry">
					<h2 class="entryTitle">{entry_title_link}</h2>					
					<ul class="entryState">
						<li class="date">{entry_date}</li>
						<li class="comment">{comment_num}</li>
					</ul>
					<div class="entryBody">
						{entry_description}
					</div>
					<div class="entryMore">

<p><a href="./?eid={entry_sequel_id}#sequel">続きを読む &raquo;</a></p>

{entry_sequel_text}

</div>
					<ul class="entryState bottom">
						<li>by {user_name}</li>
						<li>in {category_name}</li>
						
						<li>{trackback_num}</li>
						<li>{pookmark_link}</li>
						<li>{logpi_link}</li>
					</ul>		
				</div>
				{trackback_auto_discovery}
				
		
				
				<div id="relatedEntry">
					<h3 id="relateTitle">関連する記事</h3>
					{related_entry_list}
				</div>
				
		
		    
				
				<div id="comments">
		        			<h3 id="commentTitle">コメント</h3>
		
					
					<div class="comment_col alt{comment_number_cycle}">
						<ul class="commentState">
		  					<li class="user">{comment_name_notarget}</li>
		  					<li class="date">{comment_time}</li>
						</ul>
						<div class="commentBody">
							{comment_description}
						</div>
					</div>

<h4 id="commentSendTitle">コメントする</h4>
		        			<div class="commentSendForm">
						<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
							<fieldset>
							<div class="block">
								<input type="hidden" name="entry_id" value="{entry_id}" class="input" />
							</div>
							<div class="block">
								<label for="name">name</label>
								<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" class="input" />
							</div>
							<div class="block">
								<label for="email">email</label>
								<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="input" />
							</div>
							<div class="block">
								<label for="url">url</label>
								<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="input" />
							</div>
							<div class="block">
								<label for="description">comments</label>
								<textarea tabindex="4" id="description" name="description" rows="5"></textarea>
							</div>
							<div class="block">
								<input type="checkbox" name="set_cookie" value="1" id="set_cookie" /><label class="checkbox" for="set_cookie">入力情報を保存</label>
							</div>
							<div class="block">
								<input tabindex="5" type="submit" value="コメント送信" onclick="javascript:setval();" class="btn" />
							</div>
							</fieldset>
						</form>
					</div>

</div>

<div id="trackback">
					<h3 id="trackbackTitle">トラックバック</h3>
					<div class="block">
						<label class="" for="tb_url">この記事のトラックバックURL</label>
						<input type="text" id="tb_url" value="{trackback_url}" />
					</div>

<div class="trackbackName">
						{trackback_title}
					</div>
		     	   		<div class="trackbackBody">
						{trackback_excerpt}
					</div>
					<ul class="trackbackState">
						<li>{trackback_blog_name}</li>
						<li>{trackback_time}</li>
					</ul>

</div>

<div id="entryNavi">
					{prev_entry} | <a href="./">main</a> | {next_entry} 
				</div>

<div id="profile">
					<h2 id="profileTitle">プロフィール</h2>
					<div id="profileName">
						{profile_name}
					</div>
					<div id="profileBody">
						{profile_description}
					</div>
				</div>

<div id="pager">
					{full_pager_link}
				</div>

</div>

<div id="side">

<div class="sideContents profile">
					<h3>Profile</h3>
					{user_list}
				</div>

<div class="sideContents calendar">
					<h3>Calendar</h3>
					<table border="0" cellpadding="0" cellspacing="1">
					<tr>
						<th class="cell sun">Sun</th>
						<th class="cell">Mon</th>
						<th class="cell">Tue</th>
						<th class="cell">Wed</th>
						<th class="cell">Thu</th>
						<th class="cell">Fri</th>
						<th class="cell sat">Sat</th>
					</tr>
					</table>
					{calendar}
				</div>

<div class="sideContents">
					<h3>{freespace_title1}</h3>
					{freespace_contents1}
				</div>

<div class="sideContents">
					<h3>{freespace_title2}</h3>
					{freespace_contents2}
				</div>

<div class="sideContents">
					<h3>{freespace_title3}</h3>
					{freespace_contents3}
				</div>

<div class="sideContents">
					<h3>{freespace_title4}</h3>
					{freespace_contents4}
				</div>

<div class="sideContents">
					<h3>{freespace_title5}</h3>
					{freespace_contents5}
				</div>

<div class="sideContents text">
					<h3>Latest Entries</h3>
					{latest_entry_list}
				</div>

<div class="sideContents text">
					<h3>Categories</h3>
					{category_list}
				</div>

<div class="sideContents archives">
					<h3>Archives</h3>
					{archives_list2ex}
				</div>

<div class="sideContents comment">
					<h3>Recent Comments</h3>
					{recent_comment_list2}
				</div>

<div class="sideContents">
					<h3>Recent Trackback</h3>
					{recent_trackback_list2}
				</div>

<div class="sideContents">
					<h3>Recommend</h3>
					{amazon_item}
				</div>

<div class="sideContents text">
					<h3>Links</h3>
					{link_list}
				</div>

<div class="sideContents">
					<h3>Sponsored Links</h3>
					{ad}
				</div>

<div class="sideContents">
					<h3>Others</h3>
					<ul>
						<li><a href="./manage/">管理者ページ</a></li>
						<li>書いた記事数 : {all_entry_count}</li>
						<li>最後に更新した日 : {last_entry_date}</li>
					</ul>
				</div>

<div class="sideContents">
					<h3>Mobile</h3>
					<p>{site_qrcode}</p>
				</div>

<div class="sideContents">
					<h3>Powered</h3>
					<p>{powered}</p>
				</div>

</div>

</div>

<div id="footer">
			<p id="copyright">{copyright}</p>
			<p>Icons by <a href="http://famfamfam.com/">famfamfam</a>. <abbr title="User Template File">UTF</abbr> Designed by <a href="http://choaw.jugem.jp/">choaw</a>.</p>
			<p><a class="top-btn" href="#top">このページトップへ</a></p>
		</div>

</div>

</body>

</html>

CSS

@charset "EUC-JP";

/* -------------------------------------
Sincerely yours Style Sheet
Template URI:  http://choaw.jugem.jp/?tid=4
Author:        choaw
URL:           http://choaw.jugem.jp/
Date:          25 Mar 2010
---------------------------------------- */

* {
	margin: 0;
	padding: 0;
}
body {
	font: 100%/1.7 "Lucida Grande", Helvetica, Arial, sans-serif;
	color: #333;
	background: #efefef;	
}
body {font-size: small\9;}

*:first-child + html body {font-size: small;}

/* headings
---------------------------------------- */
h2, h3, h4, h5, h6 {
	line-height: 1.2;
/*	margin-bottom: 1.2em;*/
}
h2 {font-size: 160%;}
h3 {font-size: 130%;}
h4 {font-size: 120%;}
h5 {font-size: 105%;}
h6 {font-size: 100%;}

/* paragraph
--------------------------------------- */
p {
/*	margin-bottom: 1.5em;*/
}

/* links
--------------------------------------- */
a {
/*	color: #d83473;*/
	color: #08c;
	text-decoration: none;
}

/* images
---------------------------------------- */
img {
	border: none;
}
#main .pict {
}
img.left {
	float: left;
	margin: .45em 1.2em .3em 0;
}
img.right{
	float: right;
	margin: .45em 0 .3em 1.2em;
}

/* lists
---------------------------------------- */
ul, ol {
/*	margin-bottom: 1.5em*/
	padding-left: 40px;
}
dt {
	font-weight: bold;
}
dd {
	padding-left: 40px;
}
/* table
---------------------------------------- */
#content table {
/*	margin-bottom: 1.5em;*/
	border-collapse: collapse;
	line-height: 1.7;
	font-size: 100%;
	table-layout: auto;
}
table caption {
}
#main th, #main td {
	padding: 3px;
	color: #666;
	border-bottom: 1px solid #666;
	empty-cells: show;
	vertical-align: top;
}
#main th {
	border: 1px solid #333;
	border-width: 1px 0;
	color: #333;
	font-weight: bold;
}

/* form
--------------------------------------- */
fieldset {
	border: none;
}
input, textarea {
	font-size: 100%;
}

/*
--------------------------------------- */
em, strong {
	font-weight: bold;
}
q {
	color: #666;
}
blockquote {
	position: relative;
/*	margin-bottom: 1.5em;*/
	padding: 5px 40px 0;
	color: #666;
	background: url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904960.png) 8px 3px no-repeat;
}
blockquote cite {
	display: block;
	text-align: right;
}
cite a {
	color: #666;
}
cite a:hover {
	color: #000;
}
pre {
/*	margin-bottom: 1.5em*/
	padding: 10px 15px;
	font: 100%/1.4 Courier, monospace;
	overflow: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
	border-left: 3px solid #efefef;
	background: #f8f8f8;
}
abbr, acronym {
	border-bottom: 1px dashed #ccc;
	cursor: help;
}

/* skip
--------------------------------------- */
#skip {
	position: absolute;
	top: -999px;
}

/* wrapper
--------------------------------------- */
#wrapper {
	width: 940px;
	margin: 0 auto;
	background: #fff url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904944.png) 0 0 repeat-y;
}

/* header
--------------------------------------- */
#header {
	height: 9em;
	position: relative;
	background: #efefef url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904922.png) 0 0 no-repeat;
	line-height: 1.4;
}

/* blog title
--------------------------------------- */
h1 {
	position: relative;
	top: .6em;
	left: 15px;
	padding-top: 20px;
	width: 925px;
	font-size: 220%;
	font-weight: normal;
	text-shadow: 0 1px 0 #ccc;
}
h1 a {
	color: #333;
}

/* blog description
--------------------------------------- */
p#description {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 8px 0 0 17px;
	width: 923px;
	color: #68788C;
	background: url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904923.png) 0 0 no-repeat;
}

/* searchform
--------------------------------------- */
#searchform {
	position: absolute;
	top: 2em;
	left: 723px;
	padding-top: 20px;
	width:198px;
}
#searchform label {
	float: left;
	text-indent: -9999px;
	height:18px;
	width: 18px;
	line-height: 0;
	background: #fff url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904951.png) 1px 50% no-repeat;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius:10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomleft: 10px;
}
#searchform .text {
	outline: none;
	height: 18px;
	width: 180px;
	border: 0;
	color: #787878;
	float: left;
	line-height: 18px;
	-webkit-border-top-right-radius: 15px;
	-webkit-border-bottom-right-radius: 15px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-topright: 10px;
}
#searchform .text:focus {	
	color: #333;
}

/* feeds
--------------------------------------- */
.feeds {
	position: absolute;
	right: 17px;
	bottom: 0;
	font-family: Verdana, sans-serif;
	list-style: none;
}
.feeds li{
	display: inline;
}
.feeds a {
	padding: 1px 0 1px 20px;
	color: #777;
	background: url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904982.png) 0 50% no-repeat;
}
.feeds a:hover {
	color: #f26522;
}

/* content
--------------------------------------- */
#content {
	width: 940px;
	background: url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904924.png) 0 0 no-repeat;
	overflow: hidden;
}

/*
???main
--------------------------------------- */
#main {
	float: right;
	width: 600px;
	padding: 38px 30px 0 0;
}

/* page nav
--------------------------------------- */
#entryNavi {
	text-align: center;
	margin-bottom: 4em;
}
#entryNavi a {
	color: #777;
}
#entryNavi a:hover {
	color: #000;
}
/* pager
--------------------------------------- */
#pager {
	text-align: center;
	margin-bottom: 4em;
	font-weight: bold;
}
#pager span{
	margin: 0 2px;
}
#pager span.current {
	padding: 3px 5px;
	color: #333;
}
#pager a {
	padding: 3px 5px;
	color: #999;
}
#pager a:hover {
	color: #000;
}

/* entry 
--------------------------------------- */
.entry {
	margin-bottom: 4em;
}
/* entrytitle */
.entryTitle {
	margin-bottom: 0;
	border-bottom: 1px solid #e0e0e0;
	text-shadow: 0 1px 0 #eee;
}
.entryTitle a {
	color: #333;
}
/* entry main */
.entryBody {
}
/* entry more */
.entryMore {
	margin-bottom: 2em;
}
.entryBody a, .entryMore a {
	text-decoration: underline;
}
.entryBody a:hover, .entryMore a:hover {
	text-decoration: none;
}
/* entry state
--------------------------------------- */
.entryState {
	margin-bottom: 2em;
	padding: 0;
}
.bottom {
	text-align: right;
	margin: 0;
}
.entryState a{
	color: #777;
}
.entryState a:hover{
	color: #000;
}
.entryState li {
	display: inline;
	padding: 1px 0;
}
.entryState .date {
	padding-left: 20px;
	background: url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904981.png) 0 50% no-repeat;
}
.entryState .comment {
	padding-left: 20px;
	background: url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904974.png) 0 50% no-repeat;
}

/* related entry
--------------------------------------- */
#relatedEntry {
	margin-bottom: 4em;
}
#relatedEntry a:hover {
	text-decoration: underline;
}
#relateTitle {
	margin-bottom: 1.2em;
}
#relatedEntry ul {
	list-style: none;
	padding-left: 20px;
}
#relatedEntry li {
	padding-left: 20px;
	background: url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904985.png) 0 50% no-repeat;
}

/* comment
--------------------------------------- */
#comments {
	margin-bottom: 4em;
}
#comments a:hover {
	text-decoration: underline;
}
#commentTitle {
	margin-bottom: 1.2em;
}
#commentSendTitle {
	margin-bottom: 1.2em;
}
.comment_col {
	margin-bottom: 2em;
	padding-bottom: 5px;
	background: url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904962.png) 0 100% no-repeat;
}
.alt1 {
	background-position: 100% 100%;
}
.commentBody {
	margin-left: 20px;
	padding: 5px 10px;
	border: 1px solid #d3e2ee;
	border-width: 0 1px;
	background:#f7fafd;
}
.alt1 .commentBody{
	background: #f5f5f5;
	border-color: #e5e5e5;
}
.commentState {
	padding: 0 0 5px 0;
	background: url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904961.png) 0 100% no-repeat;
}
.alt1 .commentState {
	background-position: 100% 100%;
}
ul.commentState li {
	display:inline;
	padding: 2px 0;
}
ul.commentState .user {
	padding-left: 20px;
	background: url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904973.png) 0 50% no-repeat;
}
ul.commentState .date {
}

/* comment form
--------------------------------------- */
.commentSendForm {
	padding-top: .5em;
}
.commentSendForm .input, .commentSendForm textarea {
	padding: 5px;
	position: relative;
	top: -1.9em;
	left: 9em;
	color: #666;
	background: #f8f8f8;
	border: 1px solid #ccc;
}
.commentSendForm .input {
	width: 250px;
}
.commentSendForm textarea {
	width: 400px;
}
.commentSendForm label {
	display: block;
	width: 8em;
	text-align: right;
}
.commentSendForm label.checkbox{
	display: inline;
	width: auto;
	text-align: left;
}
.commentSendForm .block {
	position: relative;
}
.commentSendForm .btn {
	margin-left: 9em;
}
.commentSendForm #set_cookie, .checkbox {
	position: relative;
	top: -1.4em;
	left: 9em;
}
.commentSendForm input:focus, .commentSendForm textarea:focus {
	outline: none;
	border: 1px solid #08c;
	color: #333;
	background: #fff;
}
/*btn */
.commentSendForm .btn, .commentSendForm .btn:focus {
	padding: 3px 8px;
	border: 0;
	cursor: pointer;
	color: #fff;
	background: #2e77cf;
	background: linear-gradient(top, rgb(83, 170, 233), to(rgb(46, 119, 207)));
	background: -moz-linear-gradient(top, rgb(83, 170, 233), rgb(46, 119, 207));
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(83, 170, 233)), to(rgb(46, 119, 207)));
	filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr="#53aae9", EndColorStr="#2e77cf");
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	text-shadow: 0 1px 0 #333;
	-moz-box-shadow: 0 1px 2px #666;
	-webkit-box-shadow: 0 1px 2px #666;
	box-shadow: 0 1px 2px #666;
}
.commentSendForm .btn:active {
	background: #1f4b80;
	background: linear-gradient(top, rgb(46, 119, 207), to(rgb(31, 75, 128)));
	background: -moz-linear-gradient(top, rgb(46, 119, 207), rgb(31, 75, 128));
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(46, 119, 207)), to(rgb(31, 75, 128)));
	filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr="#2e77cf", EndColorStr="#1f4b80");
}

/* trackback
--------------------------------------- */
#trackback {
	margin-bottom: 4em;
}
#trackback a:hover {
	text-decoration: underline;
}
#trackbackTitle {
	margin-bottom: 1.2em;
}
#trackback label {
	display: block;
}
#trackback input {
	width: 400px;
	margin-bottom: 2em;
	outline: none;
	border: 1px solid #ccc;
	padding: 5px;
}
#trackback input:focus {
	border-color: #333;
}
.trackbackName {
	font-weight: bold;
	padding-left: 20px;
	background: url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904986.png) 0 50% no-repeat;
}
.trackbackBody {
}
ul.trackbackState {
	text-align: right;
	margin-bottom: 2em;
}
ul.trackbackState li {
	display: inline;
	margin-left: 5px;
}

/* profile
--------------------------------------- */
#profile {
	margin-bottom: 2em;
	border: none;
}
#profileTitle {
	margin-bottom: 2em;
}
#profileName {
	font-weight: bold;
}
#profileBody {
}
#profileBody a:hover {
	text-decoration: underline;
}

/*
 side menu
--------------------------------------- */

#side {
	float: left;
	width: 280px;
	padding-top: 38px;
}

/* side menu title
--------------------------------------- */
#side h3 {
	margin-bottom: 1.2em;
}
.sideContents a {
	color: #708090;color: #777;
}
.sideContents a:hover {
	color: #000;
}

/* side menu contents
--------------------------------------- */
.sideContents {
	margin-bottom: 1.5em;
	padding: 0 30px 30px;
	border-bottom: 1px solid #e0e0e0;
}
.sideContents ul {
	list-style: none;
	padding: 0;
}
.text ul {
	border-top: 1px solid #eee;
}
.text ul li {
	border-bottom: 1px solid #eee;
	padding: 3px;
}
.sideContents ol {
	padding-left: 1.7em;
}
.sideContents dd {
	padding: 0;
}
/* profile
--------------------------------------- */
#side .profile a {
	padding-left: 20px;
	background:url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904987.png) 0 50% no-repeat;
}

/* calendar
--------------------------------------- */
.calendar table {
	margin: 0 auto;
}
.calendar th {
	color: #777;
	font-weight: normal;
	font-size: 80%;
}
.calendar th, .calendar td {
	padding: 0;
}
.calendar th {
	border: none;
}
th.sun {
	color: #c00;
}
th.sat {
	color: #06c;
}
.calendar td {
	border: none;
}
.cell a,.call a:link,.call a:visited {
	color: #333;
	font-weight: bold;
	display: block;
	background: #feffbb;
}
.cell a:hover {
	color: #08c;
}
/* calendar cell */
.cell {
	width: 27px;
}

/* recent comment
--------------------------------------- */
#side .comment ul {
	list-style: none;
	padding:0;
}
#side .comment li{
	background: none;
	padding: 0;
}
#side .comment li a {
	padding-right: 20px;
	background:#fff url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904983.png) 100% 50% no-repeat;
}

/* archives
--------------------------------------- */
.archives ul {
	list-style: none;
}
.archives li a {
	padding-left: 20px;
	background: url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904972.png) 0 50% no-repeat;
}
.archives ul ul {
	list-style: disc;
	padding-left: 40px;
}
.archives ul ul a{
	padding: 0;
	background: none;
}

/*
 footer
---------------------------------------- */

#footer {
	width: 910px;
	padding: 8px 15px 32px;
	position: relative;
	background: #efefef url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904945.png) 0 100% no-repeat;
	border-top: 1px solid #aaa;
	line-height: 1.4;
	text-shadow: 0 1px 0 #eee;
}
#footer a {
	color: #666;
}
#footer a:hover {
	color: #000;
}
#copyright {
margin-right: 90px;
}
.top-btn {
	display: block;
	position: absolute;
	top: 10px;
	right: 20px;
	width: 81px;
	height: 20px;
	line-height: 0;
	text-indent: -9999px;
	background: url(http://img-cdn.jg.jugem.jp/70a/1631156/20100226_904952.png) 100% 0 no-repeat;
	outline: none;
}
.top-btn:active {
	background-position: 0 0;
}

/* ads
--------------------------------------- */
#gEntryAdContainer {
	padding: 0 !important;
	margin: 2em 40px 0;
}
#gEntryAdContainer a {
}

高品質デザイン選び放題で、あなた好みのブログに。今すぐブログ作成！: 今すぐ 無料ブログ をはじめよう！ ≫ブログ作成