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

ホーム

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

テンプレート名 : Orange

HTML・CSSをコピーして使う

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset={site_encoding}" />
<title>{site_title}</title>
<script type="text/javascript" src="./template/js/cookie.js"></script>
<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}" />
<link rel="stylesheet" href="{site_css}" type="text/css" />
<link type="text/css" href="{gmo_header_css}" rel="stylesheet" media="screen,print" />

</head>
<body onload="javascript:initval();">
<a id="pagetop"></a>

	
	<div id="blog_title_border">
	<div id="blog_title_text"><a href="#">{blog_name}</a></div>
	<div id="blog_desc_text">{blog_description}</div>
	</div>

<div id="content_center">
		
		<div id="entry_wrapper">

			<div id="entry">
			
			<div class="entry_top"></div>
			<div class="entry_center">
			
			<div class="sequel">&lt;&lt; Prev <a href="{prev_permalink}">{prev_title}</a> | <a href="/">Home</a> | <a href="{next_permalink}">{next_title}</a> Next &gt;&gt;</div>
			
				<div class="entry_title"><a href="{entry_permalink}">{entry_title}</a></div>
				<div class="entry_date">{entry_date} {entry_time}</div>
				<div class="entry_date">Category: {category_name}</div>
				<div class="entry_desc">{entry_description}</div>
				<div class="entry_sequel">{entry_sequel}</div>
				<div class="entry_property"><span class="entry_property_text" style="border-left: #333333 1px solid;">{comment_num}</span><span class="entry_property_text">{trackback_num}</span><span class="entry_property_text">{user_name}</span><span class="entry_property_text"><a href="{entry_permalink}">Permalink</a></span></div>
{trackback_auto_discovery}
            </div>
			<div class="entry_bottom"></div>
		
			</div>
	

			<div id="entry">
			
			<div class="entry_top"></div>
			<div class="entry_center">
			<div class="profile_name">Profile : {profile_name}</div>
			<div class="entry_desc">{profile_description}</div>
            </div>
			<div class="entry_bottom"></div>
		
			</div>


			<div id="comment">

<a id="comments"></a>
				<div class="comment_title">Comment</div>

<div class="comment_posts_sent">Everyone's Posts</div>

				<div class="comment_entry">
				<div class="comment_property">On {comment_time}, "{comment_name}" wrote;</div>
				{comment_description}
				</div>

<div class="comment_posts_sent">Send a comment</div>

<div class="comment_post_form">
		<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
		<input type="hidden" name="entry_id" value="{entry_id}" />	
		<div class="comment_post_form_left">
		<div>Name<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" /></div>
		<div>Email(option)<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" /></div>
		<div>URL(option)<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" /></div>
		<div><label for="set_cookie">Save data to cookie</label><input type="checkbox" name="set_cookie" value="1" id="set_cookie" style="width: auto;" /></div>
		</div>
	
		<div class="comment_post_form_right">
		Description:<br />
		<textarea tabindex="4" id="description" name="description"></textarea>
		</div>
	
		<div class="comment_post_send"><input tabindex="5" type="submit" value="Send &amp; Captcha" onclick="javascript:setval();" /></div>
	
		</form>
	</div>

<a name="trackback"></a>
			<div class="comment_title">Trackback</div>
			<div class="comment_posts_sent">Sent trackbacks list</div>

				<div class="comment_entry"><span class="comment_property">On {trackback_time}, "{trackback_blog_name}" sent;</span><br />
				Blog title: {trackback_title}<br />
				{trackback_excerpt}
				</div>

			<div class="comment_posts_sent">Send a trackback</div>
			<div class="comment_posts_sent">Trackback URL: <input value="{trackback_url}" style="font-size: 12px; font-weight: bold; width: 240px;" readonly="readonly" /></div>&nbsp;
			</div>
			<div class="comment_bottom"></div>
	
			</div>

		</div>

<div id="controlbar_wrapper">
			
			<div class="controlbar_top"></div>
			<div class="controlbar_center">

			<div class="controlbar_title">Calendar</div>
			<div class="controlbar_space_txcenter">
			<table border="0" cellspacing="1" cellpadding="0">
			<tr style="text-align: center;">
			<td class="cell_sun">S</td>
			<td class="cell">M</td>
			<td class="cell">T</td>
			<td class="cell">W</td>
			<td class="cell">T</td>
			<td class="cell">F</td>
			<td class="cell_sat">S</td>
			</tr>
			</table>
			{calendar}
			</div>

<div class="controlbar_title">Search in this blog</div>
			<div class="controlbar_space">
			<form method="get" action="">
			<input id="search" name="search" style="width:140px" /><input type="submit" value="Go" class="button" />
			</form>
			</div>

<div class="controlbar_title">Recent Posts</div>
			<div class="controlbar_space_list">
			<ul class="select">
			{latest_entry_list}
			</ul>
			</div>

<div class="controlbar_title">Categories</div>
			<div class="controlbar_space_list">
			<ul class="select">
			{category_list}
			</ul>
			</div>

<div class="controlbar_title">Archives</div>
			<div class="controlbar_space_list">
			<ul class="select">
			{archives_list}
			</ul>
			</div>

<div class="controlbar_title">Comments</div>
			<div class="controlbar_space_list">
			<ul class="select">
			{recent_comment_list}
			</ul>
			</div>

<div class="controlbar_title">Trackbacks</div>
			<div class="controlbar_space_list">
			<ul class="select">
			{recent_trackback_list}
			</ul>
			</div>

<div class="controlbar_title">Sponsored links</div>
			<div class="controlbar_space">
			{ad}
			</div>

<div class="controlbar_title">Syndicate this site</div>
			<div class="controlbar_space">
- <a href="?mode=rss" target="_blank">RSS 2.0</a><br />
- <a href="?mode=atom" target="_blank">Atom</a>
			</div>

<div class="controlbar_title">For webmaster</div>
			<div class="controlbar_space">
- <a href="manage/" target="_blank">Administrator</a><br />
- <a href="manage/?mode=write" target="_blank">Write</a><br />
- <a href="manage/?mode=comment" target="_blank">Comments setting</a><br />
- <a href="manage/?mode=trackback" target="_blank">Trackbacks setting</a>
			</div>

<span style="font-size: 10px;">Powered by <span id="poweredbyjugem"><a href="http://jugem.jp/" target="_blank">JUGEM</a></span>.</span>
			</div>
			<div class="controlbar_bottom"></div>

</div>
		
		<div id="favoritebar_wrapper">

<div class="favoritebar_title">Recommend!</div>
			<div class="controlbar_space">
			{amazon_item}
			</div>

<div class="favoritebar_title">Profile</div>
			<div class="controlbar_space_list">
			<ul class="select">
			{user_list}
			</ul>
			</div>

<div class="favoritebar_title">{freespace_title1}</div>
			<div class="controlbar_space">
			{freespace_contents1}
			</div>

<div class="favoritebar_title">{freespace_title2}</div>
			<div class="controlbar_space">
			{freespace_contents2}
			</div>

<div class="favoritebar_title">{freespace_title3}</div>
			<div class="controlbar_space">
			{freespace_contents3}
			</div>

<div class="favoritebar_title">{freespace_title4}</div>
			<div class="controlbar_space">
			{freespace_contents4}
			</div>

<div class="favoritebar_title">{freespace_title5}</div>
			<div class="controlbar_space">
			{freespace_contents5}
			</div>

<div class="favoritebar_title">Mobile</div>
			<div class="controlbar_space">
			{site_qrcode}
			</div>

&nbsp;
		</div>
			<div class="favoritebar_bottom"></div>

</div>
<span class="space" style="clear: left; display: block;">&nbsp;</span>
	</div>

<div id="footer_contents">

<div id="navigation">
<a href="{prev_page_url}">&lt;&lt; Newer</a> | {page_now}/{page_num} pages | <a href="{next_page_url}">Older &gt;&gt</a>
</div>

<span style="float: left;">{copyright}</span><span style="float: right;"><a href="#pagetop">Top of page</a></span>
</div>

</div>

</div>
</body>
</html>

CSS

/*
フォントを変えたい・・・bodyセレクタのfont-familyを変更するだけでページ内全部変更されます。
::selectionって？・・・Safari 3やOpera9.5などのブラウザにあたらしく搭載された、文字を選択したときの反転色を指定するもの。
/*

/*まず全体の設定 はじめ*/
::selection {
	BACKGROUND: #BBF101;
	COLOR: #FFF;
}
body	{
	font-size: 12px;
	color: #353535;
	line-height: 1.4;
	font-family: Georgia;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	}
input, select, textarea	{
	padding: 1px;
	border: #777777 1px solid;
	background-color: #FFFFFF;
	color: #333333;
	font-family: Georgia;
	font-size: 10px;	
	}
.button	{
	padding: 1px;
	border: #777777 1px solid;
	font-family: Georgia;
	font-size: 10px;
	background-color: #99CC00;
	color: #FFFFFF;	
	}
#poweredbyjugem, #poweredbyjugem a	{
	font-weight: bold; color: #26A3FF; text-decoration: none;
	}
.space	{
	font-size: 1px;
	}
/*全体の設定 おしまい*/

/*ブログタイトル部分の設定 はじめ*/
#blog_title_border	{
	width: 100%;
	height: 130px;
	background-color: #FF9900;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358137.png);
	background-position: left bottom;
	background-repeat: repeat-x;
	padding-top: 45px;
	}
#blog_title_text	{
	color: #FF6600;
	text-shadow: #FF9900 0px 1px 7px;
	text-align: center;
	font-size: 40px;
	font-weight: bold;
	line-height: 60px;
	width: 100%;
	height: 60px;
	background-color: #EAEAEA;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358139.gif);
	overflow: hidden;
	}
#blog_title_text a:link, #blog_title_text a:visited, #blog_title_text a:hover	{
	color: #FF6600;
	text-decoration: none;
	}
#blog_desc_text	{
	color: #333333;
	text-align: center;
	font-size: 12px;
	line-height: 20px;
	width: 100%;
	height: 20px;
	background-color: #FFFFFF;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358138.gif);
	}
/*タイトル部分の設定 おしまい*/

#separator	{
	width: 100%;
	height: 20px;
	background-color: #FFCC00;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358140.gif);
	}

#wrapper	{
	width: 100%;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080806_358740.gif);
	background-color: #eaeaea;
	}
#content_center	{
	width: 810px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	}

/*記事部分の設定 はじめ*/

.sequel	{
	text-align: center;
	font-size: 10px;
	}
.sequel a:link	{
	color: #FF9900;
	text-decoration: underline;
	}
.sequel a:visited	{
	color: #FF9900;
	text-decoration: underline;
	}
.sequel a:hover	{
	color: #FF9900;
	text-decoration: none;
	}

#entry	{
	margin-bottom: 10px;
	}
#entry_wrapper	{
	width: 400px;
	float: left;
	}

.entry_top	{
	width: 400px;
	height: 9px;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358141.png);
	}
.entry_center	{
	width: 390px;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 5px;
	border-left: #FF9900 1px solid;
	border-right: #FF9900 1px solid;
	background-color: #FFFFFF;
	}
.entry_bottom	{
	width: 400px;
	height: 6px;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358142.png);
	}

.entry_title	{
	padding-left: 12px;
	font-size: 14px;
	color: #FF9900;
	font-weight: bold;
	text-shadow: #FFEEBB 0px 1px 1px;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358143.gif);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
	-webkit-text-size-adjust: 150%
	}
.entry_title a:link, .entry_title a:visited	{
	font-size: 14px;
	color: #FF9900;
	text-shadow: #FFEEBB 0px 1px 1px;
	text-decoration: none;
	display: block;
	}
.entry_title a:hover	{
	font-size: 14px;
	color: #FFCC00;
	text-shadow: #DDDDDD 0px 1px 1px;
	text-decoration: none;
	display: block;
	}

.entry_date	{
	padding-left: 12px;
	font-size: 12px;
	color: #969696;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358143.gif);
	background-repeat: no-repeat;
	background-position: left top;
	}
.entry_date a:link, .entry_date a:visited	{
	color: #555555;
	text-decoration: none;
	}
.entry_date a:hover	{
	color: #777777;
	text-decoration: underline;
	}

.entry_desc	{
	margin-top: 5px;
	padding-left: 12px;
	font-size: 12px;
	color: #333333;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358144.gif);
	background-repeat: no-repeat;
	background-position: left top;
	-webkit-text-size-adjust: 150%
	}
.entry_desc a:link	{
	color: #FF9900;
	text-decoration: underline;
	}
.entry_desc a:visited	{
	color: #FF9900;
	text-decoration: underline;
	}
.entry_desc a:hover	{
	color: #FF9900;
	text-decoration: none;
	}

blockquote	{
	PADDING-LEFT: 10px;
	MARGIN-LEFT: 2px;
	MARGIN-BOTTOM: 5px;
	BORDER-LEFT: #ff8d0f 5px solid;
	color: #444444;
	font-size: 11px;
	background-color: #eaeaea;
	-webkit-text-size-adjust: 120%
	}
.pict	{
	padding: 5px;
	border-top: #eaeaea 1px solid;
	border-bottom: #DDDDDD 1px solid;
	border-left: #eaeaea 1px solid;
	border-right: #eaeaea 1px solid;
	}

.entry_sequel	{
	padding-top: 10px;
	padding-left: 12px;
	font-size: 12px;
	color: #333333;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358145.gif);
	background-repeat: no-repeat;
	background-position: 3px top;
	-webkit-text-size-adjust: 150%
	}
.entry_sequel a:link	{
	color: #FF9900;
	text-decoration: underline;
	}
.entry_sequel a:visited	{
	color: #FF9900;
	text-decoration: underline;
	}
.entry_sequel a:hover	{
	color: #FF9900;
	text-decoration: none;
	}

.entry_property	{
	margin-top: 10px;
	padding-left: 12px;
	font-size: 10px;
	color: #333333;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358143.gif);
	background-repeat: no-repeat;
	background-position: left top;
	}
.entry_property_text	{
	color: #969696;
	padding-left: 1px;
	padding-right: 1px;
	border-right: #333333 1px solid;
	}
.entry_property_text a:link, .entry_property_text a:visited	{
	color: #969696;
	text-decoration: underline;
	}
.entry_property_text a:hover	{
	color: #333333;
	background-color: #CCCCCC;
	text-decoration: none;
	}

/*記事部分の設定 おしまい*/

/*プロフィールの設定 はじめ*/

.profile_name	{
	font-size: 25px;
	font-weight: bold;
	color: #FF9900;
	padding-left: 12px;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358143.gif);
	background-repeat: no-repeat;
	background-position: left top;
	}

/*プロフィールの設定 おしまい*/

/*コメント・トラックバックの設定 はじめ*/

.comment_top	{
	width: 400px;
	height: 9px;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358154.png);
	}
.comment_center	{
	width: 390px;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 5px;
	border-left: #BCFF01 1px solid;
	border-right: #BCFF01 1px solid;
	background-color: #FFFFFF;
	}
.comment_bottom	{
	width: 400px;
	height: 6px;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358164.png);
	}

.comment_center a:link, .comment_center a:visited	{
	color: #99CC00;
	text-decoration: underline;
	}
.comment_center a:hover	{
	color: #99CC00;
	text-decoration: none;
	}
.comment_title	{
	color: #99CC00;
	font-size: 24px;
	font-weight: bold;
	padding-left: 12px;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358143.gif);
	background-repeat: no-repeat;
	background-position: left top;
	margin-bottom: 10px;
	}
.comment_posts_sent	{
	padding-left: 12px;
	margin-bottom: 10px;
	font-size: 12px;
	color: #969696;
	font-weight: bold;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358143.gif);
	background-repeat: no-repeat;
	background-position: left top;
	}
.comment_entry	{
	padding-left: 12px;
	margin-bottom: 14px;
	font-size: 10px;
	color: #969696;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358165.gif);
	background-repeat: no-repeat;
	background-position: 3px top;
	}
.comment_property	{
	font-size: 12px;
	}
.comment_post_form	{
	font-size: 10px;
	color: #969696;
	}
.comment_post_form_left	{
	text-align: right;
	width: 180px;
	float: left;
	}
.comment_post_form_left input	{
	width: 100px;
	}

.caution	{
	color: #FF9900;
	padding-left: 12px;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358243.gif);
	background-repeat: no-repeat;
	background-position: left top;
	}

.comment_post_form_right	{
	text-align: left;
	padding-left: 5px;
	float: left;
	}
.comment_post_form_right textarea	{
	width: 190px;
	height: 50px;
	}
.comment_post_send	{
	clear: left;
	width: 100%;
	text-align: center;
	}
.comment_post_send input	{
	margin-top: 5px;
	font-size: 12px;
	background-color: #99CC00;
	color: #FFFFFF;
	font-weight: bold;
	width: 90%;
	}
/*コメント・トラックバックの設定 おしまい*/

/*コントロールバー (カレンダーがある列) の設定 はじめ*/
#controlbar_wrapper	{
	width: 200px;
	float: left;
	}
.controlbar_top	{
	width: 200px;
	height: 6px;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358253.png);
	}
.controlbar_center	{
	width: 190px;
	padding-left: 4px;
	padding-right: 4px;
	border-left: #FFFF00 1px solid;
	border-right: #FFFF00 1px solid;
	background-color: #FFFFFF;
	}
.controlbar_center a:link, .controlbar_center a:visited	{
	color: #CC9900;
	text-decoration: underline;
	}
.controlbar_center a:hover	{
	color: #CC9900;
	text-decoration: none;
	}
.controlbar_bottom	{
	width: 200px;
	height: 6px;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358254.png);
	}
.controlbar_title	{
	color: #FF9900;
	padding-left: 12px;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080804_358243.gif);
	background-repeat: no-repeat;
	background-position: left top;
	}

.controlbar_space	{
	margin-bottom: 10px;
	padding-left: 12px;
	}
.controlbar_space_list	{
	margin-bottom: 10px;
	}
.controlbar_space_txcenter table	{
	margin-left: auto;
	margin-right: auto;
	}
.controlbar_space_list ul	{
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
.select li	{
	margin: 0;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 0px;
	padding-left: 15px;
	list-style-type: none;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080805_358303.gif);
	background-position: 5px 5px;
	background-repeat: no-repeat;
	}
.select li a:link, .select li a:visited	{
	color: #555555;
	text-decoration: none;
	list-style-type: none;
	}
.select li a:hover	{
	color: #99CC00;
	text-decoration: none;
	list-style-type: none;
	}
.select li a:active	{
	color: #6C9200;
	text-decoration: none;
	list-style-type: none;
	}

.cell, .cell_sat	{
	width: 20px;
	height: 20px;
	background-color: #EEEEEE;
	line-height: 20px;
	}
.cell a:link, .cell a:visited	{
	width: 20px;
	height: 20px;
	color: #FFFFFF;
	background-color: #FF9900;
	text-decoration: none;
	display: block;
	}
.cell a:hover	{
	width: 20px;
	height: 20px;
	color: #555555;
	text-decoration: none;
	background-color: #CCCCCC;
	}
.cell a:active	{
	width: 20px;
	height: 20px;
	color: #333333;
	text-decoration: none;
	background-color: #AAAAAA;
	}
.cell_sun	{
	color: #CC4D00;
	width: 20px;
	height: 20px;
	background-color: #EEEEEE;
	}

/*コントロールバーの設定 おしまい*/

/*お気に入りバー(3列目)の設定 はじめ*/
#favoritebar_wrapper	{
	width: 200px;
	margin-left: 10px;
	float: left;
	}

.favoritebar_top	{
	width: 200px;
	height: 6px;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080806_358771.png);
	}
.favoritebar_center	{
	width: 190px;
	padding-left: 4px;
	padding-right: 4px;
	border-left: #C3FF01 1px solid;
	border-right: #C3FF01 1px solid;
	background-color: #FFFFFF;
	}
.favoritebar_bottom	{
	width: 200px;
	height: 6px;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080806_358773.png);
	}
.favoritebar_title	{
	color: #99CC00;
	padding-left: 12px;
	background-image: url(http://img-cdn.jg.jugem.jp/b2e/378279/20080806_358776.gif);
	background-repeat: no-repeat;
	background-position: left top;
	}

/*お気に入りバーの設定 おしまい*/

/*フッターの設定 はじめ*/

#footer	{
	padding-top: 10px;
	width: 100%;
	background-color: #FFFFFF;
	color: #7F7F7F;
	}
#footer a:link, #footer a:visited	{
	color: #7F7F7F;
	text-decoration: underline;
	}
#footer a:hover	{
	background-color: #7F7F7F;
	color: #FFFFFF;
	text-decoration: none;
	}
#footer a:active	{
	background-color: #666666;
	color: #FFFFFF;
	text-decoration: none;
	}
#footer_contents	{
	width: 810px;
	margin-left: auto;
	margin-right: auto;
	}

#navigation	{
	width: 400px;
	text-align: center;
	margin-bottom: 15px;
	}

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