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

ホーム

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

テンプレート名 : test

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-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>{site_title}</title>
<link rel="stylesheet" href="{site_css}" type="text/css" />
<link type="text/css" href="{gmo_header_css}" rel="stylesheet" media="screen,print" />
<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>
<script language="javascript">

</script>
</head>
<body onload="javascript:initval(); if (document.images){preload()};">
<a name="top"></a>
<div id="wrapper_body">

<div id="header">

<div class="title">
<h1>{blog_name}</h1>
<p class="description">{blog_description}</p>
</div>

<div id="content1" class="header_layer">
<div class="close">
<a href="javascript:;" onClick="view(Array(11))"><img src="http://img-cdn.jg.jugem.jp/6ab/536697/20070612_5457.gif" alt="close" width="15" height="15" border="0" /></a>
</div>

<div class="header_content">
<div class="header_content_list">
<div class="header_td_title">ENTRIES</div>
{latest_entry_list}
</div>
</div>

</div>
<div id="content2" class="layer_title">
ENTRIES
</div>

<div id="content3" class="header_layer">
<div class="close">
<a href="javascript:;" onClick="view(Array(11))"><img src="http://img-cdn.jg.jugem.jp/6ab/536697/20070612_5457.gif" alt="close" width="15" height="15" border="0" /></a>
</div>
<div class="header_content">
<table border="0" cellpadding="0" cellspacing="0" width="540">
<tr>
<td width="270" class="header_td">
<div class="header_td_title">COMMENTS</div>

{recent_comment_list}

</td><td width="270" class="header_td">
<div class="header_td_title">TRACKBACKS</div>

{recent_trackback_list}

</td>
</tr>
</table>
</div>
</div>
<div id="content4" class="layer_title">
COMMENTS
</div>
<div id="content5" class="layer_title">
TRACKBACKS
</div>

<div id="content6" class="header_layer">
<div class="close">
<a href="javascript:;" onClick="view(Array(11))"><img src="http://img-cdn.jg.jugem.jp/6ab/536697/20070612_5457.gif" alt="close" width="15" height="15" border="0" /></a>
</div>
<div class="header_content">
<table border="0" cellpadding="0" cellspacing="0" width="540">
<tr>
<td width="140" rowspan="2" class="header_td">

<div class="header_td_title">ARCHIVES</div>
{archives_list}

</td>
<td width="200" height="80" class="header_td">

<div class="header_td_title">PROFILE</div>
{user_list}

</td>
<td width="200" rowspan="2" class="header_td">

<div class="header_td_title">MOBILE</div>
{site_qrcode}

</td>
</tr>
<tr>
<td width="200" class="header_td">

<div class="header_td_title">SEARCH</div>
<form method="get" action="">
<input id="search" name="search" size="20" style="margin-right:10px;width:130px;"><input type="submit" value="" class="search_button" />
</form>

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

<div id="content7" class="layer_title">
ARCHIVES
</div>
<div id="content8" class="layer_title">
PROFILE
</div>
<div id="content9" class="layer_title">
SEARCH
</div>
<div id="content10" class="layer_title">
MOBILE
</div>

<div id="content11" class="layer_title">
</div>

<div class="header_list">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td class="header_menu"><a href="javascript:;" onClick="view(Array(1,2))">ENTRIES</a></td>
<td class="header_menu"><a href="javascript:;" onClick="view(Array(3,4))">COMMENTS</a></td>
<td class="header_menu"><a href="javascript:;" onClick="view(Array(3,5))">TRACKBACKS</a></td>
<td class="header_menu"><a href="javascript:;" onClick="view(Array(6,7))">ARCHIVES</a></td>
<td class="header_menu"><a href="javascript:;" onClick="view(Array(6,8))">PROFILE</a></td>
<td class="header_menu"><a href="javascript:;" onClick="view(Array(6,9))">SEARCH</a></td>
<td class="header_menu"><a href="javascript:;" onClick="view(Array(6,10))">MOBILE</a></td>
</tr>
</table>
</div>

</div>


<div id="wrapper_content">
<div class="wrapper_margin">

<div id="main">

<div id="entry">
<div class="entry_top"><img src="http://img-cdn.jg.jugem.jp/6ab/536697/20070615_12429.gif" width="1" height="1" alt="dummy" /></div>
<div class="entry_content">
<div class="entry_title">{entry_title}</div>
<div class="entry_date">{entry_date} | posted by {user_name}</div>
<div class="entry_body">
{entry_description}
</div>
<br />
<div class="entry_body">
<a name="sequel"></a><div class="entry_more">{entry_sequel}</div>
</div>
<div class="entry_state">
<a href="#top" title="TOP">&#916;</a> | {category_name} | {entry_time} | {comment_num} | {trackback_num} |
</div>
</div>
</div>
<div class="entry_bottom"><img src="http://img-cdn.jg.jugem.jp/6ab/536697/20070615_12429.gif" width="1" height="1" alt="dummy" /></div>
{trackback_auto_discovery}


<div class="entry_navi"><a href="{next_permalink}">&laquo; next</a> &hellip; <a href="{prev_permalink}">prev &raquo;</a></div>

<div id="trackback">
<a name="comments"></a>
<div class="tb_main_title">Comment</div>

<div class="tb">
<div class="tb_body">{comment_description}</div>
<div class="tb_state">posted by {comment_name} [ {comment_time} ]</div>
</div>

<div class="formarea">
<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
<table border="0" cellspacing="0" cellpading="0">
<tr valign="top">
<td width="170" class="tb_td">
<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:150px;" /><br />
<label for="email">email</label><br>
<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" style="width:150px;" /><br />
<label for="url">url</label><br>
<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" style="width:150px;" /><br />
<br />
<a href="#top" title="TOP">&#916; TOP</a>
</td>
<td class="tb_td">
<label for="description">comments</label><br />
<textarea tabindex="4" id="description" name="description" rows="7" cols="30" style="width:250px;"></textarea><br /><br />
<input tabindex="5" type="submit" value="Submit" onclick="javascript:setval();" class="button" />
<input type="checkbox" name="set_cookie" value="1" id="set_cookie" style="border:none;">
<label for="set_cookie">cookie</label>
</td>
</tr>
</table>
</form>
</div>
</div>


<div id="trackback">
<a name="trackback"></a>
<div class="tb_main_title">Trackback</div>

<div class="tb">
<div class="tb_title">{trackback_title}</div>
<div class="tb_body">{trackback_excerpt}</div>
<div class="tb_state">{trackback_blog_name} | at: {trackback_time}</div>
</div>

<div class="formarea">
<table width="380" border="0" cellspacing="0" cellpading="0">
<tr valign="top">
<td class="tb_td">
<label for="url">url</label><br/>
<input type="text" value="{trackback_url}" name="url" style="width:380px;" />
</td>
</tr>
</table>
</div>
</div>


<div id="trackback">
<div class="tb_main_title">Profile</div>
<div class="tb_title" style="margin-top:10px;">{profile_name}</div>
<div class="tb_body">{profile_description}</div>
</div>


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

</div>


<div id="side">

<div class="side_title">CALENDAR</div>
<div class="side_content">
<div class="calendar">
{calendar}
</div>
</div>

<div class="side_title">CATEGORIES</div>
<div class="side_content">
{category_list}
</div>

<div class="side_title">{freespace_title1}</div>
<div class="side_content">
{freespace_contents1}
</div>

<div class="side_title">{freespace_title2}</div>
<div class="side_content">
{freespace_contents2}
</div>

<div class="side_title">{freespace_title3}</div>
<div class="side_content">
{freespace_contents3}
</div>

<div class="side_title">{freespace_title4}</div>
<div class="side_content">
{freespace_contents4}
</div>

<div class="side_title">{freespace_title5}</div>
<div class="side_content">
{freespace_contents5}
</div>

<div class="side_title">LINKS</div>
<div class="side_content">
{link_list}
</div>

<div class="side_title">RECOMMEND</div>

<div class="side_content">
<div class="amazon">{amazon_item}</div>
</div>

<div class="side_content">
<div class="ad">
{ad}
</div>
</div>

<div class="side_content">
<div class="admin">
<a href="./admin/">ADMIN</a> *
<a href="{site_rss}">RSS1.0</a> *
<a href="{site_atom}">Atom0.3</a>
</div>
</div>

</div>

<br class="clear" />
<div class="copyright">{copyright} Template by <a href="http://vasque.jugem.jp/">Vasque</a></div>
</div>
</div>

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

CSS

* {
  margin: 0px;
  padding: 0px;
  text-align: left;
}
body {
  background: url("http://img-cdn.jg.jugem.jp/6ab/536697/20070613_7280.gif") #777777 repeat-x scroll 0px 0px;
  font-size: 13px;
  color: #667799;
  word-align: keep-all;
  letter-spacing: normal;
  line-height: 150%;
  font-family: "ＭＳ Ｐゴシック","ＭＳ ゴシック",Osaka,arial,sans-serif;
  font-style: normal, oblique;
}
tr,th,td {
  font-size : 13px;
  color: #667799;
  word-align: keep-all;
  letter-spacing: normal;
  line-height: 150%;
  font-family: "ＭＳ Ｐゴシック","ＭＳ ゴシック",Osaka,arial,sans-serif;
  font-style: normal, oblique;
}
a {
  color: #3344bb;
  text-decoration: none;
}
a:hover {
  color: #3388bb;
}
ul,li {
  list-style: none;
}
li {
  margin-bottom: 3px;
}
textarea,input,select {
  font-size:13px;
  color: #4433aa;
  background-color: #00051b;
  border: solid 1px #332288;
  padding: 2px;
  scrollbar-base-color: #00051b;
  scrollbar-track-color: #00051b;
  scrollbar-face-color: #00051b;
  scrollbar-shadow-color: #332288;
  scrollbar-darkshadow-color: #00051b;
  scrollbar-highlight-color: #00051b;
  scrollbar-3dlight-color: #00051b;
  scrollbar-arrow-color: #3322dd;
}
.search_button {
  width: 18px;
  height: 18px;
  border: none;
  background-image: url("http://img-cdn.jg.jugem.jp/6ab/536697/20070612_6554.gif");
}
.button {
  text-align: center;
}
#wrapper_body {
  width: 750px;
  background: url("http://img-cdn.jg.jugem.jp/6ab/536697/20070612_5420.jpg") #073992 no-repeat scroll 0px 0px;
  margin-top: 5px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
#header {
  width: 750px;
  height: 385px;
  overflow: hide;
  position:relative;
}
#wrapper_content {
  width: 750px;
}
.wrapper_margin {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 15px;
}
#side {
  float: left;
  width: 200px;
  background: url("http://img-cdn.jg.jugem.jp/6ab/536697/20070612_5425.gif") #02175C no-repeat scroll 0px 0px;
}
.side_bottom {
  height: 10px;
  padding-bottom: 20px;
  background: url("http://img-cdn.jg.jugem.jp/6ab/536697/20070612_5427.gif") #073992 no-repeat scroll 0px 0px;
}
#main {
  float: right;
  width: 490px;
}
h1 {
  font-family: Times, "ＭＳ 明朝", 平成明朝, serif;
  font-size: 20px;
  line-height: 30px;
}
.title {
  z-index: 1;
  position: absolute;
  top: 30px;
  left: 20px;
  filter: alpha(opacity=80);
  opacity: 0.8;
}
.title a {
  color: #3355ee;
}
.title a:hover {
  color: #3355ee;
}
.description {
  color: #3344dd;
  font-size: 11px;
}
.header_layer {
  display:none;
  z-index: 2;
  position: absolute;
  width:600px;
  height: 300px;
  left: 20px;
  top: 55px;
  filter: alpha(opacity=80);
  opacity: 0.8;
  background: url("http://img-cdn.jg.jugem.jp/6ab/536697/20070613_7191.gif") #00051b no-repeat scroll 0px 0px;
}
.layer_title {
  display:none;
  z-index: 3;
  position: absolute;
  width: 280px;
  height: 300px;
  top: 40px;
  left: 470px;
  font-size: 35px;
  font-family: Times, "ＭＳ 明朝", 平成明朝, serif;
  line-height: 40px;
  filter: alpha(opacity=50);
  opacity: 0.5;
  color: #3388dd;
  text-align: center;
}
.header_list {
  z-index: 3;
  position: absolute;
  width: 630px;
  height: 40px;
  top: 360px;
  left: 60px;
  overflow: hidden;
}
.header_menu {
  padding-left: 15px;
  padding-right: 15px;
  font-family: Times, "ＭＳ 明朝", 平成明朝, serif;
}
.header_menu a {
  color: #5566aa;
}
.header_menu a:hover {
  color: #5566aa;
}
.clear {
  clear: both;
}
.close {
  margin-top: 5px;
  margin-left: 5px;
}
.header_content {
  color: #556688;
  margin: 5px 20px 5px 20px;
  height: 265px;
  overflow: auto;
  overflow-x: hide;
  scrollbar-base-color: #00051b;
  scrollbar-track-color: #00051b;
  scrollbar-face-color: #110088;
  scrollbar-shadow-color: #110088;
  scrollbar-darkshadow-color: #110088;
  scrollbar-highlight-color: #110088;
  scrollbar-3dlight-color: #1100bb;
  scrollbar-arrow-color: #3322dd;
}
.header_content a:hover {
  color: #3344bb;
  border-bottom: 1px dotted #221166;
}
.header_content_list {
  width: 540px;
  overflow: hidden;
}
.header_td {
  color: #556688;
  vertical-align: top;
}
.header_td a:hover {
  color: #3344bb;
  border-bottom: 1px solid #221166;
}
.header_td_title {
  color: #332288;
  border-bottom: 1px solid #332277;
  margin-right: 10px;
  margin-bottom: 5px;
  font-family: Times, "ＭＳ 明朝", 平成明朝, serif;
}
.side_title {
  height: 25px;
  color: #2244bb;
  border-bottom: 1px solid #002266;
  margin: 10px;
  padding-left: 25px;
  padding-top: 3px;
  font-size: 15px;
  font-family: Times, "ＭＳ 明朝", 平成明朝, serif;
  background: url("http://img-cdn.jg.jugem.jp/6ab/536697/20070612_5430.gif") no-repeat scroll 0% 50%;
}
.side_content {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 30px;
}
.side_content a {
  color: #667799;
  border-bottom: 1px dotted #225599;
}
.cell {
  padding: 5px;
  color: #334477;
  text-align: center;
}
.cell a {
  color: #3333cc;
  border: none;
}
.calendar_month {
  padding: 5px;
  color: #334477;
  text-align: center;
  font-size: 11px;
}
.calendar_month a {
  color: #3333cc;
  border: none;
}
.amazon {
  margin-bottom: 20px;
  font-size: 11px;
}
.amazon a {
  color: #3355cc;
  border: none;
}
.admin {
  text-align: center;
}
.admin a {
  color: #4488cc;
  padding: 3px;
  border: none;
}
#entry {
  width: 490px;
}
.entry_top {
  height: 10px;
  background: url("http://img-cdn.jg.jugem.jp/6ab/536697/20070615_12403.gif") no-repeat scroll 0px 0px;
}
.entry_content {
  padding: 10px;
  background: url("http://img-cdn.jg.jugem.jp/6ab/536697/20070615_12394.gif") #02175c no-repeat scroll 0px 0px;
}
.entry_bottom {
  margin-bottom: 20px;
  height: 10px;
  background: url("http://img-cdn.jg.jugem.jp/6ab/536697/20070612_5429.gif") no-repeat scroll 0px 0px;
}
.entry_title {
  color: #3355cc;
  margin-top: 25px;
  margin-left: 40px;
}
.entry_date {
  font-size: 11px;
  color: #334477;
  text-align: right;
  margin-top: 10px;
}
.entry_body {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 25px;
  margin-bottom: 25px;
}
.entry_state {
  font-size: 11px;
  color: #334477;
  text-align: right;
  margin-top: 10px;
}
.entry_navi {
  background: #00051b;
  border: solid 1px #332288;
  text-align: center;
  color: #3322aa;
  padding: 1px;
}
.entry_navi a {
  color: #3322aa;
}
#trackback {
  margin-top: 30px;
  position: relative;
}
.tb_main_title {
  z-index: 4;
  position: absolute;
  top: -10px;
  right: 0px;
  color: #2266ee;
  font-size: 45px;
  line-height: 47px;
  font-family: Times, "ＭＳ 明朝", 平成明朝, serif;
  filter: alpha(opacity=70);
  opacity: 0.7;
}
.tb {
  color: #5588dd;
  padding: 10px;
}
.tb_title {
  color: #3377ee;
  margin-bottom: 5px;
}
.tb_title a {
  color: #3377ee;
}
.tb_body {
  padding-top: 5px;
  border-top: 1px solid #002277;
}
.tb_state {
  font-size: 11px;
  color: #447799;
  text-align: right;
  margin-top: 5px;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #002277;
}
.tb_state a {
  color: #2277cc;
}
.tb_td {
  color: #5588dd;
}
.formarea {
  margin: 10px;
}
.copyright {
  margin: 20px;
  text-align: center;
  color: #4477cc;
}
.copyright a {
  color: #5599ee;
}
.page {
  margin: 10px;
  text-align: right;
  color: #4477cc;
}
.page a {
  color: #5599ee;
}

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