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

ホーム

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

テンプレート名 : memo card

HTML・CSSをコピーして使う

HTML

<?xml version="1.0" encoding="{site_encoding}"?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset={site_encoding}" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>{site_title}</title>
<link rel="stylesheet" href="{site_css}" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="{site_rss}" />
<link rel="alternate" type="application/atom+xml" href="{site_atom}" />
<link rel="alternate" media="handheld" type="application/xhtml+xml" href="{mobile_url}" />
<script type="text/javascript" src="./template/js/cookie.js"></script>

</head>

<div id="header">

<h1>{blog_name}</h1>
<p>{blog_description}</p>

</div>

<div id="content">

<div id="main">

<p class="previous">{prev_entry}</p>
<p class="next">{next_entry}</p>
<p class="clear">&nbsp;</p>

<div class="entry_area">
<h2><a href="{entry_permalink}">{entry_title}</a></h2>
<p class="entry_date">{entry_year}{entry_month}{entry_day}</p>

<div class="entry">{entry_description}</div>
<a name="sequel"></a>
<div class="entry">{entry_sequel}</div>
{trackback_auto_discovery}
<ul class="state">
<li>[{category_name}]</li>
<li>{comment_num}</li>
<li>{trackback_num}</li>
<li>by {user_name}</li>
</ul>
</div>

<h3 id="comments">comments</h3>

<div class="comment">
<ul class="comment_state">
<li>{comment_name}</li>
<li>{comment_year}.{comment_month}.{comment_day} {comment_hour_24}:{comment_minute}</li>
</ul>
<div class="comment_content">{comment_description}</div>
</div>

		
<h3>add your comment</h3>
<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
<input type="hidden" name="entry_id" value="{entry_id}" class="input" />
<dl id="com_form">
<dt><label for="name">name:</label></dt>
<dd><input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" class="input" /></dd>
<dt><label for="email">email:</label></dt>
<dd><input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="input" /></dd>
<dt><label for="url">url:</label></dt>
<dd><input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="input" /></dd>
<dt><label for="description">comments:</label></dt>
<dd><textarea tabindex="4" id="description" name="description" rows="5"></textarea></dd>
<dt><label for="set_cookie">remember info?</label></dt>
<dd><input type="checkbox" name="set_cookie" value="1" id="set_cookie" /></dd>
</dl>
<p><input tabindex="5" type="submit" value="submit!" class="button" /></p>
</form>

<h3 id="trackback">trackback URL for this post:</h3>
<p><span class="trackback_url">{trackback_url}</span></p>

<h3>trackback</h3>

<div class="trackback">
<h4>{trackback_title}</h4>
<dl>
<dt>excerpt:</dt>
<dd>{trackback_excerpt}</dd>
<dt>weblog:</dt>
<dd>{trackback_blog_name}</dd>
<dt>tracked on: </dt>
<dd>{trackback_year}.{trackback_month}.{trackback_day} {trackback_hour_24}:{trackback_minute}</dd>
</dl>
<p class="clear">&nbsp;</p>
</div>

<div class="entry_area">
<h2>profile</h2>
<p class="author">{profile_name}</p>
<div class="entry">{profile_description}</div>
</div>

<p class="page_navi">{prev_page_link} | {page_now}/{page_num}PAGES | {next_page_link}</p>

<p class="page_top"><a href="#header">pagetop▲</a></p>
<p class="clear">&nbsp;</p>
</div>

	

<div id="sidemenu" class="sidebar">

<dl>
<dt>selected entries</dt>
<dd>
{selected_entry_list}
</dd>
</dl>

			
			

<dl>
<dt>categories</dt>
<dd>
{category_list}
</dd>
</dl>

<dl>
<dt>archives</dt>
<dd>
{archives_list}
</dd>
</dl>

<dl>
<dt>recent comment</dt>
<dd>
<dl class="sidelist">

<dt><a href="./?eid={recent_comment_item_entry_id}#comments">{recent_comment_item_title}</a></dt>
<dd>{recent_comment_item_name} ({recent_comment_item_month}.{recent_comment_item_day})</dd>

</dl>
</dd>
</dl>

<dl>
<dt>recent trackback</dt>
<dd>
<dl class="sidelist">

<dt><a href="./?eid={recent_trackback_item_entry_id}#trackback">{recent_trackback_item_title}</a></dt>
<dd>{recent_trackback_item_blog_name}</dd>

</dl>
</dd>
</dl>

<dl>
<dt>profile</dt>
<dd>
{user_list}
</dd>
</dl>

<dl>
<dt>search this site.</dt>
<dd>
<form method="get" action="./">
<input id="search" name="search" size="20" style="width:110px" class="search" />
<input type="submit" value="search" class="button" />
</form>
</dd>
</dl>

<dl>
<dt>others</dt>
<dd>
<ul>
<li><a href="./admin/">admin</a></li>
<li><a href="./?mode=rss">RSS1.0</a></li>
<li><a href="./?mode=atom">Atom0.3</a></li>
</ul>
</dd>
</dl>

<dl>
<dt>mobile</dt>
<dd>
{site_qrcode}
</dd>
</dl>

<dl>
<dt>{freespace_title1}</dt>
<dd>
{freespace_contents1}
</dd>
</dl>


<dl>
<dt>{freespace_title2}</dt>
<dd>
{freespace_contents2}
</dd>
</dl>

<dl>
<dt>{freespace_title3}</dt>
<dd>
{freespace_contents3}
</dd>
</dl>

			

<dl>
<dt>{freespace_title4}</dt>
<dd>
{freespace_contents4}
</dd>
</dl>

			

<dl>
<dt>{freespace_title5}</dt>
<dd>
{freespace_contents5}
</dd>
</dl>


<dl>
<dt>links</dt>
<dd>
{link_list}
</dd>
</dl>

<dl>
<dt>recommend</dt>
<dd>
{amazon_item}
</dd>
</dl>

<dl>
<dt>sponsored links</dt>
<dd>
{ad}
</dd>
</dl>

<p class="page_top"><a href="#header">pagetop▲</a></p>
</div>

	
</div>

<div id="footer"><address class="copyright">{copyright}</address>
</div>
</div>

</body>
</html>

CSS

* {
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

body {
text-align: center;
font-family: arial, helvetica, verdana, osaka, ms-gothic, sans-serif;
font-size: 100%;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}

img {
border: none;
}

img.pict {
float: left;
margin: 0 5px 5px 0;
}

.clear {
font-size: 1px;
clear: both;
}

ul { list-style-type: none; }

/** links **/
a {
color: #FF5A9B;
}

a:hover, a:active {
text-decoration: underline;
}

#header h1 a {
font-weight: bold;
}

#header h1 a:hover, #header h1 a:active {
text-decoration: none;
color: #FF5A9B;
}

.entry_area h2 a {
font-weight: bold;
color: #262626;
}

.entry_area h2 a:hover, .entry_area h2 a:active {
color: #FF5A9B;
}

.comment a, .trackback a {
font-weight: bold;
color: #FFF;
}

/** layout **/

#container {
background: url(http://img-cdn.jg.jugem.jp/18d/155451/20060131_17393.jpg) no-repeat right top;
width: 630px;
text-align: left;
margin: 0 auto;
}

#header {
padding: 50px 0 50px 0;
}

#main {
width: 400px;
float: left;
}

#sidemenu {
width: 200px;
float: right;
}

/** header **/
#header h1 {
font-size: 120%;
}

#header p {
font-size: 75%;
}

#header p#calendar {
font-size: 11px;
margin: 15px 0 0 0;
}

#content {
font-size: 75%;
}

/** entry **/

.previous {
width: 180px;
float: left;
}

.next {
text-align: right;
padding: 0 0 10px 0;
}

.entry_area {
background: #FFF url(http://img-cdn.jg.jugem.jp/18d/155451/20060131_17394.gif);
margin: 0 0 15px 0;
padding: 10px;
border: 1px solid #262626;
}

.entry_area h2 {
float: left;
width: 180px;
font-weight: bold;
}

.entry {
line-height: 170%;
clear: both;
}

.entry_date, .author {
float: right;
width: 180px;
text-align: right;
overflow: hidden;
font-size: 40px;
font-weight: bold;
color: #e0e0e0;
}

ul.state {
clear: both;
margin: 10px 0 0 0;
text-align: right;
}

ul.state li {
display: inline;
margin: 0 0 0 10px;
}

p.page_navi {
float: left;
}

p.page_top {
text-align: right;
}

#main p.page_top {
float: right;
}

/** comment **/
h3 {
font-weight: bold;
margin: 25px 0 5px 0;
}

.comment {
border: 1px solid #262626;
margin: 0 0 10px 0;
}

ul.comment_state {
padding: 2px;
border-bottom: 1px dashed #262626;
background: #A5BFBC;
}

ul.comment_state li {
display: inline;
margin: 0 10px 0 0;
}

.comment_content {
padding: 10px;
line-height: 170%;
background: #FFF url(http://img-cdn.jg.jugem.jp/18d/155451/20060131_17394.gif);
}

/** comment form **/
form#comment_area {
padding: 10px;
background: #E0ABA1;
}

dl#com_form label {
font-weight: bold;
}

dl#com_form dd {
padding: 0 10px 10px;
}

dl#com_form dd input.input {
border: 1px solid #FFF;
padding: 1px 0;
width:200px;
}

dl#com_form dd textarea {
border:1px solid #FFF;
width:300px;
margin: 0 0 10px 0;
}

.button {
font-weight: bold;
font-family: arial, helvetica, verdana, osaka, sans-serif;
}

/** trackback **/
span.trackback_url { background: #FFE66B; }

.trackback {
border: 1px solid #262626;
margin: 0 0 10px 0;
}

.trackback h4 {
background: #99CC55;
padding: 2px;
border-bottom: 1px dashed #262626;
}

.trackback dl{
padding: 10px;
background: #FFF url(http://img-cdn.jg.jugem.jp/18d/155451/20060131_17394.gif);
}

.trackback dt {
font-weight: bold;
float: left;
margin: 0 3px 0 0;
}

/** sidemenu **/
#sidemenu dl {
margin: 0 0 25px 0;
}

#sidemenu dt {
font-weight: bold;
border-bottom: 1px solid #262626;
margin: 0 0 10px 0;
}

#sidemenu dl.sidelist dt {
border: none;
margin: 0;
}

#sidemenu dl.sidelist dd {
margin: 0 0 0 10px;
}
.search {
border: 1px solid #262626;
}

/** footer **/
#footer {
clear: both;
font-size: 75%;
text-align: center;
border-top: 1px solid #262626;
padding: 2px 0 0 0;
}

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