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

ホーム

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

テンプレート名 : here comes

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}" />
<script src="./template/analogue/menu.js" type="text/javascript"></script>
<script type="text/javascript" src="./template/js/cookie.js"></script>
</head>

<div class="linkmenu">
<a href="" onclick="return buttonClick(event, 'MENU1');">ARCHIVE</a>:<a href="" onclick="return buttonClick(event, 'MENU2');">CATEGORY</a>:<a href="" onclick="return buttonClick(event, 'MENU3');">RECOMMEND</a>:<a href="" onclick="return buttonClick(event, 'MENU4');">LINK</a>:<a href="" onclick="return buttonClick(event, 'MENU5');">INFO</a>
</div>

<div id="MENU1" class="MENU">
<div class="list_text">{archives_list}</div>
<div class="list_title">&#9829;ARCHIVE</div>
</div>

<div id="MENU2" class="MENU">
<div class="list_text">{category_list}</div>
<div class="list_title">&#9829;CATEGORY</div>
</div>

<div id="MENU3" class="MENU">

<div class="list_text">{amazon_item}</div>
<div class="list_title">&#9829;RECOMMEND</div>

</div>

<div id="MENU4" class="MENU">
<div class="list_text">{link_list}</div>
<div class="list_title">&#9829;LINK</div>
</div>

<div id="MENU5" class="MENU">
<div class="list_text"><span style="padding: 1px 2px; border-bottom: 1px dashed #888888;">{site_title}</span><br>
<span style="padding: 1px 2px; border-bottom: 1px dashed #888888;">{blog_description}</span><br>
{user_list}</div>
<div class="list_title">&#9829;INFO</div>
</div>

</div>

<div id="main">

<div class="entry">
<div class="entry_state">
<div class="entry_date">
{entry_month}.{entry_day}.{entry_year} @ {entry_time_only}</div>
<h2><a href="{entry_permalink}" title="read this entry">{entry_title}</a></h2></div>
<div class="text">
<div class="entry_body">{entry_description}</div>
<div class="entry_more">{entry_sequel}</div>
<div class="entry_foot">{category_name}&nbsp;
<a href="{entry_permalink}#comments" title="read comment">COMMENT&#9829;{comment_num_only}</a>&nbsp;
<a href="{entry_permalink}#trackback" title="trackback">TRACKBACK&#9829;{trackback_num_only}</a></div>
</div>
<br style="clear:both;" />
</div>
{trackback_auto_discovery}

<a name="comments"><div class="cotr_area"></a>
<div class="entry_date">Comments</div>
<h2>read comments for this entry</h2>

<div class="comment_state">{comment_name}&nbsp;&#187;&nbsp;{comment_month}.{comment_day}.{comment_year}&nbsp;@&nbsp;{comment_hour}:{comment_minute}&nbsp;{comment_ampm}</div>
<div class="comment_body">{comment_description}</div>

<div class="entry_date">Comments</div>
<h2>post a comment</h2>
<div class="comment_form">
<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
<input type="hidden" name="entry_id" value="{entry_id}" />
<label for="name">　　　なまえ&nbsp;</label><input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" style="width:230px;" /><br>
<label for="email">　　　めーる&nbsp;</label><input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" style="width:230px;" /><br>
<label for="url">ほーむぺーじ&nbsp;</label><input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" style="width:230px;" />

<textarea tabindex="4" id="description" name="description" rows="8" cols="50" style="width:300px;">こめんと</textarea><br />
<label for="set_cookie">remember me？</label>&nbsp;<input type="checkbox" name="set_cookie" value="1" id="set_cookie" />
<input tabindex="5" type="submit" value="おくる" onclick="javascript:setval();" class="button" />
</form>
</div>
</div>

<a name="trackback"><div class="cotr_area"></a>
<div class="entry_date">Trackback</div>
<h2>trackback url for this entry</h2>
<div class="comment_body">{trackback_url}</div>
<div class="entry_date">Trackback</div>
<h2>trackback for this entry</h2>

<div class="comment_state">{trackback_title}&nbsp;&#187;&nbsp;{trackback_month}.{trackback_day}.{trackback_year}&nbsp;@&nbsp;{trackback_hour}:{trackback_minute}&nbsp;{trackback_ampm}</div>
<div class="comment_body">{trackback_excerpt}</div>

</div>

<div class="profile">
<div class="entry_date">WHO AM I</div>
<h2>{profile_name}</h2>
<div class="entry_body">{profile_description}</div>
</div>

</div>

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

<div class="footer_powered">
<a href="./admin" target="_blank">admin</a>：<a href="./?mode=rss">RSS1.0</a>：<a href="./?mode=atom">atom0.3</a>：<a href="http://jugem.jp/" target="_blank">jugem</a><br>designed by <a href="http://cammy.jugem.jp" target="_blank">Stimulus</a><br>
<form method="get" action="" class="search">
<input id="search" name="search" size="20" style="width:100px" class="form" />
<input type="submit" value="FIND ME" class="button" />
</form>
{ad}
{copyright}
</div>
</div>

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

CSS

/* 全体 */

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

body{ 
background: #C0E0FF;
color:#000000;
font-size: 10px;
font-family: Osaka, Verdana, ;
line-height: 120%;
cursor:default;
letter-spacing: 1px; }

ul { margin: 0; list-style-type: none; }
br { letter-spacing: 0; }
img { border: 0; }
form { margin: 0; padding: 0; }

/* レイアウト */
a { text-decoration: none; }
a:link { color: #E64D77; background: #FFFFFF; font-weight:bold; text-transform: uppercase; }
a:visited { color:#E64D77; background: #FFFFFF; font-weight:bold; text-transform: uppercase; }
a:hover { color:#E64D77; background: #F8F400; font-weight:bold; text-transform: uppercase; }

#layout {
width: 370px; 
margin: 0 auto;
background: #FFFFFF;
border: solid #999 0px;
text-align: left; }

#header { padding: 17px 17px 0px 17px; }
#main { width: 100%; }
#footer { width: 100%; background: #ffffff; }

/* タイトル（ヘッダー） */
.title {
height: 187px;
margin: 0px;
padding: 0px;
background: url(http://img-cdn.jg.jugem.jp/1b6/97562/20060319_114549.png); }

h1 {
font-family: Century Gothic, trebuchet ms, Gulim, ;
font-size: 24px; 
line-height: 100%;
padding: 133px 9px 9px 9px;
letter-spacing: 2px; 
text-align: right; }

h1 a { text-decoration: none; }
h1 a:link { color:#EC6B9E; background: #000000; font-weight: normal;}
h1 a:visited { color:#EC6B9E; background: #000000; font-weight: normal; }
h1 a:hover { color:#80C0FF; background: #000000; font-weight: normal; }

/* おりたたみメニュー */
.linkmenu {
text-align: center;
font-weight: bold;
font-family: Lucida Sans Unicode, trebuchet ms;
width: 336px;
margin-top: 5px;
margin-bottom: 5px;
color: #FFFFFF;
height: 15px;
padding-top: 2px;
background: #000000; }

.linkmenu a:visited {
color:#FFFFFF;
background: #000000;
text-decoration:none;
padding: 0px 2px 0px 2px; }

.linkmenu a {
color:#FFFFFF;
background: #000000;
text-decoration:none;
padding: 0px 2px 0px 2px; }

.linkmenu a:hover{
color:#80C0FF;
background: #000000;
text-decoration:none;
padding: 0px 2px 0px 2px; }

.MENU {
visibility: hidden;
z-index: 999;
position: absolute;
width:200px;
margin: 5px 0 0 -50px;
background: #000000;
border: 0px dashed #e9e9e9;}

.list_title {
padding: 0px 5px;
font-family: trebuchet ms;
font-size: 10px;
color: #EC6B9E;
font-weight: bold;
letter-spacing: 2px; 
text-align: right;}

.list_text { 
margin: 2px 5px 5px 5px;
padding: 7px;
line-height: 160%;
background: #FFFFFF; 
border: 0px dashed #ccbb99; }

.list_text ul li {
padding: 1px 2px;
border-bottom: 1px dashed #888888; }

.amazon_pict { 
margin: 0 0 5px 0; }

/* エントリー */

.entry {
margin: 0px 17px 0px 17px;
width: 336px;
background: #EEEEEE; 
border: 0px solid #ccbb99;}

.text { position: relative; }

.entry p { padding: 5px 0 15px 0; }

.entry_state {
padding: 0px;
letter-spacing: 2px; 
text-align: left; 
line-height: 17px;
background: url(http://img-cdn.jg.jugem.jp/1b6/97562/20060319_114550.png) no-repeat 0 0;
height: 35px;}

.entry_date {
font-size:7pt; 
font-weight:bold;
font-family:Tahoma; 
text-align:left; 
line-height: 7pt;
padding-top: 10px; }

h2 { 
font-weight:bold; 
color:#80C0FF; 
font-size: 7pt;
line-height: 7pt;
font-family: Tahoma;
position:relative;
text-transform: uppercase; }

h2 a { text-decoration: none; }
h2 a:link { color:#EC6B9E; background: #000000;}
h2 a:visited { color:#EC6B9E; background: #000000; }
h2 a:hover { color:#80C0FF; background: #000000; }

.entry_body { }
.entry_more { }

.entry_body img { 
padding: 3px;
border: 1px solid #000000;
background: #FFFFFF; }

.entry_more img { 
padding: 3px;
border: 1px solid #000000;
background: #FFFFFF;  }

.entry_foot { 
font-weight: bold;
color: #E64D77;
font-family: Tahoma;
background: #FFFFFF;
text-align: right;
margin-top: 0px; }

/* コメントとかトラックバックとかプロフィールとか */

.cotr_area {
margin: 0 17px 17px 17px; }

.comment_state {
line-height: 18px;
text-align: left; 
color: #000000;
margin-top: 3px; }

.comment_body { margin-bottom: 8px; }

.comment_form { text-align: center;  }
input, textarea {
color: #000000;
font-family: osaka, verdana;
font-size: 10px;
letter-spacing: 1px; 
border: 2px solid #C0E0FF;
 background: #C0E0FF; }

.button {
color: #EC6B9E;
font-weight: bold; 
border: 0px solid #000000;
background-color: #000000; }

.profile {
margin: 0 17px 17px 17px;
background: #ffffff; }

/* したのほう */
.page {
margin: 20px 17px 0px 17px;
text-align: center; }

.footer_powered {
margin: 0px 17px 0px 17px;
font-family: Tahoma;
text-align: center; 
background-color: #ffffff; 
border: 0px dashed #888888; }

#ad .linktext {
margin: 10px 0 0 0;
text-align: center; }

.search { text-align: center; }

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