無料ブログ作成なら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" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<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>
</head>

<div id="layout">
<a id="top" name="top"></a>

<div id="header">

<h1 class="site_name">{blog_name}</h1>
<h2 class="description">{blog_description}</h2>


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

</div>

<div id="main">

<div id="entry">

<div class="entry_navi">{prev_entry} / {next_entry}</div>

<div class="entry">
<a name="sequel"></a>
<h2 class="entry_title">{entry_title}</h2>
<div class="entry_date">Date：{entry_date}<br/>Author : {user_name}</div>
<div class="entry_body">
{entry_description}
<div class="entry_more">

<a href="./?eid={entry_sequel_id}#sequel">Read more...</a>


{entry_sequel_text}

</div>
</div>
<div class="entry_state">| {category_name} | {comment_num} | {trackback_num} |<a href="#top"> Top ▲</a>{trackback_auto_discovery}</div>
</div>

<a name="comments"></a>
<h4 class="guest_title">comment</h4>

<div class="guest_des">{comment_description}<br/>@ {comment_name} | {comment_time}</div>

<form name="comment_area" id="comment_area" action="./?mode=comment" method="post" class="form">
<input type="hidden" name="entry_id" value="{entry_id}"/>
	<table border="0" cellspacing="0" cellpadding="0">
	<tr><td>name</td>
	<td><input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" size="30"/></td></tr>
	<tr><td>mail</td>
	<td><input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" size="30"/></td></tr>
	<tr><td>url</td>
	<td><input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" size="30"/></td></tr>
	
	<tr><td colspan="2">comments</td></tr>
	<tr><td colspan="2"><textarea tabindex="4" id="description" name="description" rows="7" cols="50"></textarea></td></tr>
	<tr><td colspan="2"><input tabindex="5" type="submit" value="submit" class="bota"/>
	<input type="checkbox" name="set_cookie" value="1" id="set_cookie" style="border: 0pt"/>Cookieに登録</div></td></tr>
	</table>
</form>

<a name="trackback"></a>
<h4 class="guest_title">trackback</h4>
<div class="track_url">{trackback_url}</div>

<div class="guest_des">{trackback_excerpt}<br/>{trackback_title} @ {trackback_blog_name} | {trackback_time}</div>

<div class="entry">
<h2 class="guest_title">{profile_name} について</h2>
<div class="entry_body">{profile_description}</div>
</div>

</div>

<div id="side">

<h3 class="menu_title">categories</h3>
<div class="menu_text">{category_list}</div>

<h3 class="menu_title">select entries</h3>
<div class="menu_text">{selected_entry_list}</div>

<h3 class="menu_title">archives</h3>
<div class="menu_text">{archives_list}

<form method="get" action="./">
<input id="search" name="search" class="menu_inp"/>
<input type="submit" value="Search" class="menu_bota"/>
</form>

</div>

<h3 class="menu_title">comments</h3>
<div class="menu_text">{recent_comment_list}</div>

<h3 class="menu_title">trackback</h3>
<div class="menu_text">{recent_trackback_list}</div>

<h3 class="menu_title">recommend</h3>
<div class="menu_text">{amazon_item}</div>

<h3 class="menu_title">profile</h3>
<div class="menu_text">{user_list}</div>
<h3 class="menu_title">mobile</h3>
<div class="menu_text">{site_qrcode}</div>

<h3 class="menu_title">{freespace_title1}</h3>
<div class="menu_text">{freespace_contents1}</div>

<h3 class="menu_title">{freespace_title2}</h3>
<div class="menu_text">{freespace_contents2}</div>

<h3 class="menu_title">{freespace_title3}</h3>
<div class="menu_text">{freespace_contents3}</div>

<h3 class="menu_title">{freespace_title4}</h3>
<div class="menu_text">{freespace_contents4}</div>

<h3 class="menu_title">{freespace_title5}</h3>
<div class="menu_text">{freespace_contents5}</div>

<h3 class="menu_title">links</h3>
<div class="menu_text">{link_list}</div>

<h3 class="menu_title">sponsored</h3>
<div class="menu_text">{ad}</div>

</div>

<div class="entry_navi" style="clear: both">{prev_page_link} | {page_now}/{page_num} page | {next_page_link}</div>

</div>

<div id="footer">
<div class="copy">
{copyright}<br/>Designed by <a href="http://candyberrynet.jugem.jp/" target="_blank">candyberry.net+</a><br/>

<a href="./admin">Admin</a> | <a href="{site_rss}">RSS1.0</a> | <a href="{site_atom}">Atom0.3</a>

</div>
</div>

    
</div>

</body>
</html>

CSS

/* レイアウト設定------------------------------- */
body     { color: #f0ffff; background-color: black; margin: 0px }
#layout  { width: 800px }
#header  { text-align: right; height: 430px;
 background: url(http://img-cdn.jg.jugem.jp/05a/1153420/20111006_2243632.jpg) no-repeat left top }

#main   { padding: 50px 0px 0px 20px }
#entry  { float: left; width: 530px; padding-bottom: 30px }
#side   { float: right; width: 210px ;text-align: right }
#footer { margin-top; 30px; text-align: right; clear: both }

/* 文字設定------------------------------- */
h, div, td, input, textarea {
 color: #ffffff; font-family: Verdana, "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", Osaka, 平成角ゴシック }
h1, h2, h3, h4    { line-height: 100%; margin: 0px }

a        { color: #87cefa; text-decoration: none  }
a:hover  { color: #1e90ff }

#header a        { color: #1e90ff }
#header a:hover	 { text-decoration: underline }

/* スクロールバー設定------------------------------- */ 
html  {
 scrollbar-arrow-color: #1e90ff;
 scrollbar-face-color: #000000;
 scrollbar-track-color: #000000; 
 scrollbar-3dlight-color: #000000;
 scrollbar-darkshadow-color: #000000;
 scrollbar-highlight-color: #000000;
 scrollbar-shadow-color: #000000;
 }

.form textarea  {
 scrollbar-arrow-color: gray;
 scrollbar-face-color: #000000;
 scrollbar-track-color: #000000; 
 scrollbar-3dlight-color: #000000;
 scrollbar-darkshadow-color: #000000;
 scrollbar-highlight-color: #000000;
 scrollbar-shadow-color: #000000;
 }

/* ヘッダー------------------------------- */
.site_name    { font-weight: bold; font-size: 22px; padding: 190px 0px 10px }
.description  { font-size: 10px }

/* カレンダー */
.calender     { font-size: 10px; width:320px; float: right; padding-top: 30px }

/* エントリー------------------------------- */
.entry	      { margin-bottom: 50px }
.entry_title  { font-weight: bold; font-size: 16px }
.entry_date   { font-size: 10px; line-height: 120%; margin: 5px 0px }
.entry_body   { font-size: 12px; line-height: 160%; margin: 20px 0px }
.entry_more   { padding-top: 20px }

.pict  { margin: 0px 7px 7px 0px; border: 0pt }
.love  { margin-top: 15px }
.sns_botton  { margin-top: 25px }

.entry_state  { font-size: 10px }
.entry_state img { vertical-align:middle }

.entry_navi   { font-size: 10px; padding-bottom: 20px }

/* コメント＆トラックバック */
.form     { padding: 10px 0px 30px }
.form td  { color: silver; font-size: 12px; padding: 3px 0px }

.form input, .form textarea, .form .bota  {
 color: silver; background-color: black; font-size: 10px; line-height: 140%;
 margin: 0px; padding: 2px 3px; border: solid 1pt gray }
.form input  { margin 5px 10px; border: solid; border-width: 1pt; border-color: black black gray black }

.guest_title  { color: #ffffff; font-size: 14px; padding-left: 10px; border-left: solid 3pt white }
.guest_des    { color: #808080; font-size: 10px; line-height: 140%; padding: 5px 0px }
.track_url    { font-size: 12px; color: #1e90ff; margin: 5px 20px }

/* サイド------------------------------- */
.menu_title   { color: #ffffff; font-size: 14px; border-right: solid 3pt white; padding-right: 10px }
.menu_text    { font-size: 10px; line-height: 160%; margin: 8px 0px 20px }
.menu_text ul { list-style-type: none; line-height: 100%; margin: 0px; padding: 0px }
.menu_text li { padding-bottom: 5px }

.menu_inp,.menu_bota  { color: #f0ffff; font-size: 10px;
 background-color: black; margin-top: 10px; padding: 2px; border: dashed 1pt gray }
.menu_bota { margin: 0px 0px 0px 5px }

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

/* フッター------------------------------- */
.copy   { font-size: 10px; line-height: 140%; margin-top: 20px; padding: 10px 0px 20px; border-top: 1pt solid gray }

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