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

ホーム

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

テンプレート名 : 1_column

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" xml:lang="ja" 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>

</head>

<div id="container">
	<div id="wrapper">

<div id="header">
			<div id="header-box">
				<h1 title="{site_title}">{blog_name}</h1>
				<h2 title="{blog_description}">{blog_description}</h2>
				
			</div>
		</div>

<div id="global-nav">
			<ul id="gnav">
				<li><a href="./" title="ホーム">ホーム</a></li>
				<li><a href="#main" title="本文">本文</a></li>
				<li><a href="#calendar" title="カレンダー">カレンダー</a></li>
				<li><a href="#user-list" title="メンバーリスト">メンバーリスト</a></li>
				<li><a href="#category" title="カテゴリー">カテゴリー</a></li>
				<li><a href="#archives" title="月別記事">月別記事</a></li>
				<li><a href="#link" title="リンク">リンク</a></li>
				<li><a href="#search-area" title="検索">検索</a></li>
				<li><a href="#moblie" title="携帯用ＱＲコード">携帯用ＱＲコード</a></li>
				<li><a href="#latest-entry" title="新着記事">新着記事</a></li>
				<li><a href="#recent-comment" title="最新コメント">最新コメント</a></li>
				<li><a href="#recent-trackback" title="最新トラックバック">最新トラックバック</a></li>
			</ul>
		</div>

<div id="content">

<a name="main"></a>
			<div id="main">

<div class="entry-navi">
					{prev_entry} | <a href="./" title="ホーム">ホーム</a> | {next_entry} 
				</div>

<noscript>
					<h3>スクリプトを使用していない方へ</h3>
					<p><a href="./" title="{site_title}">{site_title}</a>&nbsp;では、スクリプト(JavaScript)を利用しています。<br /><a href="./" title="{site_title}">{site_title}</a>&nbsp;では、縦長の画面表示のためにページ内のスムーズスクロール移動に&nbsp;JavaScriptを利用しています。</p>
				</noscript>

<div class="entry">
					<div class="entry-date border">
						{entry_year}年{entry_month}月{entry_day}日（{entry_jpn_week}）&nbsp;/&nbsp;{category_name}&nbsp;/&nbsp;by&nbsp;{user_name}
					</div>

<h3><a href="{entry_permalink}" title="{entry_title}">{entry_title}</a></h3>

<div class="entry-body border">{entry_description}</div>
					<a name="sequel"></a>
					<div class="entry-foot"><div class="jgm_entry_desc_mark">{entry_sequel}</div></div>
					<div class="entry-state">
							{comment_num},&nbsp;{trackback_num}&nbsp;&nbsp;<a href="#top" title="ページの先頭へ">ページの先頭へ▲</a>
					</div>

{trackback_auto_discovery}
				</div>

<a name="comments"></a>

<div class="section">
						<dt>この記事のコメント</dt>
						<dd>
							<div class="border">{comment_name},&nbsp;{comment_time}</div>
							<p>{comment_description}</p>
						</dd>
					</div>

<div class="section">												
						<dt>コメントする</dt>
						<dd class="form_area">
							<form name="comment-area" action="./?mode=comment" method="post">
								<fieldset>
									<input type="hidden" name="entry-id" value="{entry_id}" />
									<label for="name">名前：</label><br/>
									<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" class="form" /><br />
									<label for="email">Eメールアドレス：</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">コメント：</label><br />
									<textarea tabindex="4" id="description" name="description" rows="7" cols="50" class="form"></textarea><br /><br />

<input tabindex="5" type="submit" value="送信" onclick="javascript:setval();" onkeypress="javascript:setval();" class="button" />
									<input type="checkbox" name="set_cookie" value="1" id="set_cookie" />
									<label for="set_cookie">入力情報をCookieに登録しますか？</label>
								</fieldset>
							</form>
						</dd>
					</div>
				</dl>

<a name="trackback"></a>
				<dl id="trackback">
					<div class="section">
						<dt>この記事のトラックバックURL</dt>
						<dd class="tb_url">url:<strong>{trackback_url}</strong></dd>
					</div>

<div class="section">
						<dt>この記事のトラックバック</dt>
						<dd>	
							<div class="border">{trackback_blog_name},&nbsp;{trackback_time}</div>
							<div class="tb-title border">{trackback_title}</div>
							<p>{trackback_excerpt}</p>
						</dd>
					</div>

</dl>

<a name="profile"></a>
				<dl id="profile">
					<div class="section">
						<dt>プロフィール</dt>
						<dd>
							<h3 class="border">{profile_name}</h3>
							<p>{profile_description}</p>
						</dd>
					</div>
				</dl>

<div id="page-area">
					
					<div class="page-navi" style=" ">{prev_page_link} | {page_now}/{page_num}PAGES | {next_page_link}</div>
					
					<div class="page-top"><a href="#top" title="ページの先頭へ">ページの先頭へ▲</a></div>
					<br class="clear" />
				</div>

</div>

<div id="sub">

<div id="sub-box">

<a name="calendar"></a>
					<dl id="calendar">
						<dt class="sub-label">カレンダー</dt>
						<dd>
							<table class="date" summary="曜日"><tr><td class="cell sun">日</td><td class="cell">月</td><td class="cell">火</td><td class="cell">水</td><td class="cell">木</td><td class="cell">金</td><td class="cell sat">土</td></tr></table>
							{calendar}
						</dd>
					</dl>
					<div class="page-top"><a href="#top" title="ページの先頭へ">ページの先頭へ▲</a></div>

<a name="user-list"></a>
					<dl id="user-list">
						<dt class="sub-label">メンバーリスト</dt>
						<dd>
							<div class="border">{user_list}</div>
						</dd>
					</dl>
					<div class="page-top"><a href="#top" title="ページの先頭へ">ページの先頭へ▲</a></div>

<dl>
						<dt>others</dt>
						<dd>
							<ul>
								<li><a href="./admin/">管理者ページ</a></li>
								<li><a href="./?mode=rss">RSS1.0</a></li>
								<li><a href="./?mode=atom">Atom0.3</a></li>
							</ul>
						</dd>
					</dl>

<a name="category"></a>
					<dl id="category">
						<dt class="sub-label">カテゴリー</dt>
						<dd>{category_list}</dd>
					</dl>
					<div class="page-top"><a href="#top" title="ページの先頭へ">ページの先頭へ▲</a></div>

<a name="archives"></a>
					<dl id="archives">
						<dt class="sub-label">月別記事</dt>
						<dd>{archives_list}</dd>
					</dl>
					<div class="page-top"><a href="#top" title="ページの先頭へ">ページの先頭へ▲</a></div>

<a name="link"></a>
					<dl id="link">
						<dt class="sub-label">リンク</dt>
						<dd>
							<ul>
								<li>{link_list}</li>
							</ul>
						</dd>
					</dl>
					<div class="page-top"><a href="#top" title="ページの先頭へ">ページの先頭へ▲</a></div>

<a name="search-area"></a>
					<dl id="search-area">
						<dt class="sub-label">検&nbsp;索</dt>
						<dd>
							<form method="get" action="./">
								<input id="search" name="search" size="20" class="search" />
								<input type="submit" value="search" class="btn" />
							</form>
						</dd>
					</dl>
					<div class="page-top"><a href="#top" title="ページの先頭へ">ページの先頭へ▲</a></div>

<a name="moblie"></a>
					<dl id="moblie">
						<dt class="sub-label">携帯用ＱＲコード</dt>
						<dd class="centering">{site_qrcode}</dd>
					</dl>
					<div class="page-top"><a href="#top" title="ページの先頭へ">ページの先頭へ▲</a></div>

<dl>
						<dt>{amazon_Creator}</dt>
						<dd>{amazon_item}</dd>
					</dl>

<dl>
						<dt class="sub-label">{freespace_title1}</dt>
						<dd>{freespace_contents1}</dd>
					</dl>
					<div class="page-top"><a href="#top" title="ページの先頭へ">ページの先頭へ▲</a></div>

<dl>
						<dt class="sub-label">{freespace_title2}</dt>
						<dd>{freespace_contents2}</dd>
					</dl>
					<div class="page-top"><a href="#top" title="ページの先頭へ">ページの先頭へ▲</a></div>

<dl>
						<dt class="sub-label">{freespace_title3}</dt>
						<dd>{freespace_contents3}</dd>
					</dl>
					<div class="page-top"><a href="#top" title="ページの先頭へ">ページの先頭へ▲</a></div>

<dl>
						<dt class="sub-label">{freespace_title4}</dt>
						<dd>{freespace_contents4}</dd>
					</dl>
					<div class="page-top"><a href="#top" title="ページの先頭へ">ページの先頭へ▲</a></div>

<dl>
						<dt class="sub-label">{freespace_title5}</dt>
						<dd>{freespace_contents5}</dd>
					</dl>
					<div class="page-top"><a href="#top" title="ページの先頭へ">ページの先頭へ▲</a></div>

<a name="latest-entry"></a>
					<dl id="latest-entry">
						<dt class="sub-label">新着記事</dt>
						<dd>{latest_entry_list}</dd>
					</dl>
					<div class="page-top"><a href="#top" title="ページの先頭へ">ページの先頭へ▲</a></div>

<a name="recent-comment"></a>
					<dl id="recent-comment">
						<dt class="sub-label">最新コメント</dt>
						<dd>{recent_comment_list}</dd>
					</dl>
					<div class="page-top"><a href="#top" title="ページの先頭へ">ページの先頭へ▲</a></div>

<a name="recent-trackback"></a>
					<dl id="recent-trackback">
						<dt class="sub-label">最新トラックバック</dt>
						<dd>{recent_trackback_list}</dd>
					</dl>
					<div class="page-top"><a href="#top" title="ページの先頭へ">ページの先頭へ▲</a></div>

<dl>
						<dt>sponsored links</dt>
						<dd class="centering">{ad}</dd>
					</dl>

<dl>
						<dt>powered</dt>
						<dd class="centering">{powered}</dd>
					</dl>

</div>

<div class="page-top"><a href="#top" title="ページの先頭へ">ページの先頭へ▲</a></div>

</div>

</div>

<div id="footer">
			<div id="footer-box">
				<h2><address>{copyright}</address></h2>
				<div id="end">designed&nbsp;by&nbsp;</div>
			</div>
		</div>

</div>
	
</div>

</body>
</html>

CSS

@charset "euc-jp";

/*======================================

======================================*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
margin:0;
padding:0;
}

body {
line-height:1;
}

ol,ul {
list-style:none;
}

blockquote,q {
quotes:none;
}

:focus {
outline:0;
}

ins {
text-decoration:none;
}

del {
text-decoration:line-through;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/*======================================

1-1.

======================================*/

body {
font-size:small;
font:x-small;
font-family:Arial, Helvetica, sans-serif;
}

table {
font-size:inherit;
font:100%;
}

select,input,textarea {
font-size:99%;
}

/*======================================

1-2.

======================================*/

* {
	margin: 0;
	padding: 0;
	line-height: 1.6;
	color : #222;
	font-size: 16px;
	font-style: normal;
}

/*======================================

1-3.

======================================*/

body {
line-height:160%;
color:#454545;
background:#fbf9ff url(http://img-cdn.jg.jugem.jp/e1f/447852/20081223_616322.gif) no-repeat 50% 0 fixed;
font-size:62.5%;
font-family:"メイリオ", "Meiryo", "Verdana", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS P Gothic", "Osaka‐等幅", sans-serif;
text-align:center;
padding:0;
}

/*======================================

======================================*/

h1,h2,h3 {
line-height:1.2;
color:#666;
font-family:"Verdana";
font-weight:700;
margin:0.8em 10px;
}

h4,h5,h6 {
line-height:1.2;
color:#444;
font-weight:700;
margin:0.8em 10px;
}

pre {
border:3px solid #eee;
width:auto;
overflow:scroll;
color:#3d4263;
background:#fff url(http://img-cdn.jg.jugem.jp/e1f/447852/20080105_463754.gif) no-repeat top right;
font-family:"Osaka-等幅", monospace;
padding:0.5em 10px;
}

p {
font-weight:400;
font-size:100%;
margin:0.8em 10px;
}

blockquote {
background-color:#eee;
margin:1.5em 20px 1.5em 40px;
padding:20px;
}

blockquote * {
color:#888;
}

cite {
display:block;
color:#333;
text-align:right;
}

em.ja {
color:#000;
font-style:normal;
}

em.en {
font-style:oblique;
}

strong {
font-weight:700;
}

code {
font-family:"Osaka-等幅", monospace;
}

addr,acronym {
border-bottom:1px dotted #aaa;
cursor:help;
}

kbd {
border:1px solid #ccc;
background-color:#f5f5f5;
font-family:"Osaka-等幅", monospace;
text-transform:uppercase;
padding:0 0.3em;
}

q {
background-color:#ffc;
}

a {
color:#003;
outline:none;
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20081209_611067.png) bottom repeat-x;
}

a:link {
color:#0000cd;
text-decoration:none;
}

a:visited {
color:#8a2be2;
text-decoration:none;
}

a:hover {
color:#ff4500;
position:relative;
top:-1px;
left:-1px;
text-decoration:underline;
background-color:#ffefd5;
}

a:focas {
color:#ff4500;
position:relative;
top:-1px;
left:-1px;
text-decoration:underline;
background-color:#ffebcd;
}

a:active {
color:#ff1493;
position:relative;
top:1px;
left:1px;
}

img {
border:0;
}

#container {
width:100%;
text-align:center;
}

#wrapper {
margin-right:auto;
margin-left:auto;
width:470px;
min-width:470px;
max-width:470px;
border-left:1px solid #fff;
border-right:1px solid #fff;
font-size:1.3em;
text-align:left;
}

#header {
height:120px;
margin:0;
}

#content {
width:470px;
margin:0 auto;
}

#page-area {
margin:10px 0 0;
}

h1 {
font-size:2em;
}

h2 {
font-size:1.9em;
}

h3 {
font-size:1.8em;
}

h4 {
font-size:1.7em;
}

h5 {
font-size:1.6em;
}

h6 {
font-size:1.5em;
}

.clear {
clear:both;
font:0/0 sans-serif;
}

#header #header-box {
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20081217_613985.gif) no-repeat top left;
height:120px;
}

#header h1 {
font-size:1.3em;
font-family:"Verdana", "ＭＳ ゴシック", "MS Gothic", "中ゴシック体", Osaka, sans-serif;
text-align:right;
}

#header h2 {
font-size:1.1em;
font-weight:400;
text-align:right;
}

#gnav {
margin-left:auto;
margin-right:auto;
width:470px;
background:#191919 url(http://img-cdn.jg.jugem.jp/e1f/447852/20081223_616291.gif) repeat-x 0 50%;
vertical-align:middle;
text-align:center;
padding:0;
}

#gnav::after {
display:block;
clear:both;
height:0;
visibility:hidden;
content:".";
}

#gnav li {
float:left;
list-style-type:none;
color:#fff;
text-align:center;
white-space:nowrap;
margin:0;
padding:0;
}

#gnav li a,#gnav li current {
display:block;
position:relative;
color:#fff;
font:700 1em Arial;
text-decoration:none;
padding:8px 10px 12px;
}

#gnav li a:hover,#gnav li a:focus {
background-color:#fff;
color:#ff4500;
}

.entry-navi {
text-align:center;
margin:5px;
}

.entry {
border-top:solid 1px silver;
border-right:solid 1px gray;
border-bottom:solid 1px gray;
border-left:solid 1px silver;
text-align:left;
margin:5px;
padding:5px;
}

.entry-foot {
margin-bottom:10px;
text-align:left;
}

.entry .entry-date {
font-size:1em;
text-align:left;
}

.border {
border-bottom:1px dotted #b5b5b5;
padding:0;
}

.entry h3 {
line-height:1.1em;
border-top:solid 1px #ffb6c1;
border-right:solid 1px #ffc0cb;
border-bottom:solid 1px #ffc0cb;
border-left:solid 1px #ffb6c1;
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20081222_615909.gif) repeat;
font-family:"Verdana", "ＭＳ ゴシック", "MS Gothic", "中ゴシック体", Osaka, sans-serif;
margin:5px;
padding:1px 5px;
}

.entry .entry-state {
font-size:1em;
text-align:right;
}

.entry li {
margin-left:20px;
list-style-type:circle;
}

.entry img {
border:solid 1px #eee;
}

.entry img.spacer {
width:2px;
height:6px;
}

.entry img a {
border:0;
outline:medium solid #eee;
margin:0 1em 1em 0;
}

ul.thumbnail {
list-style-type:none;
margin:0.5em 16px;
padding:0;
}

ul.thumbnail li {
float:left;
list-style-type:none;
margin:0 8px 8px 0;
padding:4px;
}

ul.thumbnail li img {
vertical-align:bottom;
}

p.continue {
clear:both;
margin:0.5em 16px;
}

#comment .section,#trackback .section,#profile .section {
margin-bottom:10px;
border-top:solid 1px silver;
border-right:solid 1px gray;
border-bottom:solid 1px gray;
border-left:solid 1px silver;
padding:5px;
}

#comment .form {
width:100%;
}

#trackback .tb-url {
margin-bottom:10px;
width:400px;
text-align:center;
}

#trackback .tb-url strong {
margin-bottom:10px;
margin-left:10px;
}

#trackback .tb-title {
font-weight:bolder;
}

dl#comment,dl#trackback,dl#profile {
width:90%;
margin:30px auto 0;
}

dl#comment dt,dl#trackback dt,dl#profile dt {
margin-top:5px;
margin-bottom:10px;
font-family:"Arial";
font-weight:bolder;
text-align:center;
}

dl#comment p,dl#trackback p,dl#profile p {
color:#454545;
padding:5px 0;
}

fieldset {
padding:20px;
}

#sub #sub-box {
width:470px;
text-align:left;
}

#sub dl {
background-image:url(http://img-cdn.jg.jugem.jp/e1f/447852/20081209_611081.gif);
background-repeat:repeat-x;
background-position:left bottom;
margin:5px;
padding:3px 8px;
}

#sub dt {
border-top:solid 1px silver;
border-right:solid 1px gray;
border-bottom:solid 1px gray;
border-left:solid 1px silver;
color:#000;
font-family:"Trebuchet MS", Trebuchet;
font-weight:700;
margin:5px 0 0;
padding:0 8px;
}

#sub dt.sub-label {
border:0;
background-color:#ff1493;
background-position:left;
color:#fff;
font-weight:700;
margin:5px 0 0;
padding:0 8px;
}

#sub dd {
line-height:1.2em;
margin:5px;
padding:5px 0 0;
}

#sub ul,#sub ul li {
list-style-type:none;
}

#sub ul li a {
line-height:1.6;
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20080525_531153.gif) 2px 2px no-repeat;
text-decoration:none;
padding:0 2px 0 17px;
}

#sub ul li a:visited {
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20080525_531156.gif) 2px 2px no-repeat;
}

#sub ul li a:hover,#sub ul li a:active {
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20080525_531154.gif) 2px 2px no-repeat;
}

#sub input.search {
margin-bottom:5px;
width:85%;
border-left:1px solid #ccc;
border-top:1px solid #ccc;
border-right:1px solid #efefef;
border-bottom:1px solid #efefef;
padding:1px 0;
}

.calendar {
font-size:0.8em;
}

.calendar table {
margin:0 auto;
}

.calendar_month {
font-family:"Verdana";
color:#666;
}

.cell {
border-left:1px solid #ccc;
border-top:1px solid #ccc;
border-right:1px solid #efefef;
border-bottom:1px solid #efefef;
width:35px;
height:20px;
text-align:center;
vertical-align:middle;
padding:0;
}

.sun {
color:#f72c48;
}

.sat {
color:#4f72c1;
}

.date {
color:#858585;
font-weight:bolder;
}

#calendar .cell a,#calendar .cell a:link,#calendar .cell a:visited,#calendar .cell a:active {
display:block;
width:35px;
height:20px;
background-color:#d9d9d9;
}

#calendar .cell a:hover {
background-color:#ffefd5;
}

.centering {
text-align:center;
}

#page-area .page-navi {
float:left;
text-align:center;
}

.page-top {
text-align:right;
}

#page-area .page-top {
float:right;
text-align:right;
}

#footer #footer-box {
width:470px;
height:120px;
border-top:1px solid #fff;
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20081217_613984.gif) no-repeat bottom right;
}

#footer-box h2 address {
font-style:normal;
font-size:0.5em;
font-weight:400;
text-align:center;
}

#end {
text-align:right;
vertical-align:bottom;
}

#content #main,#content #sub,#content #footer {
width:470px;
}

input.button,#sub input.button {
cursor:pointer;
}

.entry img:hover,.entry img a:hover {
outline:medium solid #ffc0cb;
}

input:focus,textarea:focus,#sub input.search:focus {
background-color:#dee;
}

#profile h3 {
font-size:1em;
}

/*======================================

IE6以下のバージョンに適用

======================================*/

/*======================================

テンプレート修正用

======================================*/

/* テンプレート修正用赤点線 */
/* div { border: dashed 1px #f00f00; } */
/* div { outline: dashed 1px #f00f00; } */

/* テンプレート修正用背景画像 */
/* body { background: #eee url(http://img-cdn.jg.jugem.jp/e1f/447852/20081129_607381.gif) repeat-x 50% 80% fixed; } */

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