無料ブログ作成なら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="http://js.jugem.jp/prototype/1.6.0.3/prototype.js"></script>
<script type="text/javascript" src="http://js.jugem.jp/script.aculo.us/1.8.2/scriptaculous.js"></script>
<script type="text/javascript" src="http://js.jugem.jp/Lightbox/2.04/js/lightbox.js"></script>
<script type="text/javascript" src="./template/js/cookie.js"></script>
</head>

<table class="title" align="center">
	<tr>
		<td>
			
			<h1 class="site_title">{blog_name}</h1>
			<div class="titleInfo">{blog_description}</div>
			
		</td>
	</tr>
</table>

<table class="main" align="center">
	<tr>
		<td class="leftContents">
			<table class="leftContentsInner">
				<tr>
					<td class="leftContentsSpace"></td>
				</tr>
				<tr>
					<td>
						
						<div class="linktitle linktitleTop">{freespace_title1}</div>
						<div><div id="countdown"><span class="countdown">{freespace_contents1}</span></div></div>
						
						
						
						<div class="linktitle">カレンダー</div>
					</td>
				</tr>
				<tr>
					<td align="center">
						<div class="calendar">
							<table>
								<tr>
									<td class="sunday">日</td><td class="week">月</td><td class="week">火</td>
									<td class="week">水</td><td class="week">木</td><td class="week">金</td>
									<td class="saturday">土</td>
								</tr>
							</table>
							{calendar}
						</div>
						
					</td>
				</tr>
				<tr>
					<td>
						
						<div class="linktitle">{freespace_title2}</div>
						<div class="linktext02">{freespace_contents2}</div>
						
					</td>
				</tr>
				<tr>
					<td>
						
						
						<div class="linktitle">最近の記事</div>
						<div class="linktext">{selected_entry_list}</div>
						
						
						
						<div class="linktitle">最近のコメント</div>
						<div class="linktext leftWidthLimited">{recent_comment_list}</div>
						
						
						
						<div class="linktitle">最近のトラックバック</div>
						<div class="linktext">{recent_trackback_list}</div>
						
						
						
						<div class="linktitle">カテゴリ別</div>
						<div class="linktext">{category_list}</div>
						
						
						
						<div class="linktitle">月別</div>
						<div class="linktext">{archives_list}</div>
						
						
						
						<div class="linktitle">LINKS</div>
						<div class="linktext">{link_list}</div>
						
						
						
						<div class="linktitle">SPONSORED LINKS</div>
						{ad}
						
						
						
						<div class="linktitle">RECOMMEND</div>
						<div class="linktext">{amazon_item}</div>
						
						
						
						<div class="linktitle">{freespace_title4}</div>
						<div class="linktext02">{freespace_contents4}</div>
						
					</td>
				</tr>
				<tr>
					
					<td>
						<div class="linktitle">携帯バーコード</div>
					</td>
				</tr>
				<tr>
					<td align="center">
						<div class="linktext02">{site_qrcode}</div>
					</td>
					
				</tr>
				<tr>
					<td>
						
						<div class="linktitle">{freespace_title3}</div>
						<div class="linktext02">
							{freespace_contents3}
							
							
							<div class="other">
								{powered}
							</div>
							
							<div class="other">
								{license_banner} 
							</div>
							
							<form method="get" action="">
								<div class="search">Search this site.<br />
									<input id="search" name="search" size="20" style="width:140px" class="form" /><br/>
									<input type="submit" value="Search" class="button" />
								</div>
							</form>
							
						</div>
					</td>
				</tr>
			</table>
		</td>
		<td class="rightcontents">
			
			<div class="entry_navi">
				{prev_entry} | <a href="./">main</a> | {next_entry} 
			</div>
			
			
			
			<table class="entrytable">
				<tr>
					<td class="entry_title">{entry_title}</td>
					<td class="entry_date">{entry_year}年{entry_month}月{entry_day}日({entry_jpn_week})</td>
				</tr>
				<tr>
					<td colspan="2">
						<div class="entry">
							<div class="entry_body">{entry_description}</div>
							<a name="sequel"></a>
							<div class="entry_more">{entry_sequel}</div>
							
							<div class="entry_state">| {category_name} | {entry_time} | {comment_num} | {trackback_num} |<a href="#top">↑PAGE TOP</a></div>
						</div>
						{trackback_auto_discovery}
					</td>
				</tr>
			</table>
			
			
			
			<table class="entrytable">
				<tr>
					<td>
						<a name="comments"></a>
						<div class="entry">
							<div class="comment_title">コメント</div>
							
							<div class="entry_body">{comment_description}</div>
							<div class="comment_state">Posted By {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:400px;"></textarea><br /><br />
									<input tabindex="5" type="submit" value="(σ・∀・)σ送信" onclick="javascript:setval();" />
									<input type="checkbox" name="set_cookie" value="1" id="set_cookie">
									<label for="set_cookie">Cookieに登録</label>
								</form>
							</div>
						</div>
					</td>
				</tr>
			</table>
			
			
			
			
			<table class="entrytable">
				<tr>
					<td>
						<div class="entry">
							<div class="trackback_title">この記事のトラックバックURL</div>
							<div class="entry_body">{trackback_url}</div>
							<div class="trackback_title">トラックバック</div>
							
							<div class="entry_title">{trackback_title}</div>
							<div class="entry_body">{trackback_excerpt}</div>
							<div class="entry_state"> | {trackback_blog_name} | {trackback_time} | </div>
							
						</div>
					</td>
				</tr>
			</table>
			
			
			
			
			<table class="entrytable">
				<tr>
					<td>
						<div class="entry">
							<div class="profile_title">プロフィール</div>
							<div class="entry_title">{profile_name}</div>
							<div class="entry_body">{profile_description}</div>
						</div>
					</td>
				</tr>
			</table>
			
			
			
			<ul class="navi">
				<li>{prev_page_link}</li>
				<li>{page_now}/{page_num}PAGES</li>
				<li>{next_page_link}</li>
			</ul>
			
		</td>
	</tr>
</table>

<table width="740" align="center" class="footer">
	<tr>
		<td class="copyright">{copyright}</td>
	</tr>
</table>

</body>

{freespace_contents5}

</html>

CSS

/***************************************
 * ウズマスターの日々・スタイルシート
 * 2009/03/04 ウズマスターRYU
***************************************/

/**
 * タグの基本設定
 */
BODY {
	color: #000000;															/* 文字色*/
	font-size: none;														/* 文字の大きさ*/
	font-weight: nomal;														/* 文字の太さ*/
	font-style: none;														/* 文字のスタイル*/
	text-decoration;														/* 文字の装飾*/
	background: #FFFFFF;													/* 背景色*/
	background-image: url(http://img-cdn.jg.jugem.jp/6f5/1206715/20090302_851518.gif);	/* 背景画像*/
	background-repeat: repeat;												/* 背景画像のリピート*/
	background-position: none;												/* 背景画像の位置*/
	background-attachment: scroll;											/* 背景のスクロール*/
	margin: 0px;															/* マージン*/
	letter-spacing: 0em;
	/* font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅"; */
}

TABLE{
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
	margin: 0px;
	padding: 0px;
}

TR{
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
	margin: 0px;
	padding: 0px;
}

TD{
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
	margin: 0px;
	padding: 0px;
	/* border: solid 1px #000000; */
}

a:link,a:active,a:hover {
	color:#4169E1;
	text-decoration:underline;
}

BLOCKQUOTE {
	color: #006699;
	margin: 20px 10px 20px 10px;
	padding: 10px;
	border: 1px dotted #999999;
	border-width:	3px;
	border-color:	#ff6600;
	border-style:	double;
}

OBJECT {
	margin-bottom: 10px;
}

/**
 * タイトル設定
 */
table.title {
	background-image: url(http://img-cdn.jg.jugem.jp/6f5/1206715/20090302_851520.gif);
	background-repeat: no-repeat;
	width: 740px;
	height: 150px;
	margin-right : auto;
 	margin-left : auto
}

.site_title {
	font-family: "MS 明朝","ヒラギノ明朝 Pro W3",serif;
	font-size: 48px;
	font-weight: bolder;
	color: #FFFFFF;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 20px;
	margin-right: 10px;
	padding: 0px;
}
.site_title a,
.site_title a:link,
.site_title a:visited,
.site_title a:active,
.site_title a:hover {
	color: #FFFFFF;
	text-decoration:none;
}

.titleInfo {
	color: #FFFFFF;
	text-decoration:none;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 20px;
	margin-right: 10px;
	font-weight: bold;
}

/**
 * メインボディの設定
 */
table.main {
	width: 740px;
	margin-right : auto;
 	margin-left : auto
}

td.leftContents {
	width: 190px;
	vertical-align: top;
}

table.leftContentsInner {
	width: 100%;
	background: #FFFFFF;
}

td.leftContentsSpace{
	height: 10px;
}

td.rightcontents {
	text-align: right;
	vertical-align: top;
	margin-left:auto;
	margin-right:0px;}
}

ul {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 30px;
	margin-right: 0px;
}

.description {
	font-size: 12px;
	color: #465DAA;
	margin: 0px 0px 0px 300px;
}

.entrytable {
	width: 97%;
	margin-top: 10px;
	background: #FFFFFF;
	margin-left:auto;
	margin-right:0px;
}

.entry {
	margin: 0px;
	padding: 0px;
}

.entry_title {
	font-size: 20px;
	font-weight: bold;
	color: #FFFFFF;
	padding-top: 3px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 0px;
	margin: 0px;
	text-align: left;
	background: #4169E1;
}

.entry_date {
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	padding-top: 0px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 1px;
	margin: 0px;
	text-align: right;
	vertical-align: bottom;
	background: #4169E1;
}

.entry_body {
	font-size: 14px;
	line-height: 105%;
	color: #000000;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 1px;
	padding-bottom: 1px;
	margin: 0px;
	text-align: left;
}

.entry_author {
	font-size: 11px;
	color: #000000;
	text-align: right;
	margin: 0px 0px 5px 0px;
	padding-bottom: 5px;
	border-bottom: solid 1px #000000;
	text-align: left;
}

.entry_more {
	font-size: 12px;
	line-height: 150%;
	color: #000000;
	margin: 15px 0px;
	text-align: left;
}

.entry_state {
	font-size: 10px;
	color: #000000;
	margin-top: 0px;
	margin-bottom: 3px;
	margin-left: 3px;
	margin-right: 0px;
	text-align: left;
	clear: both;
}

.entry_navi{
	padding: 5px;
	font-size:12px;
	font-weight: bolder;
	text-align:center;
	margin-top: 10px;
}

.comment_title {
	font-size: 14px;
	font-weight: bolder;
	color: #666666;
	margin: 20px 0px 10px 0px;
	padding-bottom: 3px;
	border-bottom: 1px dotted #CCCCCC;
	text-align:left;
}

.comment_body {
	font-size: 14px;
	line-height: 105%;
	color: #000000;
	padding: 0px;
	padding-left: 5px;
	padding-right: 1px;
	padding-bottom: 1px;
	margin: 0px;
	text-align: left;
}

.comment_state {
	font-size: 10px;
	color: #000000;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 3px;
	margin-right: 5px;
	text-align: right;
	clear: both;
}

.trackback_title {
	font-size: 14px;
	font-weight: bolder;
	color: #666666;
	margin: 20px 0px 10px 0px;
	padding-bottom: 3px;
	border-bottom: 1px dotted #CCCCCC;
	text-align: left;
}

.profile_title {
	font-size: 14px;
	font-weight: bolder;
	color: #666666;
	margin: 20px 0px 10px 0px;
	padding-bottom: 3px;
	border-bottom: 1px dotted #CCCCCC;
	text-align:left;
}

.profile_message {
	font-size: 12px;
	text-align:left;
	color: #000000;
	margin:3px;
}

font.profile {
	font-size: 16px;
	font-weight: bolder;
}

.linktitle {
	font-weight: bolder;
	font-size: 11px;
	padding-left: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin-top: 10px;
	color: #0000CD;
	border-top: solid 2px #0000ff;
	border-bottom: solid 2px #0000ff;
}

.linktitleTop {
	margin: 0px;
}

.linktext {
	font-size: 10px;
	color: #666666;
	line-height: 170%;
	margin-top: 10px;
	margin-bottom: 5px;
	margin-left: 0px;
	margin-right: 10px;
	padding: 0px;
}

.linktext02 {
	font-size: 10px;
	color: #666666;
	line-height: 170%;
	margin-top: 10px;
	margin-bottom: 5px;
	margin-left: 0px;
	margin-right: 10px;
	padding: 0px;
}

.amazon{
	padding-left:20px;
}

#ad{
	padding-left:20px;
}

.search {
	font-size: 11px;
	color: #333333;
	line-height: 170%;
	margin: 20px 0px 5px 10px;
}

.search_box {
	margin: 0px 0px 5px 10px;
}

.copyright {
	font-size: 11px;
	color: #333333;
	text-align: center;
	background: #FFFFFF;
}

.calendar {
	width:140px;
	font-family: "Verdana";
	font-size: 10px;
	color: #666666;
	line-height: 170%;
	background: #FFFFFF;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px;
}

.today {
	background: #CCCCCC;
	padding: 1px;
}

.week {
	background: #FFFFFF;
	width:20px;
	height:20px;
	border: solid 1px #FFFFFF;
	font-weight: bold;
	color: #000000;
	text-align:center;
}

.sunday {
	background: #FFFFFF;
	width:20px;
	height:20px;
	border: solid 1px #FFFFFF;
	font-weight: bold;
	color: #DC143C;
	text-align:center;
}

.saturday{
	background: #FFFFFF;
	width:20px;
	height:20px;
	border: solid 1px #FFFFFF;
	font-weight: bold;
	color: #0000FF;
	text-align:center;
}

.cell {
	background: #FFEFD5;
	width:20px;
	height:20px;
	border: solid 1px #000080;
	color: #000000;
}

.cell a{
	font-weight: bold;
}

ul.navi {
	margin: 10px 0px;
	list-style: none;
	text-align:center;
}
ul.navi  li{
	display:inline;
	margin:0px 2px;
}

.center {
	text-align: center;
}

img.pict {
	width:	165px;
	height:	135px;
	float:	left;
	border: 2px;
	border-color: #0000CD;
	margin-top: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	margin-right: 10px;
}

img.vpict {
	width:	120px;
	height:	160px;
	float:	left;
	border: 2px;
	border-color: #0000CD;
	margin-top: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	margin-right: 10px;
}

table.footer {
	margin-top : 5px;
	margin-right : auto;
 	margin-left : auto
}
span.countdown{
	display:none;
}

div.scheduleFirst {
	font-size:15px;
	padding: 5px;
}

span.scheduleFirst {
	font-size:20px;
}

font.scheduleFirst {
	color: #FF0000;
	font-size:30px;
	font-weight:bolder;
}

.schedule {
	font-size:10px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 3px;
}

font.schedule {
	font-size:10px;
	color: #00008B;
	font-weight:bolder;
}

.other {
	padding-left:20px;
	padding-top:5px;
}

#countdown{
	height: 120px;
	font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
}

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://js.jugem.jp/Lightbox/2.04/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://js.jugem.jp/Lightbox/2.04/images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 20px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }
#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

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