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

ホーム

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

テンプレート名 : osan

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" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<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>
</head>

<div id ="wrapper">

<div id="entry">
	<h5>三重殺 フォト劇場</h5>
	
	<div class="entry">
			<div class="entry-body">{entry_title}{entry_description}</div>
			<div class="entry-t">{entry_date}{entry_time}</div>
	</div>
	{trackback_auto_discovery}
	
	
	
	<div class="page-navi">
			{prev_page_link}&nbsp;{page_now}/{page_num}PAGES&nbsp;{next_page_link}
	</div>
	
	</div>

<div id="header">
		<div id="score">
			
			
			{freespace_contents1}
			
			<div class="next">
			
			{freespace_contents4}
			
			</div>
		</div>
		
		<div id="maku">
			<h1><a href="/">「燃え尽きろ!!ブログテンプレート100本ノック!!」</a></h1>
		</div>
		
		<div id="sponsor">
			<div class="days"><a href="http://30d.jp" target="_blank" title="">オンラインアルバムは30days Album</a></div>
			<div class="cmsp"><a href="http://shop-pro.jp" target="_blank" title="">ショッピングカートの決定版 Color Me Shop Pro!</a></div>
			<div class="jugem"><a href="https://jugem.jp" target="_blank" title="">無料ブログはJUGEM</a></div>
		</div>
		
	</div>
	
	
	<div id="note">
		
		<div class="note_top">&nbsp;</div>
		<div id="note_area">	
			<div class="exp">
				<h4>燃え尽きろ!!ブログテンプレート100本ノック!!とは</h4>
				<p>
				webデザイナー3名が、2008年7月19～21日の3日間で「JUGEMのテンプレートを100枚を制作する」という無謀な企画。<br />
				作成する内容は
				</p>

<ul>
				<li>PCテンプレート 50枚</li>
				<li>モバイルテンプレート 50枚</li>
				</ul>
				
				<p style="margin-bottom:20px;">の<span style="font-size:18px;font-weight:bolder;">合計100枚!!</span>。<br />出来上がったPCテンプレートは「<a href="https://jugem.jp/utf/" target="_blank">User Template File</a>」で、モバイルテンプレートは「公式テンプレート」でどんどん公開していきます！100枚も作れる自信は全くありませんが、ご期待下さい！そして助けてください！</p>

<h4> お産合宿とは？</h4>
				<p>
				「何かを生み出す、創り出すというのは開発者やデザイナーだけの特権なのか？」<br />
				世間一般で「クリエイター」とは、専門的な知識や技能を持っている人のことを指しますが、私たちpaperboy&co.が提供しているサー...<a href="http://www.paperboy.co.jp/next/osan2/">長いので続きは「お産合宿in福岡」のページへ！</a>
				</p>
			</div>
			<div class="ust">
				 
				<embed flashvars="autoplay=false&amp;brand=embed" width="400" height="320" allowfullscreen="true" allowscriptaccess="always" src="http://www.ustream.tv/flash/live/240777" type="application/x-shockwave-flash" /><a href="http://www.ustream.tv" style="padding:2px 0px 4px;width:400px;background:#FFFFFF;display:block;color:#000000;font-weight:normal;font-size:10px;text-decoration:underline;text-align:center;" target="_blank">Broadcast by Ustream.TV</a>

</div>
		</div>

<img src="http://3out.heteml.jp/osan/toshiya/img/osan/member.jpg" alt="メンバー紹介" border="0" usemap="#Map" />
		<map name="Map" id="Map"><area shape="rect" coords="826,-7,906,54" href="http://logpi.jp/" />
		
		<div id="logpi">		
			<div class="third">
			<img src="http://3out.heteml.jp/osan/toshiya/img/osan/toshi.gif" />
			<p class="profile"><a href="https://jugem.jp" target="_blank">JUGEM</a>と<a href="http://30d.jp/" target="_blank">30days Album</a>を担当しているWEBデザイナー(28才・男)。企画を思いついた張本人だが、一人では辛すぎる企画だと判断し2人を引きずり込んだ。</p>
			<script type="text/javascript" src="http://logpi.jp/pplog/badge.js" charset="utf-8"></script>
			</div>
			
			<div class="second">
			<img src="http://3out.heteml.jp/osan/toshiya/img/osan/spiro.gif" />
			<p class="profile"><a href="https://jugem.jp" target="_blank">JUGEM</a>を担当しているWEBデザイナー(29才・男)。「2泊3日で福岡に行ける」という甘い言葉に騙され参加してしまった。ある意味被害者。</p>
			<script type="text/javascript" src="http://logpi.jp/megane/badge.js" charset="utf-8"></script>
			</div>	
			
			<div class="first">
			<img src="http://3out.heteml.jp/osan/toshiya/img/osan/maru.gif" />
			<p class="profile">「<a href="http://shop-pro.jp" target="_blank">カラーミーショップ！プロ</a>」を担当しているWEBデザイナー(30才・男)。企画内容のドＳっぷりにドＭの血が騒ぎ、居ても立ってもいられなくなり参加。</p>
			<script type="text/javascript" src="http://logpi.jp/maruyanma/badge.js" charset="utf-8"></script>
			</div>
		</div>
		
		
		<div class="note_bottom">&nbsp;</div>
	</div>

<div id="template_area">
		<div class="pc">
			<h4>PCテンプレート50本</h4>
			<p>作成したテンプレートは、<a href="https://jugem.jp/utf/" target="_blank">User Template File</a> で随時公開していきます。気に入ったテンプレートがあったら是非ダウンロードしてください！</p>
			
			{freespace_contents2}

</div>
		
		<div class="mobile">
			<h4>モバイルテンプレート50本</h4>
			<p>作成したモバイルテンプレートは随時公式テンプレートに公開していきます！ブログの管理者ページからダウンロードして使ってください！</p>
			
			{freespace_contents3}

</div>
	</div>

<div id="footer">
			<div id="copyright">{copyright}</div>
			<div id="link-poweredJugem"><a href="https://jugem.jp/" target="_blank">Powered by "JUGEM"</a></div>
	</div>

<div id="site-title">{blog_name}</h1>
	<div id="blog-description">{blog_description}</div>

{ad}

</div>

</body>
</html>

CSS

@charset "EUC-JP";

/* ----------------------------------------
 Template Name :
 Author : paperboy&co.
---------------------------------------- */

/* ----------------------------------------
 Property Reset
---------------------------------------- */
* {margin:0;padding:0;}
img {border:0;}

/* ----------------------------------------
 Font
---------------------------------------- */
body {
    font-size:100%;
    line-height:1.1em;
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    background: url(http://3out.heteml.jp/osan/toshiya/img/osan/bg.jpg);
    
}

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

/* ----------------------------------------
 Layout
---------------------------------------- */
#wrapper {
    width:925px;
    padding:0;
    margin:0;
    background:url(http://3out.heteml.jp/osan/toshiya/img/osan/main_bg.gif) repeat-y;
    font-size:0.8em;
}

#header {

}

#contents {
    width:760px;
}

#main {

}

#menu {
}

#footer {
    padding:15px;
		text-align: center;    
}

/* ----------------------------------------
 Header
---------------------------------------- */
#score {
    background:url(http://3out.heteml.jp/osan/toshiya/img/osan/score.jpg) no-repeat;
    width:900px;
    height:167px;
    position: relative;
}

#score table {
	position: absolute;
	width:520px;
	top:47px;
	left:200px;
}

#score table td {
	width:52px;
	height:42px;
	text-align: center;
	vertical-align: middle;
	font-size:20px;
	color:#FFF;
	font-weight:bolder;
}

#score table td.total {
	text-align: left;
	font-size:24px;
	color:#eaf721;
	width:49px;
	padding-left: 3px; 
}

#score .next {
	position: absolute;
	width:500px;
	color:#FFF;

position:absolute;
	left:330px;
	top:143px;
}

/* ---------- */

#maku {
    background:url(http://3out.heteml.jp/osan/toshiya/img/osan/maku.jpg) no-repeat;
    width:900px;
    height:110px;
  	position:relative;
}

#maku a {
	display:block;
	width:675px;
	height:90px;
	text-indent:-9999px;	
	position: absolute;
	top:0px;
	left:113px;
}

/* ---------- */

#sponsor {
    background:url(http://3out.heteml.jp/osan/toshiya/img/osan/sponsor.jpg) no-repeat;
    width:900px;
    height:176px;
  	position:relative;
}

#sponsor .days a {
	display:block;
	width:224px;
	height:74px;
	text-indent:-9999px;	
	position: absolute;
	top:35px;
	left:56px;
}

#sponsor .cmsp a {
	display:block;
	width:322px;
	height:48px;
	text-indent:-9999px;	
	position: absolute;
	top:51px;
	left:305px;
}

#sponsor .jugem a {
	display:block;
	width:146px;
	height:49px;
	text-indent:-9999px;	
	position: absolute;
	top:47px;
	left:665px;
}

/* ---------- */

/* ----------------------------------------
note
---------------------------------------- */

#note {
    background:url(http://3out.heteml.jp/osan/toshiya/img/osan/note_bg.jpg) repeat-y;
    width:900px;
}

.note_top {
    background:url(http://3out.heteml.jp/osan/toshiya/img/osan/note_top.jpg) no-repeat;
    width:900px;
    height:115px;

}

.note_bottom {
    background:url(http://3out.heteml.jp/osan/toshiya/img/osan/note_bottom.jpg) no-repeat;
    width:900px;
    height:42px;

}

/* note_area */
	#note #note_area:after {
			content:" ";
			display:block;
			height:0;
			visibility:hidden;
			clear:both;
	}
	
	#note #note_area {
		min-height:1px;
		width:840px;
		margin:0px auto;
		padding:20px;
		text-align: left;

}
	
	* html #note_area {
			 height: 1px;
			 /*￥*//*/
			 height: auto;
			 overflow: hidden;
			 /**/
	}

#note_area .exp {
		width:400px;
		float:left;
	}
	
	#note_area .exp h4 {
		color:#10305f;
		font-size:14px;
		margin-bottom:5px;
	}

#note_area .exp p {
		padding-left:10px;
		line-height:1.6;
	}
	
	#note_area .exp ul {
		padding-left:30px;
		margin:10px 0;
		font-weight: bolder;
	}

#note_area .ust {
		float:right;
		width:400px;
	}

/* ----------------------------------------
 logpiバッジ表示部分
---------------------------------------- */
	#note #logpi:after {
			content:" ";
			display:block;
			height:0;
			visibility:hidden;
			clear:both;
	}
	
	#note #logpi {
		min-height:1px;
		width:840px;
		margin:0px auto;
		padding:0 20px;
		text-align: left;
	}
	
	* html #note #logpi {
			 height: 1px;
			 /*￥*//*/
			 height: auto;
			 overflow: hidden;
			 /**/
	}

#logpi .third {
		width:240px;
		padding-top:10px;
		float:left;
	}

#logpi .second {
		width:240px;
		padding-top:10px;
		margin:0 60px;
		float:left;
	}

#logpi .first {
		width:240px;
		padding-top:10px;
		float:left;
	}

#logpi p.profile {
		font-size:12px;
		font-weight: bolder;
		margin:15px 0;
	}

/* バッジスタイル */

#logpi-badge {

}

#logpi-badge .badge-icon {
  text-align: center;
  display:none;
  }

#logpi-badge .badge-title {
  font-size: 12px;
  margin: 0 0 5px 0;
  text-align: center;
  display:none;
  }

#logpi-badge dl {
  padding: 0;
  }

#logpi-badge dt {
  margin: 0 0 5px 0;
  font-size: 11px;
  }
  #logpi-badge dt a {
    }
  #logpi-badge dt.mobile {

}
#logpi-badge dd {
  margin:0;
  padding: 0 0 5px 0;
  font-size: 12px;
  }
  #logpi-badge dd a {
    font-size: 10px;
    }
  #logpi-badge dd span.reply a {
    background: url(http://logpi.jp/image/reply-mark.gif) no-repeat;
    padding: 0 0 0 14px;
    font-size: 12px;
    }

#logpi-badge .powered {
  text-align: center;
	display: none;
  }

.pict {
	border:1px solid #000;
}

/* ----------------------------------------
 テンプレ一覧
---------------------------------------- */

#template_area:after {
			content:" ";
			display:block;
			height:0;
			visibility:hidden;
			clear:both;
	}
	
#template_area {
		min-height:1px;
		width:880px;
		margin:0px auto;
		padding-top:20px;
		text-align: left;
	}
	
	* html #template_area {
			 height: 1px;
			 /*￥*//*/
			 height: auto;
			 overflow: hidden;
			 /**/
	}

#template_area .pc {
		width:440px;
		float:left;
	}

#template_area .mobile {
		width:440px;
		float:left;
	}

.mobile img {
width:80px;
}

#template_area h4 {
	margin-bottom:10px;
	font-size:16px;
	font-weight: bolder;

}

#template_area p {
    margin-bottom:10px;
	 	padding:0 15px 0 0;
 }

/* サイトタイトル */
#site-title {
    font-size:16px;
    line-height:1em;
    margin-bottom:10px;
    display:none;
}

#blog-description {
    font-size:10px;
    line-height:1em;
    display:none;
}

#entry {
	position:absolute;
	top:10px;
	left:935px;
	width:176px;
	color:#FFF;
	line-height: 1.4;
}

#entry a {
	color:#FFF;
}

.entry {
	border-bottom:1px solid #CCC;
	margin-bottom:20px;
}

.entry-t {
	font-size:10px;
}

#entry h5 {
	margin-bottom:10px;
	background:#000;
	color:#FFF;
	padding:3px;
}

/* ----------------------------------------
 Clear
---------------------------------------- */
/* br.clear */
br.clear {
    line-height:0px;
    font-size:0px;
    height:0px;
    clear:both;
}

/* clearfix */
.clearfix:after {
    content:" ";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}

.clearfix {
	min-height:1px;
	width:690px;
	margin:0px auto;
	text-align: left;
	background:#FFF;
}

* html .clearfix {
     height: 1px;
     /*￥*//*/
     height: auto;
     overflow: hidden;
     /**/
}

.clear {
color:#FF0000;
}

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