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

ホーム

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

テンプレート名 : 右2カラム

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" />
<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}" />
</head>
<body>
<div CLASS="ALL">
	<div CLASS="TITLE" ID="title">
		
			<h1 id="top" class="site_title">{blog_name}</h1>
			<p id="description" class="description">{blog_description}</p>
			
	</div>
	<CENTER><div id="CalendarArea" class="calendararea">{calendar_horizontal}</div></CENTER>
	<div CLASS="MAIN">
		<div CLASS="CONTENTS">
			
				
					<div class="pagingLink">{prev_entry} | <a href="./">main</a> | {next_entry} </div>
				
				<div class="entry">
					<h3 class="entry_title">
						<a href="{entry_permalink}">{entry_title}</a>
					</h3>
					<div class="entry_body" target="_blank">{entry_description}</div><br>
					<div class="entry_more">{entry_sequel}</div>
					<table align="right" STYLE="margin-right:10px;">
						<tr>
							<td align="right">
								<p>posted by</p>
							</td>
							<td>
								<div class="entry_author">{user_name}</div>
							</td>
						</tr>
						<tr>
							<td align="right">
								<p>at </p>
							</td>
							<td>
								<div class="entry_date">{entry_date} {entry_time}</div>
							</td>
						</tr>
					</table>
					<br clear="all">
					<p class="entry_state">{category_name} | {comment_num} | {trackback_num}| <a href="#top">▲top</a></p>
				</div>
				{trackback_auto_discovery}
			
			
				<div class="entry"><h3 id="comments" class="comment-title">コメント</h3>
					
						<div class="comment_body">{comment_description}</div>
						<p class="entry_state">| {comment_name} | {comment_time} | </p>
					
					<div class="commentform">
						<form action="./?mode=comment" method="post">
							<input type="hidden" name="entry_id" value="{entry_id}" />
							<table>
								<tr>
									<td><label for="name">name:</label></td>
									<td><input type="text" name="name" value="{cookie_name}" size="20" tabindex="1" id="name"></td>
								</tr>
								<tr>
									<td><label for="email">email:</label></td>
									<td><input type="text" name="email" value="{cookie_email}" size="30" tabindex="2" id="email"></td>
								</tr>
								<tr>
									<td><label for="url">url:</label></td>
									<td><input type="text" name="url" value="{cookie_url}" size="50" tabindex="3" id="url"></td>
								</tr>
								<tr>
									<td colspan="2"><label for="description">comments:</label></td>
								</tr>
								<tr>
									<td colspan="2">
										<textarea tabindex="4" id="description" name="description" rows="6" cols="45"></textarea>
									</td>
								</tr>
							</table>
							<input type="submit" value="コメント送信" />
							<input type="checkbox" name="set_cookie" value="1" id="set_cookie">
							<label for="set_cookie">Cookie</label>
						</form>
					</div>
				</div>
			
			
				<a name="trackback"></a>
				<div class="entry">
					<h3 class="comment-title">この記事のトラックバックURL</h3>
					<div class="entry_body">{trackback_url}</div>
					
						<h3 class="comment-title">トラックバック</h3>
						<p class="entry_state"> | {trackback_blog_name} | {trackback_time} | <a href="#top">page top ▲</a></p>
						<h4 class="trackback_title">{trackback_title}</h4>
						<div class="comment_body">{trackback_excerpt}</div>
					
				</div>
			
			
				<div class="entry">
					<h3 class="entry_title">プロフィール</h3>
					<dl>
						<dt>{profile_name}</dt>
						<dd>{profile_description}</dd>
					</dl>
				</div>
			
		</div>
		<div CLASS="SIDE">
			<div CLASS="cont0" ID="side">
			</div>
			<div CLASS="cont1" ID="l_side">
				
					<p class="linktitle" id="profilename">PROFILE
					<div class="linktext" id="profilelist">{user_list}</div></p>
				
			</div>
			<div CLASS="cont2" ID="r_side">
			</div>
			<div CLASS="cont3" ID="l_side">
				
					<p class="linktitle" id="selentryname">SELECTED ENTRIES
					<div class="linktext" id="selentrylist"=>{selected_entry_list}</div></p>
				
			</div>
			<div CLASS="cont4" ID="r_side">
				
					<p class="linktitle" id="newentryname">LATEST ENTRIES
					<div class="linktext" id="newentrylist"=>{latest_entry_list}</div></p>
				
			</div>
			<div CLASS="cont5" ID="l_side">
				
					<p class="linktitle" id="commentname">RECENT COMMENT
					<div class="linktext" id="commentlist">{recent_comment_list}</div></p>
				
			</div>
			<div CLASS="cont6" ID="r_side">
				
					<p class="linktitle" id="tbname">RECENT TRACKBACK
					<div class="linktext" id="tblist">{recent_trackback_list}</div></p>
				
			</div>
			<div CLASS="cont7" ID="l_side">
				
					<p class="linktitle" id="categoryname">CATEGORIES
					<div class="linktext" id="categorylist">{category_list}</div></p>
				
			</div>
			<div CLASS="cont8" ID="r_side">
				
					<p class="linktitle" id="archivename">ARCHIVES
					<div class="linktext" id="archivelist">{archives_list}</div></p>
				
			</div>
			<div CLASS="cont9" ID="l_side">
				
					<p class="linktitle" id="linkname">LINKS
					<div class="linktext" id="linklist">{link_list}</div>
					</p>
				
			</div>
			<div CLASS="cont10" ID="r_side">
				
					<div class="linktitle">OTHERS</div>
					<div class="linktext">
						<ul>
							<li>
								<a href="http://beautypixy.jugem.cc/admin/">管理者ページ</a>
							</li>
							<li>
								<a href="http://beautypixy.jugem.cc/?mode=rss">RSS1.0</a>
							</li>
							<li>
								<a href="http://beautypixy.jugem.cc/?mode=atom">atom0.3</a>
							</li>
						</ul>
					</div>
				
			</div>
			<div CLASS="cont11" ID="l_side">
				
					<div class="linktitle">POWERED BY</div>
					<div class="linktext">
						<ul>
							<li>
								<a href="https://jugem.jp" target="_blank">
									<img src="../template/banner/jugem_black01.gif" width="128" height="22" alt="ブログのレンタルサービス JUGEM" border="0" />
								</a>
							</li>
						</ul>
					</div>
				
			</div>
			<div CLASS="cont13" ID="l_side">
			</div>
			<div CLASS="cont14" ID="r_side">
			</div>
			<div CLASS="cont_free" ID="side">
				
					<div class="linktext">{amazon_item}</div>
				
			</div>
		</div>
	</div>
	<div CLASS="FOOTER">
		<address class="copyright">Copyright (C) 2004 
			<a href="http://paperboy.co.jp" target="_blank" title="インターネットのトータルソリューション企業paperboy&amp;co.">paperboy&amp;co.</a> All Rights Reserved.<br /><a href="https://jugem.jp/" target="_blank">Powered by "JUGEM"</a>
		</address>
	</div>
</div>
</body>
</html>

CSS

body{
	background-color: Gray;
	text-align: center;
}
.ALL{
	background-color: #F5F5F5;
	width: 800px;
	border: medium solid #F5F5F5;
}
.TITLE{
	width: 800px;
	height: 100px;
	text-align: left;
}
.MAIN{
	width: 800px;
	height: auto;
	background-color: #F5F5F5;
}
.CONTENTS{
	float: left;
	width: 490px;
	text-align: left;
	background-color: #F5F5F5;
}
.SIDE{
	float: left;
	width: 310px;
	text-align: left;
	margin-top: 5px;
	background-color: #F5F5F5;
}
.cont1 , .cont2{
	height: 200px;
}
.cont3 , .cont4{
	height: 200px;
}
.cont5 , .cont6{
	height: 400px;
}
.cont7 , .cont8{
	height: 400px;
}
.cont9 , .cont10{
	height: 400px;
}
.cont11 , .cont12{
	height: 200px;
}
.cont13 , .cont14{
	height: 200px;
}
.cont15 , .cont16{
	height: 200px;
}

#l_side{
	/*background-color: Lime;*/
	overflow:auto;
	float: left;
	width: 152px;
	/*height: 100px;*/
	margin: 0px 1px 0px 1px;
}
#r_side{
	/*background-color: Yellow;*/
	overflow:auto;
	float: right;
	width: 152px;
	/*height: 100px;*/
	margin: 0px 1px 0px 1px;
}
#side{
	/*background-color: Silver;*/
	float: left;
	width: 306px;
	margin: 0px 1px 0px 1px;
}
.FOOTER{
	text-align: center;
	width: 800px;
	height: 40px;
	border-top: 1px dashed;
	background-color: #F5F5F5;
	float: left;
}
h1 {
margin: 0px;
padding: 0px;
font-size: 36px;
}

ul {
margin: 0px 0px 0px 15px;
padding: 0px;
}

dt{font-weight: bolder;margin-left:1em;}

blockquote {
	font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	font-size: 90%;
	margin: 20px 10px 20px 10px;
	padding: 10px;
	border-left: 3px solid #CCCCCC;
	background-color: #ECFFFF;
}

address {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 12px;
color: #333333;
line-height: 150%;
padding: 3px;
}

img{border:none;}

a:link {color:#000080; text-decoration:none;}
a:visited {color:#000080; text-decoration:none;}
a:active {color:#0000CD; text-decoration:none;}
a:hover {color:#0000FF; text-decoration:none;}

p{
	margin: 0px;
}

#CalendarArea {
	text-align: center;
	padding: 4px 0px 3px 3px;
	font-size: 12px;
	color: #3C3C3C;
	word-spacing: 2px;
	background-color: #F5F5F5;
	border-bottom: 1px dashed;
}

#CalendarArea a {
padding: 1px;
font-weight: bold;
}

#CalendarArea a:hover {
color: #F5F5F5;
background-color: #256C74;
}

.site_title{
font-weight: bolder;
color: #FF0000;
margin-left: 1em;}

.site_title a {color: #FF0000;text-decoration: none;}
.site_title a:link {color: #FF0000;text-decoration: none;}
.site_title a:visited {color: #FF0000;text-decoration: none;}
.site_title a:active {color: #FF0000;text-decoration: none;}
.site_title a:hover {color: #FF0000;text-decoration: none;}

.description{
	font-weight: bolder;
	font-size: 12px;
	color: Blue;
	margin: 0px 0px 5px 2em;
}

.linktitle{
	font-family: "Verdana";
	font-size: 10px;
	font-weight: bolder;
	color: #ce1010;
	margin-left: 2px;
}

.linktext{
	font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	font-size: 9px;
	color: #333;
	margin-left: 5px;
	line-height: 150%;
}

.linktext ul{list-style-type:none;}

.pagingLink{
text-align: center;
font-size: 12px;
margin-top: 10px;
}
.entry{
	margin: 1em 1em 1em 1em;
	padding: 1em 1em;
	border: double #D1D1D1;
         width: 410px;
}
.entry_date{
font-size: 12px;
font-weight: bolder;
color: #666666;
margin: 2px 0px 0px 0px;
}
.entry_title{
	font-weight: bolder;
	font-color: #FF0000;
	margin: 0px 0px 15px 0px;
	padding: 0px 0px 3px 10px;
	border-bottom: 1px solid #333;
	font-size: 14px;
}
.entry_body{
	font-size: 12px;
	color: #333;
	margin: 2px 0px 1.5px 1px;
	line-height: 150%;
}
.entry_body span{
	line-height: 250%;
}

.entry_body a{
border-bottom: 1px dashed;
}

.entry_more{
	font-size: 14px;
	color: #333;
	margin: 2px 0px 1.5px 1px;
	line-height: 150%;
}

.entry_more a{
border-bottom: 1px dashed;
}

.entry_author{
font-size: 14px;
font-weight: bolder;
color: #666666;
margin: 2px 0px 0px 0px;
}
.entry_time{
font-size: 12px;
font-weight: bolder;
color: #666666;
margin: 2px 0px 0px 0px;
}
.entry_state{
	font-size: 12px;
	color: #666666;
	margin: 5px 0px 0px 0px;
	text-align: right;
}
.comment-title{
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 100%;
font-weight: bolder;
color: #666666;
margin: 10px 0px 10px 0px;
padding-bottom: 3px;
border-bottom: 1px dotted #CCCCCC;
}
.comment_body{
font-size: 80%;
line-height: 150%;
color: #333;
margin: 2em 0px 2em 1em;
}
.commentform{
font-size: 95%;
line-height: 150%;
color: #333;
margin: 2em 0 1em 1em;
}
.trackback_title{
font-size: 95%;
font-weight: bolder;
color: #666666;
margin: 15px 0px 15px 0px;
padding: 2px 0 3px 7px;
border-bottom: 1px solid #666;
border-left:10px solid #666;
}

.pict {
border-style: none;
}

.amazon {
	width: 300px;
	margin-top: 10px;
	float: none;
	height: auto;
}

.amazon_pict {
	width: 100px;
	float: left;
	margin: 2px 2px 2px 2px;
}
.amazon_text {
	width: 150px;
	font-size: 9px;	font-weight: normal;
	line-height: 130%;
	margin: 5px 0px 3px 0px;
}

.amazon_text strong {
	}

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