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

ホーム

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

テンプレート名 : 水色×白

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-Type" content="text/html; charset={site_encoding}" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<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}" />
<script type="text/javascript" src="./template/js/cookie.js"></script>
</style>

</style>
</head>
<body bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" id="layout">
<tbody>
<tr>
<td colspan="2" id="title">
<div class="site_title">
<h1>{blog_name}</h1>
</div>
<div class="title_link">
<div class="site_discription">{blog_description}</div>
</div>

<div id="calender"><a href="?month={calendar_prev_yearmonth}">&lt;&lt;</a> <font color="#50b4e5">{calendar_this_year} {calendar_this_month}</font> <a href="?month={calendar_next_yearmonth}">&gt;&gt;</a> {calendar_horizontal_only}</div>
</td>
</tr>
<tr>
<td valign="top" class="main_entry" align="center">
<div class="entry_body">
<div class="entry_title">{entry_title}</div>
<div class="entry_date">{entry_date}</div>
<div class="entry_discription">{entry_description}</div>
<div class="entry_more">{entry_sequel}</div>
<div class="entry_trackbak">{trackback_auto_discovery}</div>
<div class="entry_author">{entry_time}<br>
{category_name} | {comment_num} | {trackback_num}</div>
</div>
<a name="comments"></a>
<div class="entry_body">
<div class="comment_title">comment</div>

<div class="comment_discription">{comment_description}</div>
<div class="comment_author">{comment_name}<br>
{comment_time}</div>

<div class="comment_form">
<form action="?mode=comment" method="post" style="line-height : 180%;letter-spacing : 1px;"><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}" style="width:200px;"><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:300px;"></textarea><br>
<br>
<br>
<input type="submit" value="コメントする"> <input type="checkbox" name="set_cookie" style="border: 0px;" value="1" id="set_cookie"> <label for="set_cookie">Cookie</label></form>
</div>
</div>
<a name="trackback"></a>
<table cellpadding="0" cellspacing="0" border="0" class="trackback_area">
<tbody>
<tr>
<td>
<div>
<div class="trackback_title">trackback</div>
<div class="trackback_box">
<div class="trackback_excerpt">{trackback_excerpt}</div>
<div class="entry_author">{trackback_title} | {trackback_blog_name} | {trackback_time}</div>
</div>
<div class="trackback_url">{trackback_url}</div>
</div>
</td>
</tr>
</tbody>
</table>

<div>
<table class="entry_body" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="entry_title" align="left">profile</td>
</tr>
<tr>
<td class="entry_discription" align="left">
<div class="entry_discription" align="left">{profile_description}</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td valign="top" id="right">
<div class="side_box">
<div class="side_title">recommend</div>

<div class="side_links">{amazon_item}</div>
</div>

<div class="side_box">
<div class="side_title">new entries</div>
<div class="side_links">{latest_entry_list}</div>
</div>

<div class="side_box">
<div class="side_title">recent comments</div>
<div class="side_links">{recent_comment_list}</div>
</div>

<div class="side_box">
<div class="side_title">archives</div>
<div class="side_links">{archives_list}</div>
</div>

<div class="side_box">
<div class="side_title">recent trackbaks</div>
<div class="side_links">{recent_trackback_list}</div>
</div>

<div class="side_box">
<div class="side_title">links</div>
<div class="side_links">{link_list}</div>
</div>

<div class="side_box">
<div class="side_title">categories</div>
<div class="side_links">{category_list}</div>
</div>

<div class="side_box">
<div class="side_title">profile</div>
<div class="side_links">{user_list}</div>
</div>

<div class="side_box">
<div class="side_title">others</div>
<div class="side_links">
<ul>
<li><a href="?mode=rss">RSS1.0</a>
<li><a href="?mode=atom">Atom0.3</a>
<li><a href="https://jugem.jp/" title="ブログのレンタルならJUGEM（じゅげむ）">Powered by JUGEM</a>
</ul>
<br>
{powerd}</div>
</div>
<div class="side_links">
<form method="get" action=""><input id="search" name="search" size="20" style="width:160px" class="form"><br>
<input type="submit" value="Search" class="button"></form>
</div>
{ad}
</td>
</tr>
<tr>
<td colspan="2" id="copyright">
<div class="footer">Copyright (C) 2004 <a class="side_text" href="http://paperboy.co.jp" target="_blank" title="インターネットのトータルソリューション企業paperboy&amp;co.">paperboy&amp;co.</a> All Rights Reserved.</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

CSS

BODY{
background-color : #ffffff;
background-attachment:fixed;
height : 100%;
top : 0px;
text-align : center;
padding : 0px;
margin : 0px;
}
DIV {
margin: 0px;
padding: 0px;
font-family : "Courier New","ヒラギノ角ゴ Pro W3",Osaka‐等幅,"ＭＳ ゴシック","ＭＳ Ｐゴシック";
color : #50b4e5;
}
BLOCKQUOTE{
padding : 5pt;
border-width : 1px 1px 1px 10px;
border-style : dashed dashed dashed solid;
border-color : #50b4e5;
font-size : 10px;
line-height : 150%;
letter-spacing : 1px;
}
IMG{
margin: 10px;
border: none;
}
INPUT{
border-width : 1px;
border-style : solid;
border-color : #50b4e5;
background-color : #ffffff;
color : #50b4e5;
}
FORM{
background-color : #ffffff;
text-align : left;
}
H1{
font-weight : bold;
letter-spacing : 3px;
}
LI{
list-style-type:square;
margin-left:-15px;
}

#layout{
padding : 0px;
width : 600px;
left : 50%;
border-right-width : 1px;
border-left-width : 1px;
border-right-style : solid;
border-left-style : solid;
border-right-color : #50b4e5;
border-left-color : #50b4e5;
}
#left{
width : 170px;
text-align : center;
background-color : #50b4e5;
padding : 5px;
margin-right : 5px;
}
#right{
background-color : #fff;
text-align : center;
padding : 0px 10px 0px;
padding-left : 0px;
width : 145px;
}
#title{
background-repeat : no-repeat;
background-attachment : fixed;
padding : 0px;
margin : 0px;
text-align : left;
background-color : #fff;
height : 150px;
top : 0px;
}
.site_title{
color : #50b4e5;
text-align : left;
margin-top : 20px;
padding-left : 5px;
margin-left : 5px;
font-family : "Courier New",monospace;
}
.site_title A {
color: #50b4e5;
text-decoration: none;
}
.site_title A:LINK {
color: #50b4e5;
text-decoration: none;
}
.site_title a:visited {
color: #50b4e5;
text-decoration: none;
background:transparent;
}
.site_title a:active {
color: #50b4e5;
text-decoration: none;
background:transparent;
}
.site_title a:hover {
color: #50b4e5;
text-decoration: none;
background:transparent;
}
.site_discription{
font-size : 10px;
color : #50b4e5;
text-align : left;
padding-left : 5px;
margin-left : 5px;
padding-bottom : 10px;
margin-bottom : 20px;
letter-spacing : 2px;
}

#calender{
color : #fff;
font-size : 10px;
font-family : "MS UI Gothic",Arial,sans-serif;
text-align : center;
margin-bottom : 10px;
border-top-width : 1px;
border-bottom-width : 1px;
border-top-style : solid;
border-bottom-style : solid;
width : 100%;
letter-spacing : 1px;
border-top-color : #50b4e5;
border-bottom-color : #50b4e5;
background-color : #fff;
}
#calender A {
text-decoration: none;
color : #50b4e5;
}
#calender A:LINK {
color : #50b4e5;
text-decoration: none;
}
#calender A:VISITED {
color : #50b4e5;
text-decoration: none;
}
#calender A:ACTIVE {
color : #50b4e5;
text-decoration: none;
}
#calender A:HOVER {
background-color : #006699;
text-decoration: underline;
color : #35657b;
}

.comment{
padding : 4px;
margin : 10px 5px 5px 5px;
border-top-width : 1px;
border-top-style : solid;
border-top-color : #50b4e5;
width : 360px;
border-left-width : 1px;
border-right-width : 1px;
border-bottom-width : 1px;
border-left-style : solid;
border-right-style : solid;
border-bottom-style : solid;
border-left-color : #50b4e5;
border-right-color : #50b4e5;
border-bottom-color : #50b4e5;
}
.comment_box{
text-align : left;
padding : 5px;
margin : 5px;
width : 360px;
}
.comment_title{
font-size : 12px;
text-align : left;
padding-top : 3px;
padding-left : 5px;
padding-right : 3px;
padding-bottom : 3px;
margin-left : 5px;
margin-top : 3px;
margin-bottom : 0px;
font-family : "Courier New",monospace;
letter-spacing : 2px;
}
.comment_discription{
font-size : 11px;
text-align : left;
margin-right : 5px;
margin-bottom : 5px;
margin-left : 5px;
line-height: 150%;
padding-top : 20px;
border-top-width : 1px;
border-top-style : dashed;
border-top-color : #50b4e5;
margin-top : 0px;
letter-spacing : 2px;
}
.comment_author{
font-size : 10px;
text-align : right;
margin-top : 5px 5px 5px 10px;
padding : 5px;
margin-bottom : 10px;
letter-spacing : 1px;
}
.comment A:LINK {
color : #50b4e5;
text-decoration: none;
}
.comment A:VISITED {
color : #50b4e5;
text-decoration: none;
}
.comment A:ACTIVE {
color : #50b4e5;
text-decoration: none;
}
.comment A:HOVER {
text-decoration: underline;
width : 400px;
color : #35657b;
}
.comment_form{
font-size : 12px;
padding : 5px;
text-align : left;
}

.trackback_area{
text-align : left;
padding : 5px;
margin : 5px 5px 5px;
margin-left : 5px;
width : 400px;
}
.trackback_box{
border-width : 1px;
border-style : dashed;
border-color : #50b4e5;
padding : 5px;
}
.trackback_title{
padding : 5px;
margin-left : 5px;
margin-right : 5px;
font-size : 11px;
font-weight : bold;
margin-top : 5px;
letter-spacing : 2px;
}
.trackback_excerpt{
font-size : 11px;
padding : 5px;
line-height : 150%;
letter-spacing : 1px;
}
.trackback_url{
background-color : #50b4e5;
padding-left : 5px;
font-size : 12px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 3px;
color : #fff;
padding-top : 2px;
padding-right : 2px;
padding-bottom : 2px;
margin-top : 10px;
}
.trackback{
font-size : 12px;
text-align : left;
margin : 5px;
padding : 5px;
}

.side_box{
text-align : left;
width : 170px;
margin : 10px 5px 5px;
border-width : 1px;
border-style : solid;
border-color : #50b4e5;
}
.side_links {
padding : 5px;
font-size : 10px;
font-weight : normal;
}
.side_links A:LINK {
color : #50b4e5;
text-decoration: dashed;
}
.side_links A:VISITED {
color : #50b4e5;
text-decoration: none;
}
.side_links A:ACTIVE {
color : #50b4e5;
text-decoration: none;
}
.side_links A:HOVER {
color : #35657b;
text-decoration: underline;
text-align : left;
}
.side_title{
font-size : 11px;
text-align : left;
padding-left : 5px;
font-family : "Courier New",monospace;
padding-top : 5px;
letter-spacing : 2px;
}
.amazon{
text-align : left;
padding-top : 5px;
margin-top : 5px;
line-height : 150%;
margin-top : 10px;
font-size : 11px;
}
.amazon A:LINK {
color : #50b4e5;
text-decoration: none;
font-weight : bold;
}
.amazon A:VISITED {
color : #50b4e5;
text-decoration: none;
font-weight : bold;
}
.amazon A:ACTIVE {
color : #50b4e5;
text-decoration: none;
font-weight : bold;
}
.amazon A:HOVER {
color : #50b4e5;
text-decoration : underline;
}

#copyright{
background-color : #fff;
text-align : center;
padding : 5px;
color : #50b4e5;
border-top-width : 1px;
border-top-style : solid;
border-top-color : #50b4e5;
}
.footer{
font-size : 10px;
text-align : center;
padding-bottom : 5px;
}
.footer A:LINK {
color : #50b4e5;
text-decoration : underline;
}
.footer A:VISITED {
color : #50b4e5;
text-decoration : underline;
}
.footer A:ACTIVE {
color : #50b4e5;
text-decoration : underline;
}
.footer A:HOVER {
color : #006699;
text-decoration : none;
}
.main_entry{
padding-left : 10px;
}

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