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

ホーム

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

テンプレート名 : osoranoue

HTML・CSSをコピーして使う

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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 name="keywords" content="" />
<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}" />
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<script type="text/javascript">
<!--

iro="#E8F6FE";
iro2="#FED6E6";
function MO(v){
    id="menu"+v; id2="box"+v;
    if(document.all){
        obj=document.all[id].style;
        obj2=document.all[id2].style;
    }else if(document.layers){
        obj=document.layers[id];
        obj2=document.layers[id2];
    }else if(document.getElementById){
        obj=document.getElementById(id).style;
        obj2=document.getElementById(id2).style;
    }
    obj.visibility="visible";
    obj.backgroundColor=iro;
    obj2.backgroundColor=iro2;

}
function MT(v){
    id="menu"+v;
    id2="box"+v;
    if(document.all){
        obj=document.all[id].style;
        obj2=document.all[id2].style;
    }else if(document.layers){
        obj=document.layers[id];
        obj2=document.layers[id2];
    }else if(document.getElementById){
        obj=document.getElementById(id).style;
        obj2=document.getElementById(id2).style;
    }
    obj.visibility="hidden";
    obj2.backgroundColor="";
}

var bgCell1 = "#E8F6FE";
var bgCell2 = "#FED6E6";

//-->
</script>
</head>
<body>

<DIV ID="navi">
 
		    <BR>
<DIV class="blog_name">{blog_name}</DIV>
<DIV class="blog_description">{blog_description}</DIV>
		    
 </DIV>

<td id="box1" onMouseover="MO(1)" onMouseout="MT(1)" >
<font size="1">category</font>	
        <div class="left">
		<div id="menu1" style="position:absolute;visibility:hidden;">
		<DIV class="margin"> 
<div onMouseOver="mouseOver(this)" onMouseOut="mouseOut(this)" onClick="clkC(this.innerHTML)">
<DIV class="margin2">
	
		{category_list}
	
</div>
</div>           
		 </DIV>
         </div>
      </div>	  </td>
    <td id="box2" onMouseover="MO(2)" onMouseout="MT(2)">
	<font size="1">archives</font>
        <div class="left"><div id="menu2" style="position:absolute;visibility:hidden;">
            <DIV class="margin">
<div onMouseOver="mouseOver(this)" onMouseOut="mouseOut(this)" onClick="clkC(this.innerHTML)"><DIV class="margin2">
				
		<DIV>{archives_list}</DIV>
	
			</div></div>
			</DIV>
    </div></div>    </td>
	    <td  id="box3" onMouseover="MO(3)" onMouseout="MT(3)" >
	<font size="1">recent Posts</font>
        <div class="left"><div id="menu3" style="position:absolute;visibility:hidden;">
            <DIV class="margin">
<div onMouseOver="mouseOver(this)" onMouseOut="mouseOut(this)" onClick="clkC(this.innerHTML)"><DIV class="margin2">
				
		<DIV>{selected_entry_list}</DIV>
	
			</div></div>
			</DIV>
        </div></div>
    </td>
	    <td id="box4" onMouseover="MO(4)" onMouseout="MT(4)">
	<font size="1">recent comments</font>
        <div class="left"><div id="menu4" style="position:absolute;visibility:hidden;">
            <DIV class="margin">
<div  onMouseOver="mouseOver(this)" onMouseOut="mouseOut(this)" onClick="clkC(this.innerHTML)"><DIV class="margin2">
				
		<DIV>{recent_comment_list}</DIV>
	
			</div></div>
			</DIV>
        </div></div>
    </td>
	    <td id="box5" onMouseover="MO(5)" onMouseout="MT(5)">
	<font size="1">recent trackbacks</font>
        <div class="left"><div id="menu5" style="position:absolute;visibility:hidden;">
            <DIV class="margin">
<div  onMouseOver="mouseOver(this)" onMouseOut="mouseOut(this)" onClick="clkC(this.innerHTML)"><DIV class="margin2">
	
		<DIV>{recent_trackback_list}</DIV>
	
</div></div>
			</DIV>
        </div></div>
    </td>
	    <td id="box6" onMouseover="MO(6)" onMouseout="MT(6)">
	<font size="1">about</font>
        <div class="left"><div id="menu6" style="position:absolute;visibility:hidden;" >
            <DIV class="margin">
<div onMouseOver="mouseOver(this)" onMouseOut="mouseOut(this)" onClick="clkC(this.innerHTML)"><DIV class="margin2">
		
			
<p>&#10140; Blog Contributor</p>
{user_list}
	
	<p>&#10140; news feed</p>
		<ul>
		<li><a href="./?mode=rss">RSS1.0</a></li>
		<li><a href="./?mode=atom">Atom0.3</a></li>
		</ul>

{powered}
	
	<p> </p>
</div></div>
			</DIV>
        </div></div>
    </td>

</tr></table>

</DIV>

<div id="out-frame">

<p class="center">{prev_entry} | <a href="./">main</a> | {next_entry}</p>

<DIV>

<div class="main_title_chu">{entry_title}</div>
<div class="main_title_sho">| {entry_date} | {entry_time} | </DIV>
<DIV class="text">{entry_description}</DIV>

<DIV><a name="sequel"></a></DIV>
<DIV>{entry_sequel}</DIV>

<div class="main_title_sho">| {user_name} | {category_name} | {comment_num} | {trackback_num} | <a href="#top">▲</a> | </DIV>
<DIV class="text">{trackback_auto_discovery}</DIV>
</DIV>

<DIV >
<div class="main_title_chu">{comment_name}'s comment</div>
<div class="main_title_sho">| {comment_time} |</DIV>
<DIV class="text">{comment_description}</DIV>

</DIV>

<DIV>
<p class="main_title_chu">post a comment</p>
			<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}" class="form"/><br />
			<label for="email">email:</label><br>
			<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="form" /><br />
			<label for="url">url:</label><br>
			<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="form" /><br />
			<label for="description">comments:</label><br />
			<textarea tabindex="4" id="description" name="description" rows="10" cols="70" class="textarea"></textarea><br />
			<br />
			<input tabindex="5" type="submit" value="submit" onclick="javascript:setval();" class="button"/>
			<input type="checkbox" name="set_cookie" value="1" id="set_cookie" class="button">
			<label for="set_cookie">Cookieに登録</label>
			</form>
</DIV>

<DIV >
<DIV><a name="trackback"></a></DIV>
<p class="main_title_chu">url: {trackback_url}</p>
</DIV>
		
		<DIV >
<div class="main_title_chu">{trackback_title}</div>
<div class="main_title_sho"> | {trackback_blog_name} | {trackback_time} | </DIV>
<DIV class="text">{trackback_excerpt}</DIV>

</DIV>

<DIV >
<p class="main_title_chu">{profile_name}</p>
<DIV>{profile_description}</DIV>
</DIV>

<p class="center"><a href="{prev_page_url}">&lt;new</a>　|　<a href="./">top</a>　|　<a href="{next_page_url}">old&gt;</a></p>

<p class="main_title_chu">Search this site!!!</p>

<div id="roundsearchbox">
        <form method="get" action="">
        <div id="roundsearch">

</div>

<div ID="ue"></div>
<div ID="naka">
<DIV class="mkumo">
<div class="main_title_chupink">recommends</DIV>
<DIV><BR><center>{amazon_item}</center><BR></DIV>
</div>
</div>
<div ID="sita"></div>
	
<div ID="ue"></div>
<div ID="naka">
<DIV class="mkumo">

<DIV class="main_title_chupink">{freespace_title4}</DIV>
<DIV><BR>{freespace_contents4}<BR></DIV>

</div>
</div>
<div ID="sita"></div>


<div ID="ue"></div>
<div ID="naka">
<DIV class="mkumo">

<DIV class="main_title_chupink">{freespace_title5}</DIV>
<DIV><BR>{freespace_contents5}<BR></DIV>

</div>
</div>
<div ID="sita"></div>

</div>
<br class="cb">

</div>

<div ID="ue"></div>
<div ID="naka">
<DIV class="mkumo">
	<DIV class="main_title_chupink">calendar</div>
<center><DIV><BR>{calendar2}<BR></DIV></center>
	</div>
</div>
<div ID="sita"></div>

<div ID="ue"></div>
<div ID="naka">
<DIV class="mkumo">
	<DIV class="main_title_chupink">cool linx</div>
<DIV><BR>{link_list}<BR></DIV>
	</div>
</div>
<div ID="sita"></div>


<div ID="ue"></div>
<div ID="naka">
<DIV class="mkumo">
	
<DIV class="main_title_chupink">{freespace_title1}</div>
<DIV><BR>{freespace_contents1}<BR></DIV>
	
	</div>
</div>
<div ID="sita"></div>


	<div ID="ue"></div>
<div ID="naka">
<DIV class="mkumo">

<DIV class="main_title_chupink">{freespace_title2}</DIV>
<DIV><BR>{freespace_contents2}<BR></DIV>
		</div>
</div>
<div ID="sita"></div>

	
	<div ID="ue"></div>
<div ID="naka">
<DIV class="mkumo">

<DIV class="main_title_chupink">{freespace_title3}</DIV>
<DIV><BR>{freespace_contents3}<BR></DIV>
</div>
</div>
<div ID="sita"></div>
		
</div>

</div>

</DIV>
</DIV>

<DIV ID="bottom">
<DIV class="center">
{copyright} template design : <a href="http://detox.jugem.jp/">azusa</a>
</DIV>
</DIV>

{ad}
</body>

</html>

CSS

#top{
	background: no-repeat 0 0;
	display: block;
	width: 100%;
	height: auto;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: #FFFFFF;
border-top: solid 1px #CCCCCC;
border-bottom: solid 1px #CCCCCC;
}

.blog_name{
	font-size: 20px;
	font-family: "Gill Sans";
	color: #333333;
	font-weight: bold;
	margin-bottom: 5px;
	margin-right: 15px;
	margin-left: 15px;
}
.blog_description{
	font-size: 9px;
	font-family: "Gill Sans";
	color: #333333;
	margin-bottom: 5px;
	margin-right: 15px;
	margin-left: 15px;
}
#top2{
	background: no-repeat 0 0;
	display: block;
	width: 100%;
	height: auto;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: #FFFFFF;

}

#navi{
	display: block;
	width: 100%;
	height: 55px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: #FFFFFF;
	background-image: url("http://img-cdn.jg.jugem.jp/168/8282/20060424_174398.jpg");
	background-repeat: repeat-y;
}

#middle{
	width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: #FFFFFF;
	height: auto;
	font-family: "Trebuchet MS";
}

#bottom{
		background-image: url("http://img-cdn.jg.jugem.jp/168/8282/20060424_174398.jpg");
	background-repeat: repeat-y;
	display: block;
	width: 100%;
	height: auto;
	padding: 0px 0px 0px 0px;
	background-color: #FFFFFF;
	font-size: 9px;
	font-family: "Trebuchet MS";
	border-top: solid 1px #CCCCCC;
	border-bottom: solid 1px #CCCCCC;
	line-height: 15px;
}

BODY{
	color: #666666;
	font-size: 9px;
	font-family: "Trebuchet MS","ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-transform: capitalize;
}

.right{text-align:right;}

#margin1{margin : 10px 10px 10px 10px;}
#mm{margin : 10px 5px 10px 5px;}
#title_margin{
	margin : 10px 10px 10px 175px;
}

td{
	text-transform: capitalize;
	text-align:center;
	width:130px;
	font-family: "Trebuchet MS";
	color: #FB6688;
	line-height: 11px;
	background-color: #CCEBFD;
	border: solid 1px #F9ACBD;
	font-size: 9px;
}

.form{
	text-transform: capitalize;
	width:200px;
	font-family: "Trebuchet MS";
	color: #FB6688;
	background-color: #CCEBFD;
	border: solid 1px #F9ACBD;
	font-size: 9px;
	line-height: 170%;
	height: 15px;
}

.textarea{
	text-transform: capitalize;
	width:500px;
	font-family: "Trebuchet MS";
	color: #FB6688;
	background-color: #CCEBFD;
	border: solid 1px #F9ACBD;
	font-size: 9px;
	line-height: 170%;
}

.button{
	text-transform: capitalize;
	font-family: "Trebuchet MS";
	color: #FB6688;
	background-color: #CCEBFD;
	border: solid 1px #F9ACBD;
	font-size: 9px;
	line-height: 170%;
	height: 15px;
}

TABLE{
	width:910px;
	background-color: #FFFFFF;

}

.mkumo TABLE{
	width:180px;height: 180px;
	background-color: #FFFFFF;

}

.mkumo td{
	text-transform: capitalize;
	text-align:center;
	width:25px;
height: 25px;
	font-family: "Trebuchet MS";
	color: #FB6688;
	background-color: #CCEBFD;
	border-bottom: solid 1px #F9ACBD;
border-right: solid 1px #F9ACBD;
	font-size: 9px;
}

#menu1,#menu2,#menu3,#menu4,#menu5,#menu6{
	position:absolute;
	visibility:hidden;
	border:solid 1px #8BD3FC;
	overflow:hidden;
	width:150px;
	font-family: "Trebuchet MS";
	font-size: 9px;
	color: #333333;
	line-height: 13px;
	margin-top: 2px;
	margin-left: 10px;
	z-index: 999;
}
.left{
	text-align:left;

}

.center{
	text-align:center;

}

.bo{
	border-top: solid 1px #ACACAC;
	border-left: solid 1px #ACACAC;
	border-bottom: solid 1px #cccccc;
	border-right: solid 1px #cccccc;
}
.test{
	color: #ACACAC;
	font-family: "Trebuchet MS";
}

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

.margin5{
	margin: 5px 5px 5px 5px;
}

.margin2{
	margin: 0px 5px 0px 5px;
	text-transform: capitalize;
}

.mnav{
	margin: 20px 5px 20px 5px;
	text-transform: capitalize;
}

.mkumo{
	margin: 0px 35px 0px 35px;
	text-transform: capitalize;
}

td A:link { color: #333333;  	text-decoration: none;}
td A:visited { color: #333333;  	text-decoration: none;}
td A:active { color: #333333;}
td A:hover {color: #FB6688;
}

A:link { color: #FF6699;  	text-decoration: none;}
A:visited { color: #FF6699;  	text-decoration: none;}
A:active { color: #333333;}
A:hover {
	color: #FF1A5E;
}

td ul li{
	width: 145px;
	border-bottom: #8BD3FC 1px solid;
}

.pict{float:left;
	border-right-color: #D6D6D6;
	border-top-color: #EEEEEE;
	border-left-color: #EEEEEE;
	border-bottom-color: #D6D6D6;
	padding: 15px 15px 15px 15px;
	background-color: #F0F0F0;
	border-top-style: solid;
	border-top-width: 1px;
	border-right-style: solid;
	border-right-width: 1px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left-style: solid;
	border-left-width: 1px;
	margin: 0px 5px 0px 0px;
}

.amazon_pict{
	border-right-color: #D6D6D6;
	border-top-color: #EEEEEE;
	border-left-color: #EEEEEE;
	border-bottom-color: #D6D6D6;
	padding: 7px 7px 7px 7px;
	background-color: #F0F0F0;
	border-top-style: solid;
	border-top-width: 1px;
	border-right-style: solid;
	border-right-width: 1px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left-style: solid;
	border-left-width: 1px;
	margin: 8px 8px 8px 8px;
}

.text{
	line-height: 150%;
	text-indent: 1em;
	text-transform: capitalize;
	margin-top: 5px;
	margin-bottom: 5px;
}

.text2{
	line-height: 150%;
	text-indent: 1em;
	text-transform: capitalize;
	margin-top: 0px;
	margin-bottom: 0px;
}

#out-frame{
  width:1090px;
}
#left{
	width:820px;
	float:left;
}
#left-main{
	width:550px;
	float:right;
	background-color: #FFFFFF;

}
#left-left{
	width:270px;
	float:left;
	background-color: #FFFFFF;
	
}
#right{

width:270px;
	float:right;
	background-color: #FFFFFF;
}
.cb{
  clear:both;
}

ul{list-style: none;
	margin: 5px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
	font-family: "Trebuchet MS";
	line-height: 150%;
}

.main_title_dai{
	font-family: "Gill Sans";
	font-size: 14px;
	color: #454741;
	text-transform: capitalize;
	padding: 2px 5px 2px 5px;
	text-indent: 2em;
	font-weight: bold;
}
.main_title_chu{
	font-family: "Trebuchet MS";
	font-size: 12px;
	color: #7ECDFA;
	line-height: 18px;
	font-weight: bold;
	text-transform: capitalize;
	border-bottom: solid 1px #7ECDFA;
margin-top:20px;

}

.main_title_chupink{
	font-family: "Trebuchet MS";
	font-size: 10px;
	color: #FF99CC;
	line-height: 18px;
	font-weight: bold;
	text-transform: capitalize;
	text-align: right;
}
.main_title_sho{
	font-family: "Trebuchet MS";
	font-size: 9px;
	color: #333333;
	line-height: 16px;
	text-transform: capitalize;
	border-bottom: solid 1px #7ECDFA;
	border-color: #E9E9E9;
	margin-left: 5px;
	text-align: right;
}

.box{
	margin-bottom: 10px;
	border-top: solid 1px #CCEBFD;
	border-bottom: solid 1px #CCEBFD;
	border-right: solid 1px #CCEBFD;
	border-left: solid 20px #CCEBFD;
	margin-top: 10px;
}

.entry_box{
	margin-bottom: 10px;
	border-top: solid 1px #DDDDDD;
	border-bottom: solid 1px #DDDDDD;
	border-right: solid 1px #DDDDDD;
	border-left: solid 20px #DDDDDD;
	margin-top: 10px;
}

#ue{
	background: transparent url("http://img-cdn.jg.jugem.jp/168/8282/20060424_174395.jpg") no-repeat 0 0;
	display: block;
	width: 262px;
	height: 116px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;

}

#uemar{
	margin-top: 63px;
	text-align: center;
}

#naka{
	background: transparent url("http://img-cdn.jg.jugem.jp/168/8282/20060424_174396.jpg") repeat-y 0 0;
	width: 262px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: "Trebuchet MS";
}
#sita{
	background: transparent url("http://img-cdn.jg.jugem.jp/168/8282/20060424_174397.jpg") no-repeat 0 0;
	display: block;
	width: 262px;
	height: 26px;
	padding: 0px 0px 0px 0px;
}

.linkright{
	text-align: right;
}

#roundsearchbox{margin-bottom: 50px;}
#roundsearch {
 width: 283px;
 height: 45px;
 float: left;
 overflow: hidden;
 background: url("http://img-cdn.jg.jugem.jp/168/8282/20060424_174399.jpg") top left no-repeat;
 position: relative;
}
#roundsearch input {
	FONT-SIZE: 10px;
	COLOR: #FB6688;
	FONT-FAMILY:Trebuchet MS,"Gill Sans";
	BACKGROUND: transparent;
	height: 15px;
	margin: 17px 0px 0px 53px;
	padding: 0px 0px 0px 0px;
	border: 0px;
	width: 215px;
	
}
.sbutton { float: left; }

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