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

ホーム

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

テンプレート名 : 【DW】Heart-Blue

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>
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>{site_title}</title>
<meta name="robots" content="index,follow" />
<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}" />
<script type="text/javascript" src="./template/js/cookie.js"></script>
<script type="text/javascript">
');
document.writeln('</style>');
}

function showHide(id){
var disp = document.getElementById(id).style.display;

if(disp == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
return false;
}

function showHide2(id){
var disp = document.getElementById(id).style.display;

if(disp == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
return false;
}
var scrj = 1;
function softScrollBack() {
if(navigator.appName == "Microsoft Internet Explorer" && document.compatMode == "CSS1Compat") {
var scdist = document.body.parentNode.scrollTop;
} else {
var scdist = document.body.scrollTop;
}
if(scrj<50 && scdist) {
scdist = (scdist>2) ? Math.ceil(scdist*.2) : 1;
scrj++;
scrollBy(0,-scdist);
setTimeout("softScrollBack()",20);
} else {
scrollTo(0,0);
scrj = 1;
}
}
-->
</script>
<style type="text/css">

</style>
</head>

<table width="840" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="middle" id="header">
        <h1 class="site_title style1">{blog_name}</h1>
      <div class="description">{blog_description}</div>
      
    </td>
    <td width="354" valign="middle" id="header"><div align="right"><img src="http://img-cdn.jg.jugem.jp/690/662098/20080117_457780.jpg" width="354" height="200" border="0" usemap="#Map" /></div></td>
  </tr>
</table>
<map name="Map" id="Map">
  <area shape="rect" coords="180,164,338,194" href="http://design-warehouse.tip3s.net/" target="_blank" />
</map>

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="calendar_area">
<tr>
<td height="20" align="center" valign="middle">

<div class="calendar">{calendar_horizontal}</div>

</td>
</tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">

<td width="210" id="left">

<div class="menu"><a href="javascript:void(0);" onClick="showHide('entry0');" title="CLICK OPEN/CLOSE" />▼SELECTED ENTRIES</a></div>
<div class="menutext" class="sidehide" id="entry0" style="display: block;">
{selected_entry_list}
</div>

<div class="menu"><a href="javascript:void(0);" onClick="showHide('category0');" title="CLICK OPEN/CLOSE" />▼CATEGORIES</a></div>
<div class="menutext" class="sidehide" id="category0" style="display: block;">
{category_list}
</div>

<div class="menu"><a href="javascript:void(0);" onClick="showHide('archives0');" title="CLICK OPEN/CLOSE" />▼ARCHIVES</a></div>
<div class="menutext" class="sidehide" id="archives0" style="display: block;">
{archives_list}
</div>

<div class="menu"><a href="javascript:void(0);" onClick="showHide('comment0');" title="CLICK OPEN/CLOSE" />▼RECENT COMMENTS</a></div>
<div class="menutext" class="sidehide" id="comment0" style="display: block;">
{recent_comment_list}
</div>

<div class="menu"><a href="javascript:void(0);" onClick="showHide('trackback0');" title="CLICK OPEN/CLOSE" />▼RECENT TRACKBACKS</a></div>
<div class="menutext" class="sidehide" id="trackback0" style="display: block;">
{recent_trackback_list}
</div>

<div class="menu"><a href="javascript:void(0);" onClick="showHide('link0');" title="CLICK OPEN/CLOSE" />▼LINKS</a></div>
<div class="menutext" class="sidehide" id="link0" style="display: block;">
{link_list}
</div>

<div class="menu"><a href="javascript:void(0);" onClick="showHide('profile0');" title="CLICK OPEN/CLOSE" />▼PROFILE</a></div>
<div class="menutext" class="sidehide" id="profile0" style="display: block;">
{user_list}
</div>

<div class="menu"><a href="javascript:void(0);" onClick="showHide('search0');" title="CLICK OPEN/CLOSE" />▼SEARCH</a></div>
<div class="menutext" class="sidehide" id="search0" style="display: block;">
<form method="get" action="">
<input id="search" name="search" size="18" style="width:100px" class="form" /> <input type="submit" value="search" class="button" />
 </div>
</form>

<ul>
<table width="100%" border="0" cellspacing="3" cellpadding="5">
<tr> 
<td><ul>
<li><font size="1"><a href="./admin/">管理人ページ</a></font></li>
<li><font size="1"><a href="./?mode=rss">RSS1.0</a></font></li>
<li><font size="1"><a href="./?mode=atom">Atom0.3</a></font></li>
<li><font size="1"><a href="http://design-warehouse.tip3s.net/">designed by<br />無料web素材--Design-Warehouse--</a></font></li>
<li><font size="1"><a href="http://www.tip3s.com/">ホームページ制作 </a>Tip3's</font> </a></li>
<br><br>
</td>
</tr>
</table>
<br>
<br>
<br>
</ul>

</td>
<td width="1" valign="bottom" style="background:#cccccc; "><img src="./template/3sheet/img/sp.gif" width="1" height"1"></td>

<td id="center">

<div class="entry">
    
    <h2 class="entry_title" title="{entry_title}" />
    <span class="style1"><a href="{entry_permalink}">{entry_title}</a>
    </h2>
    </span>
    <div class="category_name">
    	[ {category_name} ]
    </div>
    <div class="entry_body">
    	{entry_description}
    </div>

<a name="sequel"></a>
    <div class="entry_more">
    	{entry_sequel}
    </div>
<div class="entry_state">{entry_date}&nbsp;{entry_time}&nbsp;|&nbsp;{comment_num}&nbsp;|&nbsp;{trackback_num}&nbsp;|&nbsp;<a href="javascript:scrollTo(0,0)" onclick="softScrollBack();return false;" title="このページの上へ▲" />▲</a></div>
</div>

<div class="entry_navi">{prev_entry} | <a href="./">main</a> | {next_entry} </div>

{trackback_auto_discovery}

<a name="comments"></a>
<div class="entry">

<div class="entry_date">&nbsp;&nbsp;Comment</div>

<div class="comment">
<div class="comment_state">
{comment_name} ({comment_time})
</div>

<div class="entry_body">
{comment_description}
</div>
</div>

<div class="entry_body">
<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
<input type="hidden" name="entry_id" value="{entry_id}" />
<label for="name">name:</label><br/>
<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" /><br />
<label for="email">email:</label><br>
<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" style="width:200px;" /><br />
<label for="url">url:</label><br>
<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" style="width:200px;" /><br />
<label for="description">comments:</label><br />
<textarea tabindex="4" id="description" name="description" rows="10" cols="50" style="width:350px;"></textarea><br />
<br />
<input tabindex="5" type="submit" value="コメント送信" onclick="javascript:setval();" />
<input type="checkbox" name="set_cookie" value="1" id="set_cookie">
<label for="set_cookie">Cookieに登録</label>
</form>
</div>

</div>

<a name="trackback"></a>
<div class="entry" style="border-bottom:block;">

<div class="entry_date">&nbsp;&nbsp;Trackback</div>

<div class="entry_title">{trackback_title}</div>
<div class="entry_body">{trackback_excerpt}</div>
<div class="entry_state">
 | {trackback_blog_name} | {trackback_time} | 
</div>

</div>

<div class="entry">

<div class="entry_title">{profile_name}</div>
<div class="entry_body">{profile_description}</div>

</div>

<div class="page">
{prev_page_link}&nbsp;|&nbsp;{page_now}&nbsp;/&nbsp;{page_num}&nbsp;PAGES&nbsp;|&nbsp;{next_page_link}
</div>

</td>

<td width="210" id="right">

<div class="menu"><a href="javascript:void(0);" onClick="showHide('amazon0');" title="CLICK OPEN/CLOSE" />▼RECOMMEND</a></div>
<div class="menutext" class="sidehide" id="amazon0" style="display: block;">
{amazon_item}
</div>

<div class="menu">▼OTHERS</div>
<div class="menutext" class="sidehide" id="powered0" style="display: block;">
<div align="center">

<div class="linktitle">{freespace_title1}</div>
<div class="linktext">{freespace_contents1}</div>

<div class="linktitle">{freespace_title2}</div>
<div class="linktext">{freespace_contents2}</div>

<div class="linktitle">{freespace_title3}</div>
<div class="linktext">{freespace_contents3}</div>

<div class="linktitle">{freespace_title4}</div>
<div class="linktext">{freespace_contents4}</div>

<div class="linktitle">{freespace_title5}</div>
<div class="linktext">{freespace_contents5}</div>

<div align="center">

{ad}

</td>
</tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="footer">
<tr>
<td width="190" align="center">&nbsp;</td>
<td align="center">
<div class="copyright">{copyright}</div>
</td>
<td width="190" align="center">
<div class="copyright"><span class="style1">PAGE TOP ▲</a></span></div>
</td>
</tr>
</table>

</div>
</body>
</html>

CSS

body {
	margin: 0px;
	padding: 0px;
	color: #333333;
	background-color: #ffffff;
	background-image: url(http://img-cdn.jg.jugem.jp/690/662098/20080117_457781.jpg);
	background-repeat: repeat-x;
	}

table {
	table-layout: fixed;
}

/* リンク色 ------------------------- */

a {
	text-decoration: none;
}
a:link {
	color: #999999;
	background: transparent; 
}
a:visited {
	color: #999999;
	background: transparent; 
}
a:hover {
	color: #33cccc;
	background: transparent; 
}
a:active {
	color: #33cccc;
}

/* container ------------------------- */

#container {
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0px;
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	width: 840px;
}

/* header ------------------------- */

#header {
	background-color: #ffffff;
	background-image: url(http://img-cdn.jg.jugem.jp/690/662098/20080117_457779.jpg);
	height: 200px;
	
	}

h1 {
	margin: 0px;
	padding: 0px;
	}

.site_title {
	color: #996600;
	font-family: "Verdana";
	font-size: 18px;
	font-weight: bolder;
	margin:8px 20px 8px 15px;
	}

.site_title a,
.site_title a:link,
.site_title a:visited,
.site_title a:active {color:#996600;text-decoration:none;}
.site_title a:hover {color:#33cccc;text-decoration:none;}

.description {
	color:#666666;
	font-family: "Verdana";
	font-size: 12px;
	letter-spacing:1px;
	margin-top: 5px;
	margin-right: 80px;
	margin-bottom: 10px;
	margin-left: 15px;
	}

/* Navigation ------------------------- */

#navigation {
	font-family: "Verdana";
	font-size:10px;
	margin: 0px;
	padding: 0px;
	}

.menu a,
.menu a:link,
.menu a:visited,
.menu a:active {
	color:#996600;
	text-decoration:none;
	}

.menu a:hover {
	color:#33cccc;
	}

.menu {
	font-family: "Verdana";
	font-size:10px;
	font-weight: bolder;
	margin: 0px;
	padding: 6px 0px 6px 10px;
	border-left: 0px solid;
	background-color: #ffffff;
	background-image: url(http://img-cdn.jg.jugem.jp/690/662098/20071105_425927.gif);
	letter-spacing:1px;
	}

.menutext {
	font-size:10px;
	line-height:150%;
	color: #888888;
	padding: 8px 10px 15px 10px;
	}

/* コンテンツ ------------------------- */

#left {
	font-family: "Verdana", "ヒラギノ丸ゴ Pro W4", "ＭＳ ゴシック", "Osaka‐等幅";
	color: #996600;
	background: #ffffff;
	border-top: 1px #cccccc solid;
	}

#center {
	font-family: "Verdana", "ヒラギノ丸ゴ Pro W4", "ＭＳ ゴシック", "Osaka‐等幅";
	background: #ffffff;
	border-top: 1px #cccccc solid;
	}

#right {
	font-family: "Verdana", "ヒラギノ丸ゴ Pro W4", "ＭＳ ゴシック", "Osaka‐等幅";
	color: #999999;
	background: #ffffff;
	border-top: 1px #cccccc solid;
	}

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

input, textarea {
	border:1px #999999 solid;
	color: #333333;
	background: #ffffff;
	}

.pict {
	padding: 1px;
	border: 0px solid;
	}

/* ENTRY--------------- */

.entry {
	margin: 0px;
	padding-bottom:10px;
	border-bottom: 1px #cccccc solid;
	}

.entry_navi{
	font-size:10px;
	text-align:center;
	padding:10px 0 10px 0;
	background-color: #ffffff;
	border-bottom: 1px #cccccc solid;
	}

.entry_date {
	font-family: "Verdana";
	font-size: 12px; 
	font-weight:bolder;
	color: #996600;
	margin: 12px 0px 6px 0px;
	}

.entry_date a,
.entry_date a:link,
.entry_date a:visited,
.entry_date a:active,
.entry_date a:hover {color:#33cccc;}

.entry_title {
	font-size: 10px;
	font-weight:bolder;
	color: #996600;
	margin: 0px 0px 10px 0px ;
	padding: 6px 3px 6px 10px;
	border-left: 0px #336699 solid;
	background-color: #eeeeee;
	background-image: url(http://img-cdn.jg.jugem.jp/690/662098/20071105_425927.gif);
	letter-spacing:1px;
	}

.entry_title a,
.entry_title a:link,
.entry_title a:visited,
.entry_title a:active {
	color:#996600;
	text-decoration:none;
	}

.entry_title a:hover {
	color:#33cccc;
	}

.category_name {
	font-size:10px;
	text-align: right;
	margin: 0px;
	padding: 1px 15px 6px 15px;
	}

.entry_body {
	font-size:12px;
	line-height:170%;
	padding: 0 15px;
	margin-bottom: 15px; 
	}

.entry_more {
	font-size:12px;
	line-height:170%;
	padding: 0 15px;
	margin-bottom: 30px; 
	}

blockquote {
	font-size: 10px;
	background: #eeeeee;
	margin: 10px;
	padding: 5px;
	border: 1px solid #cccccc;
	}

.entry_state {
	font-family: Verdana;
	font-size:9px;
	line-height:130%;
	color: #996600;
	margin: 0px 15px 5px 5px;
	text-align: right;
	}

.comment {
	font-size: 12px;
	margin:10px 0;
	}

.comment_state {
	font-size: 12px;
	color: #996600;
	padding-left: 6px;
	border-left: 0px #336699 solid;
	}

.page {
	font-family: Verdana;
	font-size: 9px;
	color: #996600;
	letter-spacing:1px;
	text-align: center;
	margin: 12px 0 12px 0;

}

/* SIDE--------------- */

.linktitle {
	font-family: "Verdana";
	font-size:10px;
	font-weight: bolder;
	margin: 0px;
	padding: 6px 0px 6px 10px;
	border-left: 0px solid;
	background-color: #ffffff;
	letter-spacing:1px;
	}

.linktext {
	font-size:10px;
	line-height:150%;
	color: #999999;
	padding: 8px 10px 15px 10px;
	border-bottom: 1px #cccccc solid;
	}

.search {
	font-size:12px;
}

.form {
	font-size:12px;
	border:1px solid #999999;
	width: 120px;
}

.button  {
	font-family: "Verdana";
	font-size:10px;
	color: #333333;
	padding: 0px 2px 0px 2px;
}

/* CALENDAR------------ */

#calendar_area {
	padding: 5px 0px 5px 0px;
	background-color: #ffffff;
	}

.calendar {
	font-family: "Verdana";	
	font-size: 10px;
	color: #996600;
	letter-spacing:1px;
	}

/* FOOTER_MENU------------- */

#footer_menu {
	border-top: 1px solid #cccccc;
	margin: 0px;
	padding: 10px 0px 2px 0px;
	background-color: #ffffff;
	}

/* FOOTER------------- */

#footer {
	margin: 0px;
	padding: 8px 0px 10px 0px;
	background-color: #dddddd;
	background-image: url(http://img-cdn.jg.jugem.jp/690/662098/20071105_425927.gif);
	}

.copyright {
	font-family: "Verdana";
	font-size: 9px;
	color: #996600;
	letter-spacing:1px;
	}

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