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

ホーム

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

テンプレート名 : 3_plural_floats

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>
 
	<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}" />
	<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="intro">
	
	<h1 class="logo" title="{site_title}">{blog_name}</h1>
	<h2 class="logo">{blog_description}</h2>
	
</div>

<div id="container">
		<a name="top" id="top">&nbsp;</a>

<div id="header">
			<div id="headerbox">
			
				
				<div id="headerbox-a"><strong>{blog_name}</strong></div>
				<div id="headerbox-b">{blog_description}</div>
				<div id="headerbox-c">{blog_name}</div>
				
				
				<div id="calendar">
					
					{calendar_horizontal}
					
				</div>
				<div id="headerbox-e">&nbsp;</div>
				
			</div>
		</div>

<div id="middle">

<div id="main">

<div id="contents">
					<div id="incontents">
						
						
						<div class="entry_link">
							{prev_entry}&nbsp;|&nbsp;<a href="./">ホーム</a>&nbsp;|&nbsp;{next_entry} 
						</div>

<div class="entry">
							<div class="liquid">
								<div class="padding">
									
									<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 class="entrylabel">
											<div class="title_img"></div>
											<h3 id="{eid_num}{page_num}{cid_num}{moth_yymm}{day_yymmdd}{index}" class="entry_title">
												<a href="{entry_permalink}">{entry_title}</a>
											</h3>
										</div>
									</div>
									<div class="entry_body border">
										<div class="jgm_entry_desc_mark">{entry_description}</div>
											<a name="liquid">&nbsp;</a><div class="entry_more">{entry_sequel}
										</div>
									</div>
									<div class="entry_state">
										<p>{comment_num},&nbsp;{trackback_num}</p>
									</div>
					
								</div>
							</div>
						</div>
						{trackback_auto_discovery}

<div class="entry_foot">

<a name="comments"></a>
		
							<dl id="comment">
								<dt>コメントする</dt>
									<dd>
										
										<div class="liquid">
											<div class="padding">
												<div class="border">{comment_name},&nbsp;{comment_time}</div>
												<p>{comment_description}</p>
											</div>
										</div>
										
									</dd>
									
									<dd>&nbsp;</dd>
									<dd>&nbsp;</dd>
									
									<dd class="form_area">
										<form name="comment_area" action="./?mode=comment" method="post">
											<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>
										</form>
									</dd>
								</dl>

<a name="trackback"></a>
								<dl id="trackback">
									<dt>この記事のトラックバックURL</dt>
									<dd class="tb_url">url:<strong>{trackback_url}</strong></dd>
	
									<dd>
										
										<div class="liquid">
											<div class="padding">
												<div class="border">{trackback_blog_name},&nbsp;{trackback_time}</div>
												<div class="tb_title border">{trackback_title}</div>
												<p>{trackback_excerpt}</p>
											</div>
										</div>
										
									</dd>
				
								</dl>
								
								
								
								<a name="profile"></a>
								<dl id="profile">
									<dt>プロフィール</dt>
				
									<dd>
										<div class="liquid">
											<div class="padding">
												<h3 class="border">{profile_name}</h3>
												<p>{profile_description}</p>
											</div>
										</div>
									</dd>
								</dl>
																
										
							</div>

<div class="page_link">
							<p>{prev_page_link}&nbsp;|&nbsp;{page_now}/{page_num}ページ&nbsp;|&nbsp;{next_page_link}</p>
							<p><a href="#top" title="トップ">ページのトップへ</a></p>
						</div>
						
						
						
					</div>
				</div>

</div>

<div id="sidebar">

<div id="left_sidebar">
				<div class="side">
					<div class="sidebox">
					
						<div class="side_top"></div>
						
						
						<dl id="user-list">
							<dt class="sidelabel">メンバーリスト</dt>
							<dd class="border">{user_list}</dd>
						</dl>

<dl>
							<dt class="centering">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>

<dl>
							<dt class="sidelabel">カテゴリー</dt>
							<dd>{category_list}</dd>
						</dl>

<dl>
							<dt class="sidelabel">月別記事</dt>
							<dd>{archives_list}</dd>
						</dl>

<dl>
							<dt class="sidelabel">リンク</dt>
							<dd>{link_list}</dd>
						</dl>

<dl>
							<dt class="sidelabel">携&nbsp;帯</dt>
							<dd class="centering">{site_qrcode}</dd>
						</dl>

<dl>
							<dt class="sidelabel">新着記事</dt>
							<dd>{latest_entry_list}</dd>
						</dl>
						
			
						
						<dl>
							<dt class="sidelabel">最新コメント</dt>
							<dd>{recent_comment_list}</dd>
						</dl>

<dl>
							<dt class="sidelabel">最新トラックバック</dt>
							<dd>{recent_trackback_list}</dd>
						</dl>

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

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

</div>
				</div>
			</div>

<div id="right_sidebar">
			<div class="side">
				<div class="sidebox">

<dl class="centering">
						<dt class="sidelabel">検&nbsp;索</dt>
						<dd>
							<form method="get" action="./">
								<input id="search" name="search" size="20" style="width:110px" class="search" />
								<input type="submit" value="search" class="btn" />
							</form>
						</dd>
					</dl>

<dl class="centering">
						<dt>{amazon_Creator}</dt>
						<dd class="side_dd">{amazon_item}</dd>
					</dl>
					
			
					
					<dl class="centering">
						<dt>{freespace_title1}</dt>
						<dd class="side_dd">{freespace_contents1}</dd>
					</dl>

<dl class="centering">
						<dt>{freespace_title2}</dt>
						<dd class="side_dd">{freespace_contents2}</dd>
					</dl>

<dl class="centering">
						<dt>{freespace_title3}</dt>
						<dd class="side_dd">{freespace_contents3}</dd>
					</dl>
					
	
					
					<dl class="centering">
						<dt>{freespace_title4}</dt>
						<dd class="side_dd">{freespace_contents4}</dd>
					</dl>
					
			
					
					<dl class="centering">
						<dt>{freespace_title5}</dt>
						<dd class="side_dd">{freespace_contents5}</dd>
					</dl>

</div>
			</div>
		</div>

</div>

<div id="footer">
			<div id="footerbox">
				<div class="centering">
					<address>{copyright}</address>
				</div>
			</div>
		</div>
			
		
		<a name="end" id="end"></a>

</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 {
font-size:small;
font:x-small;
line-height:160%;
color:#454545;
background:#fffbf0 url(http://img-cdn.jg.jugem.jp/e1f/447852/20080525_531053.gif) repeat-y;
font-family:"Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅", sans-serif;
text-align:center;
padding:0 10px;
}

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;
font-size:inherit;
font:100%;
}

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

* {
line-height:1.6;
color:#222;
font-size:100%;
font-style:normal;
margin:0;
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;
}

table,tbody,tr,th,td {
vertical-align:top;
}

pre {
border:3px solid #eee;
width:auto;
_width:95%;
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 {
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
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;
}

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

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

a:hover {
color:#ff4500;
text-decoration:underline;
background-color:#ffefd5;
}

a:active {
color:#ff1493;
}

img {
border:solid 1px transparent;
_border:solid 1px #eee;
}

#wrapper_body {
border-top:15px solid #454545;
}

#container {
margin-right:auto;
margin-left:auto;
width:100%;
min-width:960px;
text-align:left;
}

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

#middle {
margin-left:auto;
margin-right:auto;
width:960px;
}

#header {
margin-left:auto;
margin-right:auto;
text-align:center;
}

#main {
float:left;
width:578px;
}

#contents {
border:solid 2px #ffefd5;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
width:100%;
}

#incontents {
width:100%;
min-width:578px;
}

#sidebar {
float:right;
width:376px;
min-width:376px;
}

#left_sidebar {
border:solid 2px #f5deb3;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
background-color:#ffefd5;
float:left;
width:180px;
min-width:180px;
}

#right_sidebar {
border:solid 1px #ffefd5;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
float:right;
width:190px;
min-width:190px;
}

#footer {
margin-left:auto;
margin-right:auto;
clear:both;
}

#footer address {
font-style:normal;
font-size:x-small;
text-align:center;
}

h1 {
font-size:1.52em;
}

h2 {
font-size:1.44em;
}

h3 {
font-size:1.36em;
}

h4 {
font-size:1.29em;
}

h5 {
font-size:1.22em;
}

h6 {
font-size:1.14em;
}

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

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

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;
}

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

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

a[href^="mailto:"],a:visited[href^="mailto:"] {
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20080525_531058.gif) no-repeat 100% 100%;
padding:0 20px 0 0;
}

a:hover[href^="mailto:"],a:active[href^="mailto:"] {
background:#ffefd5 url(http://img-cdn.jg.jugem.jp/e1f/447852/20080525_531058.gif) no-repeat 100% 100%;
}

a[target="_blank"],a:visited[target="_blank"] {
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20080525_531059.gif) no-repeat 100% 100%;
padding:0 20px 0 0;
}

a:hover[target="_blank"],a:active[target="_blank"] {
background:#ffefd5 url(http://img-cdn.jg.jugem.jp/e1f/447852/20080525_531059.gif) no-repeat 100% 100%;
}

#intro {
position:relative;
overflow:hidden;
text-align:left;
margin:0 auto;
}

.logo {
display:block;
position:absolute;
top:0;
left:0;
float:left;
overflow:hidden;
text-indent:-9999px;
}

#headerbox {
margin-right:auto;
margin-left:auto;
width:960px;
min-width:960px;
vertical-align:top;
text-align:left;
}

#headerbox-c {
width:960px;
height:200px;
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20080526_531651.jpg) no-repeat;
text-indent:-9999px;
margin:0;
padding:0;
}

#headerbox-c a {
border:0;
display:block;
width:960px;
height:200px;
text-decoration:none;
-webkit-transition:all 1s ease-in-out;
margin:0;
padding:0;
}

#headerbox-c a:hover {
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20080525_531055.jpg) no-repeat;
-webkit-transform:rotate(360deg) scale(1.4);
}

#headerbox-e {
clear:both;
}

.entry {
margin-bottom:10px;
border-top:solid 1px #eee;
border-bottom:solid 1px #eee;
font-size:1em;
}

.entry_foot {
margin-bottom:10px;
font-size:1em;
text-align:left;
}

.liquid {
font-size:100%;
}

.entrylabel {
border-bottom:double 3px #32cd32;
font-weight:700;
margin:0;
padding:0;
}

.entry_title {
border-top:solid 1px #fff;
border-right:solid 1px #eee;
-webkit-border-top-right-radius:30px;
-moz-border-radius-topright:30px;
border-radius-topright:30px;
line-height:1.1em;
background-color:#fff;
font-family:"Verdana", "ＭＳ ゴシック", "中ゴシック体", Osaka, sans-serif;
font-weight:700;
font-size:1.59em;
margin:0;
padding:5px 5px 0;
}

.title_img {
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20080217_485972.gif) 50% 50% no-repeat;
float:left;
width:40px;
height:40px;
margin:0;
padding:0 0 4px;
}

.entry_date {
color:#666;
}

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

.entry_body {
border-right:solid 1px #eee;
-webkit-border-bottom-right-radius:30px;
-webkit-border-bottom-left-radius:30px;
-moz-border-radius-bottomright:30px;
-moz-border-radius-bottomleft:30px;
border-radius-bottomright:30px;
border-radius-bottomleft:30px;
color:#333;
background-color:#fff;
font-size:1.07em;
padding:15px 10px;
}

.entry_description {
margin-left:auto;
margin-right:auto;
width:96%;
_width:92%;
color:#333;
}

.entry_more {
margin-top:10px;
margin-left:auto;
margin-right:auto;
width:96%;
_width:92%;
text-align:left;
}

.entry_state {
font-size:x-small;
text-align:right;
padding:5px 0;
}

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

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

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

.popup img {
display:block;
top:-9999px;
left:-9999px;
position:absolute;
}

.popup a:hover {
position:relative;
}

.popup a:hover img {
top:-215px;
left:-32px;
border:2px solid #ffb6c1;
}

a.linkbutton {
margin-left:6px;
padding-left:8px;
display:block;
float:left;
height:40px;
line-height:22px;
background:transparent url('http://img-cdn.jg.jugem.jp/e1f/447852/20080525_531192.gif') 0 0 no-repeat;
font-weight:700;
text-decoration:none;
}

a:hover.linkbutton {
background:transparent url('http://img-cdn.jg.jugem.jp/e1f/447852/20080525_531192.gif') 0 -40px no-repeat;
text-decoration:underline;
}

a.linkbutton span {
display:block;
height:40px;
background:transparent url('http://img-cdn.jg.jugem.jp/e1f/447852/20080525_531193.gif') 100% 0 no-repeat;
padding:8px 8px 4px 2px;
}

a:hover.linkbutton span {
background:transparent url('http://img-cdn.jg.jugem.jp/e1f/447852/20080525_531193.gif') 100% -40px no-repeat;
}

.linkbuttonwrapper {
width:100%;
overflow:hidden;
}

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;
}

ul.dock li {
float:left;
list-style:none;
margin:0;
padding:2px;
}

ul.dock li img {
width:45px;
height:62px;
}

ul.dock li:hover img {
width:90px;
height:123px;
}

ul.dock li:hover + li img {
width:67px;
height:92px;
}

ul.dock li:hover + li + li img {
width:58px;
height:80px;
}

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

#comment .liquid,#trackback .liquid,#profile .liquid {
margin-bottom:10px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
background:#ffffe0;
}

#comment .form {
width:250px;
}

#trackback .tb_url {
margin-bottom:10px;
text-align:center;
}

#trackback .tb_url strong {
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-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;
}

.side {
width:100%;
}

.sidebox {
margin-left:auto;
margin-right:auto;
width:100%;
}

.sidelabel {
border-right:solid 1px #f33;
border-bottom:solid 1px #f33;
border-left:solid 1px #f66;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius:12px;
color:#fff;
background-color:#fe6a4b;
font-family:"Comic Sans MS";
font-weight:700;
font-size:1.07em;
text-align:center;
margin:0 5px 10px;
padding:4px 2px;
}

.side dl {
margin-bottom:10px;
background-image:url(http://img-cdn.jg.jugem.jp/e1f/447852/20080102_462228.gif);
background-repeat:repeat-x;
background-position:left bottom;
padding:0 0 25px;
}

.side dt {
margin-top:10px;
font-weight:bolder;
}

.side dl a:hover {
background-color:#fff;
}

.side_dd {
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20080217_485974.gif) no-repeat 50% 0;
line-height:1.2em;
text-align:center;
padding:5px 0 0;
}

.calendar table {
margin:0 auto;
}

.cell {
width:22px;
height:20px;
text-align:center;
}

.sun {
color:#f72c48;
}

.sat {
color:#4f72c1;
}

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

#calendar a,#calendar a:link {
width:22px;
height:20px;
color:#fff;
background:#32cd32;
font-weight:700;
}

#calendar a:visited {
color:#8b008b;
background:#ffdab9;
}

#calendar a:hover,#calendar a:active {
color:#fff;
background:#ff4500;
}

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

#calendar .cell a:hover {
background:none;
}

.centering {
text-align:center;
}

#headerbox-a,#footerbox {
text-align:left;
}

#headerbox p,.side dd,#profile h3 {
font-size:small;
}

.entry .padding,#comment .padding,#trackback .padding,#profile .padding {
padding:10px 20px 0;
}

.entry_link,.page_link {
font-size:x-small;
text-align:center;
margin:10px 0;
}

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

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