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

ホーム

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

テンプレート名 : kaela_template ver.2

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">

<title>{site_title}</title>

</script>
<script type="text/javascript" src="./template/js/cookie.js"></script>
<script language="Javascript" type="text/javascript" src="http://kaela.jugem.jp/template/new_kaela/kaela.js"></script>
</head>
<body onload="javascript:initval();changeEntryClassName();">
<a name="top"></a>
{gmo_header_src}

<div id="wrapper">
	<div id="header">	
				
				<div class="sitetitle">
					<h1>{blog_name}</h1>
					{blog_description}
				</div>
				
	</div>

<div id="container">
	<div id="sidebar_left">
					
						<div class="linkblock">
							<div class="linktitle">RECENT ENTRIES</div>
							<div class="linktext">{latest_entry_list}</div>
						</div>

<div class="linkblock">
							<div class="linktitle">Sponsored Link</div>
							<div class="linktext">{ad}</div>
						</div>

<div class="linkblock">
							<div class="linktitle">RECOMMEND</div>
							<div class="linktext">{amazon_item}</div>
						</div>

<div class="linkblock">
							<div class="linktitle">RECENT COMMENTS</div>
							<div class="linktext">{recent_comment_list}</div>
						</div>

<div class="linkblock">
							<div class="linktitle">RECENT TRACKBACK</div>
							<div class="linktext">{recent_trackback_list}</div>
						</div>

<div class="linkblock">
							<div class="linktitle">CATEGORIES</div>
							<div class="linktext">{category_list}</div>
						</div>

<div class="linkblock">
							<div class="linktitle">ARCHIVES</div>
							<div class="linktext">{archives_list}</div>
						</div>

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

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

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

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

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

<div class="linkblock">
							<div class="linktitle">LINKS</div>
							<div class="linktext">{link_list}</div>
						</div>

<div class="linkblock">
							<div class="linktitle">MOBILE</div>
							<div class="linktext">{site_qrcode}</div>
						</div>

<div class="linkblock">
							<div class="linktitle">PROFILE</div>
							<div class="linktext">{user_list}</div>
						</div>

<div class="linkblock">
							<div class="linktitle">SEARCH</div>
							<div class="linktext">
							<form method="get" action="">
							<input id="search" name="search" />
							<input name="submit" type="submit" class="search_btn" value="search" />
							</form>
							</div>
						</div>

<div class="linkblock">
							<div class="linktitle">OTHERS</div>
							<div class="linktext">
								<ul id="feed">
									<li id="feed_rss"><a href="./admin/">ADMIN</a></li>
									<li id="feed_rss"><a href="{site_rss}">RSS1.0</a></li>
									<li id="feed_atom"><a href="{site_atom}">ATOM0.3</a></li>
								</ul>
							</div>
						</div>

<div class="linkblock">
							<div class="linktitle">Powered</div>
							<div class="linktext">{powered}</div>
						</div>
					
	</div>

<div id="star">&nbsp;</div>
	<div id="calender"><div id="calender_height">{calendar_vertical}</div><img src="./template/kaela_template02/img/calander_star.gif"></div>

<div id="main">
			
				<div class="entry_pink">
					<table width="478" border="0" cellpadding="0" cellspacing="0">
						<tr align="left" valign="top">
							<td height="130" colspan="3" class="top">
								<div class="entry_title">{entry_title}</div>
								<div class="entry_date">{entry_date}</div>
							</td>
						</tr>
						<tr>
							<td width="20" background="./template/kaela_template02/img/left.gif">&nbsp;</td>
							<td width="433" valign="top" class="body">
								<div class="entry_navi">{prev_entry} | <a href="./">main</a> | {next_entry}</div>
								<div class="entry_body">{entry_description}</div>
								<div class="entry_more">{entry_sequel}</div>
								<a name="sequel"></a>
							</td>
							<td width="25" background="./template/kaela_template02/img/right.gif">&nbsp;</td>
						</tr>
						<tr align="left" valign="top">
							<td height="87" colspan="3" class="bottom" align="right"><div class="entry_state">auther:{user_name}, {category_name}, {comment_num}, {trackback_num}, {pookmark_link} <a href="{pookmark_url}">pookmark</a></div></td>
							{trackback_auto_discovery}
						</tr>
					</table>
				</div>

<div class="entry_yellow">
				<a name="comments"></a>
					<table width=478 border="0" cellpadding="0" cellspacing="0">
						<tr align="left" valign="top">
							<td height="130" colspan="3" class="top"><div class="entry_title">Comment</td>
						</tr>
						<tr>
							<td width="20" background="./template/kaela_template02/img/left.gif">&nbsp;</td>
							<td width="433" valign="top" class="body">
								
								<div class="entry_body">{comment_description}</div>
								<div class="comment_state">{comment_name}, {comment_time}</div>
								
								<div class="comment_body">
									<form name="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}" class="form" /><br />
										<label for="email">email:</label><br>
										<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="form" /><br />
										<label for="url">url:</label><br>
										<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="form" /><br />
										<label for="description">comments:</label><br />
										<textarea tabindex="4" id="description" name="description" rows="7"></textarea><br /><br />

<input tabindex="5" type="submit" value="submit" onclick="javascript:setval();" class="btn" />
										<input type="checkbox" name="set_cookie" value="1" id="set_cookie">
										<label for="set_cookie">Cookieに登録</label>
									</form>
								</div>
							</td>
							<td width="25" background="./template/kaela_template02/img/right.gif">&nbsp;</td>
						</tr>
						<tr align="left" valign="top">
							<td height="87" colspan="3" align="right" class="bottom">&nbsp;</td>
						</tr>
					</table>
				</div>

<div class="entry_pink">
				<a name="trackback"></a>
					<table width=478 border="0" cellpadding="0" cellspacing="0">
						<tr align="left" valign="top">
							<td height="130" colspan="3" class="top"><div class="entry_title">Trackback URL</div></td>
						</tr>
						<tr>
							<td width="20" background="./template/kaela_template02/img/left.gif">&nbsp;</td>
							<td width="433" valign="top" class="body">
								<div class="entry_body"><input type="text" value="{trackback_url}" size="60" style="color:#000; border:1px solid #000; padding:2px;"/></div>
								<div class="tb_title">トラックバック</div>
								
								<div class="tbentry_title">{trackback_title}</div>
								<div class="tbentry_body">{trackback_excerpt}</div>
								<div class="tb_state">{trackback_blog_name}, {trackback_time}</div>
								
							</td>
							<td width="25" background="./template/kaela_template02/img/right.gif">&nbsp;</td>
						</tr>
						<tr align="left" valign="top">
							<td height="87" colspan="3" align="right" class="bottom">&nbsp;</td>
						</tr>
					</table>
				</div>

<div class="entry_pink">
				<table width=478 border="0" cellpadding="0" cellspacing="0">
					<tr align="left" valign="top">
						<td height="130" colspan="3" class="top"><div class="entry_title">プロフィール</div></td>
					</tr>
					<tr>
						<td width="20" background="./template/kaela_template02/img/left.gif">&nbsp;</td>
				<td width="433" valign="top" class="body">
				<div class="prof_title">{profile_name}</div>
				<div class="entry_body">{profile_description}</div>
						</td>
						<td width="25" background="./template/kaela_template02/img/right.gif">&nbsp;</td>
					</tr>
					<tr align="left" valign="top">
						<td height="87" colspan="3" align="right" class="bottom">　</td></tr>
				</table>
			</div>
			

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

			<address>{copyright}</address>
	</div>
<br class="clear" />
</div>

</div>

</body>
</html>

CSS

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

body {
	margin: 0px;
	font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";

}

#wrapper{
	width:100%;
	background: url(./template/kaela_template02/img/bg.gif);
}

#header{
	width:900px;
	height:250px;
	background: url(./template/kaela_template02/img/bg_title.jpg) no-repeat left top;
	margin: 0px;
}

#header .sitetitle{
	width:350px;
	padding:110px 0px 0px 270px;
	font-size:12px;
}

h1 {
	margin-bottom: 0px;
	padding: 0px;
	font-size:24px;
	font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	}

#sidebar_left{
	width:190px;
	background: url(./template/kaela_template02/img/bg_menu.gif) no-repeat left top #47DBC4;
	margin: 0px;
	padding:80px 0px 0px 0px;
	color: #000;
	float: left;
	}

#star{
	width:40px;
	height:300px;
	background: url(./template/kaela_template02/img/bg_star.gif) no-repeat;
	float: left;
	}

#calender{
	width:30px;
	background: url(./template/kaela_template02/img/bg_calender.gif) no-repeat #47DBC4;
	float: left;
	padding:70px 0px 0px 0px;
	text-align:center;
	color:#FFF;
	font-size:12px;
}

#calender_height{
	height:550px;
}

#calander .bg{
	background: url(./template/kaela_template02/img/calander_star.gif) no-repeat bottom;
}

#main{
	width:590px;
	background: url(./template/kaela_template02/img/bg_main.gif) no-repeat right top;
	float: left;
}

a,
a:link,
a:visited {color:#000; text-decoration:none; border-bottom:none; font-weight:bold;}
a:active, 
a:hover {color:#000; text-decoration:none; border-bottom:1px dotted; font-weight:bold;}

ul {
	list-style: disc;
	margin: 0px 15px 0px 15px;
	padding: 0px;
	color:#FFF;
}

input, textarea {
	border:1px #778899 solid;
	color: #666;
	background: #FFF;
}

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

.clear{
	clear:both;
}

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

.entry_pink {
	padding-bottom:0px;
	padding-left:10px;
	}

.entry_pink .top{
	background:url(./template/kaela_template02/img/top_pink.gif);

}

.entry_pink .body{
	background:url(./template/kaela_template02/img/bg_pink.gif);

}

.entry_pink .bottom{
	background:url(./template/kaela_template02/img/bottom_pink.gif);

}

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

.entry_yellow {
	padding-bottom:0px;
	padding-left:10px;
	}

.entry_yellow .top{
	background:url(./template/kaela_template02/img/top_yellow.gif);

}

.entry_yellow .body{
	background:url(./template/kaela_template02/img/bg_yellow.gif);

}

.entry_yellow .bottom{
	background:url(./template/kaela_template02/img/bottom_yellow.gif);

}

.entry_yellow .entry_title {
	font-size: 12px;
	font-weight:bold;
	color:#000;
	margin:80px 0px 10px 53px;
	}

.entry_yellow .entry_date {
	font-family: "Verdana";
	font-size: 10px;
	font-weight:bold;
	color:#000;
	text-align: right;
	margin:0px 45px 0px 0px;
	}

.entry_yellow .tb_top{
	background:url(./template/kaela_template02/img/tb_top.gif);

}

/* ENTRY 共通--------------------------------------------------------------------- */

.entry_navi{
	font-size:10px;
	text-align:center;
	padding:10px 0 15px 0;
	}

.entry_title {
	font-size: 12px;
	font-weight:bold;
	color:#FFF;
	margin:80px 10px 0px 53px;
	}

.entry_date {
	font-family: "Verdana";
	font-size: 10px;
	font-weight:bold;
	color:#FFF;
	text-align: right;
	margin:5px 45px 0px 0px;
	}

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

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

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

blockquote {
	font-size: 11px;
	margin: 10px;
	padding: 5px;
	border: 1px solid #000;
	}

.entry_state {
	font-size:10px;
	margin: 0px 12px; 
	margin-right: 45px; 
	}

/* COMMENT------------------------------------------------------------------- */
.comment_body {
	font-size:12px;
	line-height:170%;
	padding: 0 15px;
	margin:30px 15px 0px 0px; 
	}

.comment_state {
	font-size:10px;
	margin:15px; 
	text-align: right;
	}

.comment_body .form {
	margin:0px 15px;
}

.comment_body input.form {
	width:250px;
}

.comment_body textarea {
	width:350px;
	margin:0px 15px;
}

/* TACKBACK------------------------------------------------------------------- */

.tb_title {
	font-size: 12px;
	font-weight:bold;
	color:#FFF;
	margin-top:20px;

padding:20px 0px 5px 30px;
	background:url(./template/kaela_template02/img/bg_tb.gif) no-repeat;
	}

.tbentry_title {
	font-size: 12px;
	font-weight:bold;
	color:#FFF;
	margin:10px 15px 0px 15px;
	border-bottom:1px dotted #000;
	}

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

.tb_state {
	font-size:10px;
	margin: 0px 12px; 
	margin-right: 15px; 
	text-align:right;
	}

.prof_title {
	font-size: 12px;
	font-weight:bold;
	color:#000;
	margin:5px 0px 0px 15px;
	}

.prof{
	margin: 0px 40px 0px 60px;
	text-align:center;
	}

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

.linkblock {
}

.linktitle {
	width:180px;
	background-color:#990000;
	background:url(./template/kaela_template02/img/linktitle.gif) no-repeat;
	text-align:center;
	font-size:12px;
	font-weight: bold;
	font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	color: #FFF;
	padding:15px 0px 18px 0px;
}

.linktext {
	font-size:11px;
	color: #000;
	text-align:left;
	margin:0px 0px 25px 0px;
	padding-left: 10px;
	}

.linktext a,
.linktext a:link,
.linktext a:visited,
.linktext a:active {color:#FFF;font-weight:bold; text-decoration:none; border-bottom:none;}
.linktext a:hover {color:#FFF; font-weight:bold; text-decoration:none; border-bottom:dotted 1px #FFF;}

.pagetop{
text-align:right;
margin-right:200px;
}

.pagetop a,
.pagetop a:link,
.pagetop a:visited,
.pagetop a:active,
.pagetop a:hover {text-decoration:none;border-bottom:none;}

/* アマゾン---------------------------------------------------------------------- */

.a_text {
	font-size: 10px;
	margin: 0px 0px 20px 5px;
	padding: 0px 0px 0px 0px;
	text-align: center;
	}

.a_pict {
	font-size: 10px;
	padding: 0px;
	margin: 0px;
	text-align: center;
	border: 1px #000;
	}

.a_pict a,
.a_pict a:link,
.a_pict a:visited,
.a_pict a:active,
.a_pict a:hover {color:#000; text-decoration:none; border-bottom:none; font-weight:bold;}

.a_pict02 a,
.a_pict02 a:link,
.a_pict02 a:visited,
.a_pict02 a:active,
.a_pict02 a:hover {color:#CC0000; text-decoration:underline; border-bottom:none; font-weight:bold;}

/* FOOTER---------------------------------------------------------------------- */
.page {
	width:468px;
	font-family: "Verdana";
	font-size: 11px;
	color:#FF3399;
	padding-top:30px;
	padding-bottom:30px;
	text-align:center;
	}

.page a,
.page a:link,
.page a:visited,
.page a:active,
.page a:hover {color:#FF3399; text-decoration:none; border-bottom:none; font-weight:bold;}

address {
	width:468px;
	font-family: "Verdana";
	font-size: 11px;
	color:#FF3399;
	padding-top:30px;
	padding-bottom:30px;
	text-align:center;
	}

address a,
address a:link,
address a:visited,
address a:active,
address a:hover {color:#FF3399; text-decoration:none; border-bottom:none; font-weight:bold;}

.pagetop {
	font-size: 11px;
	margin: 0px 12px; 
	}

.botan {
	margin: 0px 10px 0px 110px;
	padding: 0px 50px 0px 50px;
	text-align: left;
	}

.botan a,
.botan a:link,
.botan a:visited,
.botan a:active,
.botan a:hover {text-decoration:none;border-bottom:none;}
}

/* CALENDAR---------------------------------------------------------------------- */
.calendar {
	font-family: "Verdana";
	font-size: 11px;
	color: #FFF;
	line-height: 180%;
	margin: 20px 0px 0px 0px;
	}

.today {
	border: 1px solid #FFFFFF;
	margin: 0px 0px 0px 0px;
	}

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