無料ブログ作成なら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" />
	<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>
	<script Language="JavaScript">
	
	</script>
</head>

{gmo_header_src}

<tr>
    <td id="cd_header">
		
		<table border="0" cellpadding="0" cellspacing="20" align="right">
			<tr>
			<td>
				<h1>{blog_name}</h1>
				<div class="description">{blog_description}</div>
			</td>
			</tr>
		</table>
		
	</td>
  </tr>

<tr>
    <td id="cd_calendar">
		{calendar_horizontal}
	</td>
  </tr>

<tr>
    <td id="cd_contents">
		
		<div id="cd_main">
		
		
			
			<div class="cd_entry_navi">{prev_entry} | <a href="./">main</a> | {next_entry}</div>
			
			
			
			
			<div class="cd_entry">
				<div class="cd_entry_title">{entry_title}</div>
				<div class="cd_entry_body">{entry_description}</div>
				<a name="sequel"></a>
				<div class="cd_entry_more">{entry_sequel}</div>
				<div class="cd_entry_btm">
					<div class="cd_entry_author">{entry_date} {entry_time} | posted by {user_name}</div>
					<div class="cd_entry_state">{category_name} | <a href="{entry_permalink}">permalink</a> | {comment_num} | {trackback_num}| {pookmark_link}</div>
				</div>
				
			</div>
			{trackback_auto_discovery}
			<div class="cd_pagetop"><a href="#top"><font color="#6BC4DA">page*top</font></a></div>
			
			
			
			
			
			
			<a name="comments"></a>
			<div class="comment">
				<h3 class="comment_title">この記事に対するコメント</h3>
			
			
			<div class="comment_body">
			{comment_description}
			</div>
			<div class="comment_author">
			{comment_name} | {comment_time}
			</div>
			
			
			<div class="comment_title">コメントする</div>
			<div class="comment_body">
			<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
			<input type="hidden" name="entry_id" value="{entry_id}" />
			<label for="name">name:</label><br />
			<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" style="width:200px;" /><br />
			<label for="email">email:</label><br />
			<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" style="width:200px;" /><br />
			<label for="url">url:</label><br />
			<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" style="width:200px;" /><br />
			<label for="description">comments:</label><br />
			<textarea tabindex="4" id="description" name="description" rows="10" cols="50" style="width:300px;"></textarea><br />
			<br />
			<input type="submit" value="コメント送信" onclick="javascript etval();" />
			<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="trackback">
			<div class="trackback_title">この記事のトラックバックURL</div>
			
			<div class="trackback_url">
			{trackback_url}
			</div>
			
			<div class="trackback_title">この記事に対するトラックバック</div>
			
			
			<div class="trackback_body">{trackback_excerpt}</div>
			<div class="trackback_author">{trackback_title} | {trackback_blog_name} | {trackback_time}</div>
			
			
			</div>

<div class="entry">
			<div class="profile_title">プロフィール</div>
			<div class="profile_author">{profile_name}</div>
			<div class="profile_body">{profile_description}</div>
			</div>

<div class="cd_page_navi">{prev_page_link}　{page_now}　{next_page_link}</div>
			
		</div>
		
		
		
		
		<div id="cd_sidebar">
			<dl>
			
				
				<dt>RECOMMEND</dt>
				<dd>{amazon_item}</dd>
				
			
			
				
				<dt>SPONSORED LINKS</dt>
				<dd>{ad}</dd>
				
			
			
				
				<dt>CATEGORIES</dt>
				<dd>{category_list}</dd>
				
			
			
				
				<dt>SELECTED ENTRIES</dt>
				<dd>{selected_entry_list}</dd>
				
			
			
				
				<dt>ARCHIVES</dt>
				<dd>
					<div class="clo"><a href="javaScript:vewEntry('archive')">- ▼ -</a></div>
					<div id="archive" style="display:none;">
						{archives_list}
					</div>
				</dd>
				
			
			
				
				<dt>RECENT COMMENTS</dt>
				<dd>
					<div class="clo"><a href="javaScript:vewEntry('comm')">- ▼ -</a></div>
					<div id="comm" style="display:none;">
						{recent_comment_list}
					</div>
				</dd>
				
			
			
				
				<dt>RECENT TRACKBACK</dt>
				<dd>
					<div class="clo"><a href="javaScript:vewEntry('trackback')">- ▼ -</a></div>
					<div id="trackback" style="display:none;">
						{recent_trackback_list}
					</div>
				</dd>
				
			
			
				
				<dt>{freespace_title1}</dt>
				<dd>{freespace_contents1}</dd>
				
			
			
				
				<dt>{freespace_title2}</dt>
				<dd>{freespace_contents2}</dd>
				
			
			
				
				<dt>{freespace_title3}</dt>
				<dd>{freespace_contents3}</dd>
				
			
			
				
				<dt>{freespace_title4}</dt>
				<dd>{freespace_contents4}</dd>
				
			
			
				
				<dt>{freespace_title5}</dt>
				<dd>{freespace_contents5}</dd>
				
			
			
				
				<dt>MOBILE</dt>
				<dd>{site_qrcode}</dd>
				
			
			
				
				<dt>LINKS</dt>
				<dd>
					<div class="clo"><a href="javaScript:vewEntry('link')">- ▼ -</a></div>
					<div id="link" style="display:none;">
						{link_list}
					</div>
				</dd>
				
			
			
				
				<dt>PROFILE</dt>
				<dd>{user_list}</dd>
				
			
			
				
				<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>
						<li>{powered}</li>
					</ul>
				</dd>
				
			
			</dl>
		</div>
		
	</td>
  </tr>

<tr>
    <td id="cd_footer">
		
		<form method="get" action="" id="search_area">
			<input id="search" name="search" /><input type="submit" value="Search" class="button" />
		</form>
		
		
		<address>{copyright}</address>
	</td>
  </tr>

</table>

</body>
</html>

CSS

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

li {
	list-style:square
}

input,textarea {border:1px solid #CCCCCC;}

body {
	color:#E8E8E8;
	background-color: #F2F2F2;
	font-size:12px;
	line-height:150%;
	font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
	text-align:center;
}

a:link    {color:#71C6DB; text-decoration:underline;}
a:visited {color:#BEEDDC; text-decoration:underline;}
a:active  {color:#71C6DB; text-decoration:none;}
a:hover   {color:#BEEDDC; text-decoration:underline;}

div#cd_sidebar li a:link {color: #888888; text-decoration:none;}
div#cd_sidebar li a:visited {color: #666666; text-decoration:none;}
div#cd_sidebar li a:active {color: #888888; text-decoration:none;}
div#cd_sidebar li a:hover {color: #999999; text-decoration:underline;}

.cd_entry_btm a:link	{color: #6BC4DA; text-decoration:none;}
.cd_entry_btm a:visited {color: #82CCDF; text-decoration:none;}
.cd_entry_btm a:active  {color: #6BC4DA; text-decoration:none;}
.cd_entry_btm a:hover   {color: #82CCDF; text-decoration:underline;}

.cd_entry_navi a:link 	 {color: #3398B9; text-decoration:none;}
.cd_entry_navi a:visited {color: #71C6DB; text-decoration:none;}
.cd_entry_navi a:active  {color: #3398B9; text-decoration:none;}
.cd_entry_navi a:hover   {color: #3398B9; text-decoration:underline;}

table#cd_wrapper {
	width:702px;
	margin:0px auto;
	background-color:#FFF;
	border: 1px solid #CCCCCC;
}

/* ヘッダーの設定 */

td#cd_header {
	width:700px;
	height:225px;
	background:#88CCE3 url(./template/classical/img/top.jpg) no-repeat left top;
	color:#FFF;
	text-align:right;
}

td#cd_header h1 {
	font-size:24px;
	line-height:1.2;
	text-align:left;
}

td#cd_header div.description {
	font-size:14px;
	font-weight:bolder;
	text-align:left;
}

td#cd_header h1 a:link,
td#cd_header h1 a:visited,
td#cd_header h1 a:active,
td#cd_header h1 a:hover { color: #FFF; text-decoration: none;}

/* カレンダーの設定 */

td#cd_calendar {
	width:700px;
	height:30px;
	background:#FFF url(./template/classical/img/calendar.jpg) no-repeat left top;
	color: #FF9999;
	font-size:11px;
	text-align:center;
}

td#cd_calendar a:link 	 {color: #FF6F6F; font-weight: bolder; text-decoration:none;}
td#cd_calendar a:visited {color: #FF9999; font-weight: bolder; text-decoration:none;}
td#cd_calendar a:active  {color: #FF6F6F;font-weight: bolder; text-decoration:none;}
td#cd_calendar a:hover   {color: #FF6F6F;font-weight: bolder; text-decoration:underline;}

/* フッターの設定（検索とコピーライト） */

td#cd_footer {
	width:700px;
	padding-bottom:25px;
	background:#FFF url(./template/classical/img/bottom.jpg) no-repeat left bottom;
	color:#000;
	font-size:10px;
	text-align:center;
}

td#cd_footer form#search_area {}
td#cd_footer form#search_area input#search { width:140px; vertical-align:middle;}
td#cd_footer form#search_area input.button { margin-left:5px;vertical-align:middle;}

td#cd_footer address { font-style:normal; margin-top:10px;}

td#cd_footer a:link {color: #888888; text-decoration:none;}
td#cd_footer a:visited {color: #666666; text-decoration:none;}
td#cd_footer a:active {color: #888888; text-decoration:none;}
td#cd_footer a:hover {color: #999999; text-decoration:underline;}

/* コンテンツエリアの設定 */

td#cd_contents {
	width:630px;
	padding:0px 35px 20px 35px;
}

td#cd_contents div#cd_main {
	width:400px;
	float:left;
	text-align:left;
}

td#cd_contents div#cd_sidebar {
	width:200px;
	padding-top:30px;
	padding-bottom:150px;
	float:right;
	background:transparent url(./template/classical/img/nanashi.gif) no-repeat center bottom
}

/* サイドバーの設定 */

td#cd_contents div#cd_sidebar dl {
	width:200px;
	text-align:center;
}

td#cd_contents div#cd_sidebar dt {
	width:200px;
	padding-bottom:3px;
	background:transparent url(./template/classical/img/menu.gif) no-repeat center bottom;
	color: #85E31C;
	font-weight: bolder;
}

td#cd_contents div#cd_sidebar dd {
	width:170px;
	margin:5px 15px 30px 15px;
	color:#333;
	font-size:10px;
}

td#cd_contents div#cd_sidebar dd ul {
	margin-left:20px;
	text-align:left;
}
td#cd_contents div#cd_sidebar dd li {
	color:#CCC;
}

/* サイドバー・閉じるボタン▼の設定 */
.clo {
	margin-bottom:2px;
	color: #3398B9;
	text-align: center;
}

.clo a:link,
.clo a:visited,
.clo a:active  {color: #85E31C; text-decoration:none;}
.clo a:hover   {color: #85E31C; text-decoration:underline;}

/* メインエリア・記事の設定 */

.cd_entry {
	width:400px;
	margin: 20px 0px 0px 0px;
	padding-top:47px;
	background:#2C3650 url(./template/classical/img/m_top.gif) no-repeat left top;
}

.cd_entry_title {
	width:330px;
	padding:15px 35px 5px 35px;
	background:#234863 url(./template/classical/img/m_title.jpg) no-repeat left bottom;
	color:#FFFFCC;
	font-size:14px;
	font-weight:bolder;
	text-align:center;
}

.cd_entry_body {
	margin: 20px 25px 10px 25px;
	color: #E8E8E8;
	line-height: 170%;
}

.cd_entry_more {
	margin: 30px 25px 30px 25px;
	color: #E8E8E8;
	line-height: 170%;
}

.cd_entry_btm {
	width:350px;
	padding:12px 25px;
	background:#2C3650 url(./template/classical/img/m_bottom.gif) no-repeat left top;
	color:#3398B9;
	text-align:right;
}

.cd_entry_author {
	font-size: 10px;
}

.cd_entry_state {
	font-size: 11px;
	margin-right:5px;
}

.cd_entry_navi {
	width:400px;
	margin-top :20px;
	padding: 3px 0px;
	background-color: #DEF6EE;
	color: #3398B9;
	font-size: 11px;
	text-align: center;
}

.cd_pagetop {
	margin-bottom:30px;
	color:#6BC4DA;
	font-size:10px;
	text-align:right;
}

.cd_page_navi{
	width: 400px;
	padding: 3px 0px;
	background-color: #EBFAF4;
	color: #3398B9;
	font-size: 11px;
	text-align: center;
}

.entry_navi a:link {color: #3398B9; text-decoration:none;}
.entry_navi a:visited {color: #71C6DB; text-decoration:none;}
.entry_navi a:active {color: #3398B9; text-decoration:none;}
.entry_navi a:hover {color: #3398B9; text-decoration:underline;}

.entry_state a:link {color: #6BC4DA; text-decoration:none;}
.entry_state a:visited {color: #82CCDF; text-decoration:none;}
.entry_state a:active {color: #6BC4DA; text-decoration:none;}
.entry_state a:hover {color: #82CCDF; text-decoration:underline;}

.entry_author a:link {color: #6BC4DA; text-decoration:none;}
.entry_author a:visited {color: #82CCDF; text-decoration:none;}
.entry_author a:active {color: #6BC4DA; text-decoration:none;}
.entry_author a:hover {color: #82CCDF; text-decoration:underline;}

blockquote {
	font-size: 12px;
	color: #C8F0E3;
	margin: 20px 10px 20px 10px;
	padding: 10px;
	border-left: 4px solid #3398B9;
}

.pict {
	border-width: 4px;
	border-style: solid;
	border-color: #F4F7F7 #DCE3E3 #DCE3E3 #F4F7F7;
}

strong {color:#B6E377;}
b      {color:#B6E377;}
.red   {color:#B6E377;}

/* メインエリア・コメント,トラックバックの設定 */

.comment {
	width:340px;
	margin: 0px 25px 30px 35px;
}

.comment_body {
	margin: 20px 25px 10px 25px;
	color: #3398B9;
}

.comment_title {
	font-size: 14px;
	line-height:120%;
	font-weight: bolder;
	color: #666;
	border-left: 5px solid #333366;
	margin: 15px 0px 15px 0px;
	padding: 0px 0px 0px 5px;
	text-align: left;
}

.comment_author {
font-size: 10px;
font-weight: bolder;
text-align: left;
color: #999999;
margin: 5px 0px 25px 0px;
padding: 0px 0px 3px 0px;
border-bottom: 1px solid #666;
text-align: left;
}

.profile_title {
font-size: 14px;
line-height: 120%;
font-weight: bolder;
color: #0D7490;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 400px;
text-align: left;
}

.profile_author {
font-size: 14px;
font-weight: bolder;
text-align: left;
color: #3398B9;
margin: 15px 25px 0px 25px;
padding: 0px 0px 0px 0px;
width: 400px;
}

.profile_body {
font-size: 12px;
line-height: 150%;
color: #3398B9;
margin: 10px 25px 10px 25px;
padding: 0px 0px 0px 0px;
width: 400px;
text-align: left;
}

.trackback {
	width:340px;
	margin: 0px 25px 30px 35px;
}

.trackback_body {
font-size: 12px;
line-height: 170%;
color: #3398B9;
margin: 20px 25px 10px 25px;
padding: 0px 0px 0px 0px;
text-align: left;
}

.trackback_title {
font-size: 14px;
line-height:120%;
font-weight: bolder;
color: #666;
border-left: 5px solid #333366;
margin: 15px 0px 15px 0px;
padding: 0px 0px 0px 5px;
}

.trackback_url {
font-size: 12px;
line-height: 120%;
color: #3398B9;
background: #DEF6EE;
}

.trackback_author {
font-size: 10px;
font-weight: normal;
text-align: left;
color: #3398B9;
margin: 5px 0px 25px 0px;
padding: 0px 0px 3px 0px;
border-bottom: 1px solid #666;
}

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