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

ホーム

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

テンプレート名 : grunge

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 src="http://gooddesignweb.com/jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="http://gooddesignweb.com/jquerypngfix.js" type="text/javascript"></script>
</head>

<body>
<div id="container">

	<div id="header">
		
		<h1>{blog_name}</h1>
		<p class="description">{blog_description}</p>
		
                <div class="rss">
                <a href="http://creative-web.jugem.jp/?mode=rss"><img src="http://img-cdn.jg.jugem.jp/1ef/1256097/20090411_9440.jpg" title="rss feed" alt="rss feed" width="62" height="56" class="pict" /></a>
                </div>
                <div class="atom">
                <a href="http://creative-web.jugem.jp/?mode=atom"><img src="http://img-cdn.jg.jugem.jp/1ef/1256097/20090411_9441.jpg"  title="atom feed" alt="atom feed" width="53" height="56" class="pict" /></a>
                </div>
                
　　　　	<form method="get" action="./" id="searchform">
		<input type="text" id="s" name="search" size="20" value="Search..." onfocus="if(this.value=='Search...')this.value=''" onblur="if(this.value=='')this.value='Search...'" />
　　　　　　　　<input type="submit" value="Go" id="submit" class="bt" />
	</form>
        
	</div>

<div id="main">

<div id="entry">
		<div class="entry_navi"><strong>Page:</strong>&nbsp;{page_now}/{page_num}&nbsp;&nbsp;{prev_page_link}&nbsp;{next_page_link}</div>
		
		<div class="entry_navi"><strong>Entry:</strong>&nbsp;<a href="./">main</a>&nbsp;&nbsp;<a href="{next_permalink}">&lt;&lt;</a>&nbsp;<a href="{prev_permalink}">&gt;&gt;</a></div>

<div id="entry_title">{entry_title}</div>
		<div class="entry_date">{entry_date} | category:{category_name}</div>
		<div class="entry_body">
			{entry_description}
			
			<a name="sequel"></a>
			<div class="entry_more">
				{entry_sequel}
			</div>
		</div>
		<div class="entry_state">| {user_name} | {entry_time} | {comment_num} | {trackback_num} |</div>
	</div>
	{trackback_auto_discovery}

<div id="trackback">
	<a name="comments"></a>

<div class="tb_main_title">Comment</div>

<div class="tb">
			<div class="tb_body">{comment_description}</div>
			<div class="tb_state">Posted by: {comment_name}  |at: {comment_time}</div>
		</div>

<div class="formarea">
			<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
			<table width="450" border="0" cellspacing="0" cellpading="0" style="margin-left:5px;">
			<tr valign="top">
				<td width="200">
				<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:180px;" /><br />
				<label for="email">email:</label><br>
				<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" style="width:180px;" /><br />
				<label for="url">url:</label><br>
				<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" style="width:180px;" />
				</td>
				<td>
				<label for="description">comments:</label><br />
				<textarea tabindex="4" id="description" name="description" rows="7" cols="50" style="width:250px;"></textarea><br /><br />
				<input tabindex="5" class="bt" type="submit" value="コメント送信" onclick="javascript:setval();" />
				<input type="checkbox" name="set_cookie" value="1" id="set_cookie" style="border:none;">
				<label for="set_cookie">Cookieに登録</label>
			</td>
			</tr>
			</table>
			</form>
		</div>
	</div>

<div id="trackback">
	<a name="trackback"></a>

<div class="tb_main_title">Trackback</div>

<div class="tb">
			<div class="tb_title">{trackback_title}</div>
			<div class="tb_body">{trackback_excerpt}</div>
			<div class="tb_state">{trackback_blog_name} | at: {trackback_time}</div>
		</div>

<div id="entry">
		<div class="entry_navi"><strong>Profile</strong></div>
		<div class="entry_title">{profile_name}</div>
		<div class="entry_body">{profile_description}</div>
	</div>

</div>

<div id="side">
	<div class="l_sidebar">

<h2 id="category_title">カテゴリー</h2>
	{category_list}

<h2 id="archive_title">月別投稿</h2>
	{archives_list}

<h2 id="comment_title">最近のコメント</h2>
	<div class="comment">
	{recent_comment_list}
	</div>

<h2 id="trackback_title">Trackback</h2>
	<div class="comment">
	{recent_trackback_list}
	</div>
	
	
	
	<h2 id="calender_title">カレンダー</h2>
	<div class="calendar">
		{calendar}
	</div>
	
	
	
	<h2 id="sponsor_title">スポンサーリンク</h2>
        <div class="align_center">
	{ad}
        </div>

<h2 id="profile_title">Profile</h2>
	{user_list}
        
	
	
	<h2>{freespace_title1}</h2>
	{freespace_contents1}
	
	
	
	<h2>{freespace_title2}</h2>
	{freespace_contents2}
	
	
	
	<h2>{freespace_title3}</h2>
	{freespace_contents3}
	
	
        <div class="l_sidebar_bottom"></div>
	</div>

<h2 id="entries_title">最近の投稿</h2>
	{latest_entry_list}

<h2 id="links_title">Link</h2>
	{link_list}

<h2>{freespace_title4}</h2>
	{freespace_contents4}
	
	
	
	<h2>{freespace_title5}</h2>
	{freespace_contents5}

<h2 id="mobile_title">Mobile</h2>
        <div class="align_center">
	{site_qrcode}
        </div>
	
        </div>
</div>

<div id="footer">
        <div class="copyright">
        {copyright}　Design by <a href="./">Creative web</a>　｜　<a href="http://gooddesignweb.com/">Good Design Web</a>
        </div>
        <div class="meta">
        <a href="./admin/">ADMIN</a><br />
        {powered}
        </div>
</div>

</div>
</div>

</body>
</html>

CSS

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

body {
	color:#333;
	font-size: 12px;
	font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
        background: #fff url(http://img-cdn.jg.jugem.jp/1ef/1256097/20090412_13942.jpg) top center no-repeat;
	}

#container {
        width: 950px;
        margin: 0 auto;
}

#wrapper_body {
        margin: 0 auto;
        width: 950px;
        background: url(http://img-cdn.jg.jugem.jp/1ef/1256097/20090412_13926.jpg) repeat-y;
	line-height: 150%;
}

#wrapper_body table,td,tr,div { margin:0px; padding:0px;}

a:link	  {color: #768FBE; text-decoration: none;}
a:visited {color: #768FBE; text-decoration: none;}
a:active  {color: #768FBE; text-decoration: none;}
a:hover   {color: #4B69A0; text-decoration: underline;}

img { border: none;}

.align_center { text-align: center;}

#wrapper_body  img {
	padding: 1px;
	background: #FFF;
	border: 0px;
	}

#wrapper_body  a:hover img {
	padding: 1px;
	background: #ccc;
	}

#wrapper_body  li {
	list-style-type: none;
	margin-bottom:5px;
	}

/* ************************************************ 
 *	ページレイアウト
 * ************************************************ */

#header {
        width: 950px;
        height: 244px;
        margin: 0 auto;
        position: relative; 
 }

/*　メインカラムの幅　*/
#main { width: 500px; float: left; margin: 0 0 30px 0;}

/*　サイドバー全体の幅　*/
#side { width: 440px; margin: 0 0 30px 0; float: right;}

/*　サイドバー左側メニューの幅　*/
.l_sidebar { 
        width:230px; 
        float: left;
        margin-right: 10px;
        background: url(http://img-cdn.jg.jugem.jp/1ef/1256097/20090411_8477.jpg) repeat-y;
}

.l_sidebar_bottom {
        height: 50px; 
        background: url(http://img-cdn.jg.jugem.jp/1ef/1256097/20090412_14714.jpg) no-repeat;
}

/*　サイドバー右側メニューの幅　*/
.r_sidebar { 
        width:190px; 
        float: left;
}

/*　フッター　*/
#footer {
        clear: both;
        margin: 0 auto;
        width: 950px;
        height: 150px; 
        background: url(http://img-cdn.jg.jugem.jp/1ef/1256097/20090412_12994.jpg) no-repeat;
        position: relative;
}

/* ************************************************ 
 *	サイトタイトル
 * ************************************************ */

h1 {
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 20px;
}

#header h1 a {
        width: 165px;
        height: 80px;
        position: absolute;
        top: 15px;
        left: 20px;
        text-decoration: none; 
        color: #fff;
}

.description {
        position: absolute;
        left: 30px;
        top: 160px;
        color: #000;
}

#header .rss {
        position: absolute;
        left: 628px;
        bottom: 49px;
}
*:first-child+html #header .rss { bottom: 47px; left: 628px;}

#header .atom {
        position: absolute;
        left: 690px;
        bottom: 49px;
}
*:first-child+html #header .atom { bottom: 47px; left: 690px;}

/* 検索フォーム ---------*/
#searchform {
        width: 150px;
        height: 25px;
        position: absolute;
        bottom: 5px;
        right: 15px;
}
* html #searchform { bottom: -7px; }

#searchform br {
	display: none;
}

#searchform #s {
	width: 90px;
        height: 15px;
	padding: 2px 5px 0px 5px;
	color: #000;
	font-weight: normal;
        background: none;
        border: none;
        margin-top: 3px;
}

#searchform #submit {
	border: none;
	width: 40px;
	height: 20px;
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #000;
        font-size: 14px;
	vertical-align: middle;
        background: none;
        text-align:right;
        margin: -33px 0 0 5px;
}
* html #searchform #submit { margin: -25px 0 0 95px;}
*:first-child+html #searchform #submit { margin: -25px 0 0 95px;}

.bt{
        cursor: pointer;
}

/* ************************************************ 
 *	サイド
 * ************************************************ */

#side ul {
        list-style: none;
}

#side ul li {
        list-style: none;
        padding-left: 10px;
}

h2 {
	font-size: 13px;
	padding-top: 5px;
	margin-top: 20px;
	margin-bottom: 10px;
	}

.comment li{
	background:url(./template/cmsp-plain/img/disc.gif) no-repeat;
	background-position:0px 6px;
	text-indent:8px;
	line-height:130%;
	margin-bottom:5px;
	}

#category_title{
        height: 40px;
        background: url(http://img-cdn.jg.jugem.jp/1ef/1256097/20090411_9230.png) no-repeat;
        text-indent: -9999px;
}

#archive_title {
        height: 40px;
        background: url(http://img-cdn.jg.jugem.jp/1ef/1256097/20090411_9246.png) no-repeat;
        text-indent: -9999px;
}

#comment_title {
        height: 40px;
        background: url(http://img-cdn.jg.jugem.jp/1ef/1256097/20090411_9292.png) no-repeat;
        text-indent: -9999px;
}

#trackback_title {
        height: 40px;
        background: url(http://img-cdn.jg.jugem.jp/1ef/1256097/20090411_9303.png) no-repeat;
        text-indent: -9999px;
}

#calender_title {
        height: 40px;
        background: url(http://img-cdn.jg.jugem.jp/1ef/1256097/20090412_13576.png) no-repeat;
        text-indent: -9999px;
}

#sponsor_title {
        height: 40px;
        background: url(http://img-cdn.jg.jugem.jp/1ef/1256097/20090412_13586.png) no-repeat;
        text-indent: -9999px;
}

#profile_title {
        height: 40px;
        background: url(http://img-cdn.jg.jugem.jp/1ef/1256097/20090412_15802.png) no-repeat;
        text-indent: -9999px;
}

#entries_title {
        height: 30px;
        background: url(http://img-cdn.jg.jugem.jp/1ef/1256097/20090411_9256.png) no-repeat;
        text-indent: -9999px;
}

#links_title {
        height: 30px;
        background: url(http://img-cdn.jg.jugem.jp/1ef/1256097/20090411_9265.png) no-repeat;
        text-indent: -9999px;
}

#mobile_title {
        height: 30px;
        background: url(http://img-cdn.jg.jugem.jp/1ef/1256097/20090412_13551.png) no-repeat;
        text-indent: -9999px;
}

/* カレンダー ---------*/

.calendar {
	font-family: "Verdana";
	text-align:center;
	line-height: 140%;
	margin-bottom:10px;
	}

.calendar table {
	width:100%;
	margin:0px auto;
	text-align:center;
	}

.weekday { padding: 2px;}
.cell    { padding: 2px;}

.cell a:link {font-weight: bolder;}

/* ************************************************ 
 *	エントリー
 * ************************************************ */
#entry {
        padding-left: 5px;
	margin-top: 20px;
	margin-bottom: 10px;
}

.entry_navi {
	margin-bottom:20px;
	border-bottom:1px dotted #CCC;
	padding: 5px 0px;
}

.entry_state {
	text-align:right;
	margin-top:10px;
}

#entry_title {
        padding-left: 55px;
        height: 40px;
	margin-top:10px;
	font-size: 15px;
	font-weight:bolder;
        line-height: 40px;
        background: url(http://img-cdn.jg.jugem.jp/1ef/1256097/20090412_13469.png) center left no-repeat;
}

.entry_date {
        text-align: right;
}

.entry_body {
	margin:10px 0;
	line-height:170%;
}

.entry_body .emoji {
	display: inline;	
}

.entry_more {
	padding-top:10px;
}

blockquote {
	color: #333;
	border:1px solid #999;
	margin: 10px 5px;
	padding:0px 5px;
}

.pict { }

/* ------------------------------------- 
 *	コメント・トラックバック
 * ------------------------------------- */

#trackback { padding-top: 20px;padding-bottom:10px;}

#trackback .tb_main_title {
        text-align: center;
        width: 92%;
	font-weight: bolder;
	margin:0 0 20px 10px;
	border-bottom:2px solid #543030;
	padding: 5px 0px;
	}

#trackback .tb_url {
	font-size: 11px;
	padding: 5px 10px 5px 10px;
	}

#trackback .tb {
        width: 92%;
	margin: 0 0 10px 10px;
	border: 1px solid #CCC;
	}

#trackback .tb_title {
	font-weight: bold;
	padding: 5px 10px;
	}

#trackback .tb_body {
	line-height: 150%;
	padding: 5px 10px;
	}

#trackback .tb_state {
	border-top: 1px dotted #CCC;
	padding: 5px;
	text-align:right;
	}

#trackback .formarea {
        width: 474px;
        height: 265px;
	padding: 5px;
	background: url(http://img-cdn.jg.jugem.jp/1ef/1256097/20090413_17215.jpg) no-repeat;
	color:#000;
	margin:20px 0 0 10px; 
	}

#trackback .formarea input,textarea { border: 1px solid #333; }

#trackback .trckbackarea {
        width: 474px;
	padding: 5px;
	color:#000;
	margin:20px 0 0 10px; 
	}

#trackback .trckbackarea input { border: 1px solid #999; }

/* ************************************************ 
 *	フッター
 * ************************************************ */

#footer .copyright {
        width: 720px;
        position: absolute;
        top: 60px;
        left: 20px;
}

#footer .meta {
        width: 130px;
        position: absolute;
        top: 70px;
        right: 15px;
        line-height: 2.5;
}

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