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

ホーム

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

テンプレート名 : Stepup!

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

<body onload="javascript:initval();">
{gmo_header_src}

<div id="wrapper_body">
<div id="wrapper">
    
<a name="top" id="top"></a>
    

<div id="header">

<h1><a href="./">{blog_name}</a></h1>
<p>{blog_description}</p>

</div>

    
    
    <div id="content">
    
        
        <div id="main">
    
            
            <div class="entry_navi">
            {prev_entry} | <a href="./">main</a> | {next_entry} 
            </div>
            
    
    
    
            
            <div class="entry_area">
                <h3>{entry_title}</h3>
    
    
                <div class="entry">
                <div class="entry_love">{love}</div>
                {entry_description}
                <a name="sequel"></a>
                {entry_sequel}<br />
   <ul class="state">
			<li>{entry_date}</li>
			<li>{category_name}</li>
			<li>{entry_time}</li>
			<li>{comment_num}</li>
			<li>{trackback_num}</li>
			<li>{pookmark_link}</li>
			<li>{logpi_link}</li>
			<li>by {user_name}</li>
			</ul>
                </div>
                <br class="clear" />
                
    
       
                {trackback_auto_discovery}
            </div>
            
    
            
            <a name="comments" id="comments"></a>
            <div class="entry_area">
                <dl id="com_area">
                <dt class="title">コメント</dt>
                
                <dt class="com_desc">{comment_description}</dt>
                <dd>
                    <ul>
                    <li>{comment_name}</li>
                    <li>{comment_time}</li>
                    </ul>
                </dd>
                
                </dl>
            </div>
            
            <div class="entry_area">
                <dl id="com_form">
                <dt class="title">コメントする</dt>
                <dd>
                <form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
                <input type="hidden" name="entry_id" value="{entry_id}" class="input" />
                
                <label for="name">name:</label><br/>
                <input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" class="input" /><br />
                
                <label for="email">email:</label><br>
                <input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="input" /><br />
                
                <label for="url">url:</label><br>
                <input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="input" /><br />
                
                <label for="description">comments:</label><br />
                <textarea tabindex="4" id="description" name="description" rows="5"></textarea><br />
                
                <input tabindex="5" type="image" src="./template/stepup/submit.gif" style="padding-bottom:10px;" value="コメント送信" /><br />
                <input type="checkbox" name="set_cookie" value="1" id="set_cookie"><label for="set_cookie">入力情報を登録しますか？</label>
                
                
                
                </form>
                </dd>
                </dl>
            </div>
            
    
    
            
            <a name="trackback" id="trackback"></a>
            <div class="entry_area">
                <dl id="tb_form">
                <dt class="title">この記事のトラックバックURL</dt>
                <dd><input type="text" value="{trackback_url}" class="input" /></dd>
                </dl>
            </div>
    
            <div class="entry_area">
                <dl id="tb_area">
                <dt class="title">トラックバック</dt>
                
                <dt class="tb_title">{trackback_title}</dt>
                <dd>{trackback_excerpt}</dd>
                <dd class="tb_state">
                    <ul>
                        <li>{trackback_blog_name}</li>
                        <li>{trackback_time}</li>
                    </ul>
                </dd>
                
                </dl>
            </div>
            
    
    
    
                
                <div class="entry_area">
                    <dl id="profile_area">
                    <dt class="title">プロフィール</dt>
                    </dl>
                <div style="background:#fff;padding-bottom:20px;">
                <p class="txt_bold" style="padding-left:20px;">{profile_name}</p>
                    <p style="padding-left:20px;">{profile_description}</p>
                </div>
                </div>
                
                
    
        </div>
        
        
            
	<div id="side">

<div class="side_header">
   
   
			<dl>
			<dt>PR</dt>
			<dd><div align="center">
			{ad}
   </div>
			</dd>
			</dl>

<dl>
			<dt>calendar</dt>
			<dd class="calendar">
			{calendar}
			</dd>
			</dl>

<dl>
			<dt>{freespace_title1}</dt>
			<dd>
			{freespace_contents1}
			</dd>
			</dl>

<dl>
			<dt>{freespace_title2}</dt>
			<dd>
			{freespace_contents2}
			</dd>
			</dl>

<dl>
			<dt>{freespace_title3}</dt>
			<dd>
			{freespace_contents3}
			</dd>
			</dl>
			
			
			
			<dl>
			<dt>{freespace_title4}</dt>
			<dd>
			{freespace_contents4}
			</dd>
			</dl>
			
			
			
			<dl>
			<dt>{freespace_title5}</dt>
			<dd>
			{freespace_contents5}
			</dd>
			</dl>

<dl>
			<dt>selected entries</dt>
			<dd>
			{selected_entry_list}
			</dd>
			</dl>
			
			
			
			
			<dl>
			<dt>categories</dt>
			<dd>
			{category_list}
			</dd>
			</dl>

<dl>
			<dt>archives</dt>
			<dd>
			{archives_list}
			</dd>
			</dl>

<dl>
			<dt>recent comment</dt>
			<dd>
			{recent_comment_list}
			</dd>
			</dl>

<dl>
			<dt>recent trackback</dt>
			<dd>
			{recent_trackback_list}
			</dd>
			</dl>

<dl>
			<dt>recommend</dt>
			<dd><div align="center">
			{amazon_item}
   </div>
			</dd>
			</dl>

<dl>
			<dt>links</dt>
			<dd>
			{link_list}
			</dd>
			</dl>

<dl>
			<dt>profile</dt>
			<dd>
			{user_list}
			</dd>
			</dl>

<dl>
			<dt>search this site.</dt>
			<dd>
			<form method="get" action="./">
            <table cellpadding="0" cellspacing="0" border="0">
            <tr valign="middle">
			<td><input id="search" name="search" size="20" style="width:110px" class="search" /></td>
			<td><input type="image" src="./template/stepup/search.gif" alt="search this site." value="Search" style="padding:0 0 5px 10px;" /></td>
			</tr>
            </table>
            </form>
			</dd>
			</dl>

<dl>
			<dt>others</dt>
			<dd>
			<ul>
            
			<li><a href="./admin/">管理者ページ</a></li>
			<li><a href="./?mode=rss">RSS1.0</a></li>
			<li><a href="./?mode=atom">Atom0.3</a></li>
			</ul>
			</dd>
			</dl>

<dl>
			<dt>mobile</dt>
			<dd><div align="center">
			{site_qrcode}
			</div></dd>
			</dl>

<dl>
			<dt>powered</dt>
			<dd>
			{powered}
			</dd>
            <dd><a href="http://stepup-j.jugem.jp/" target="_blank">JUGEMのブログカスタマイズ講座</a></dd>
			</dl>

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

<br class="clear" />
    
        <div id="page_area">
            
            <div class="page_navi" style=" ">{prev_page_link} | {page_now}/{page_num}PAGES | {next_page_link}</div>
            
            <div class="page_top"><a href="#top">このページの先頭へ▲</a></div>
        
        
        <br class="clear" />
        </div>
    
            
        </div>
        
    
    
        
    
    </div>
    </div>
    
    
    
    </body>
    </html>

CSS

* {
margin: 0;
padding: 0;
}

html {
	color: #333;
	font: small/1.5em "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Osaka", "Verdana", sans-serif;
}

body {
	background:#fff;
}

/* =================================== */
/* レイアウトの設定 */
/* =================================== */

/* 全体を囲うblock */
#wrapper_body {
	padding:0;	
}

#wrapper {
	width: 950px;
	margin: 0 auto;
	background:#e0dfd5 url(./template/stepup/main_image.gif) center top no-repeat;
}

#header {
	height:220px;
}

/* #main,#side用のblock */
#content {
	width: 850px;
	margin: 0 auto;
	padding-bottom:20px;
}

#content #main {
	float:left;
	width: 600px;
}

#content #side {
	float:right;
	width: 230px;
	}

/*ページ送り*/
#page_area {
	margin:10px 0 0 0;
}

/* =================================== */
/* リンクカラーの設定 */
/* =================================== */

/* 全般 */
a 			{ color: #e7609e; text-decoration: underline; }
a:link		{ color: #e7609e; text-decoration: underline; }
a:visited	{ color: #2A2666; text-decoration: underline; }
a:active	{ color: #2A2666; text-decoration: none; }

/* ヘッダー */
#header a 			{ color: #172c79; text-decoration: none; }
#header a:link		{ color: #172c79; text-decoration: none; }
#header a:visited	{ color: #172c79; text-decoration: none; }
#header a:active	{ color: #172c79; text-decoration: none; }
#header a:hover		{ color: #172c79; text-decoration: none; background:none; }

/* サイドコンテンツ */
#side a 			{ color: #e7609e; text-decoration: none; }
#side a:link		{ color: #e7609e; text-decoration: none; }
#side a:visited		{ color: #e7609e; text-decoration: none; }
#side a:active		{ color: #e7609e; text-decoration: none; }
#side a:hover		{ color: #e7609e; text-decoration: none; background:#CCC;}

/* カレンダーcell */
.calendar .cell a 				{ color: #e7609e; text-decoration: none; background:#EFEFEF; display:block; height:100%; vertical-align:middle; padding-top:10px;}
.calendar .cell a:link			{ color: #e7609e; text-decoration: none; background:#EFEFEF; display:block; height:100%;}
.calendar .cell a:visited		{ color: #e7609e; text-decoration: none; background:#EFEFEF; display:block; height:100%;}
.calendar .cell a:active		{ color: #e7609e; text-decoration: none; background:#EFEFEF; display:block; height:100%;}
.calendar .cell a:hover			{ color: #26CFFF; text-decoration: none; background:#EFEFEF; display:block; height:100%;}

/* =================================== */
/* 装飾の設定 */
/* =================================== */

blockquote {
	border: 1px dotted #CCC;
	padding:0.2em;
	margin:10px;
}

.left {
	float: left;
}

.right {
	float: right;
}

.clear {
	clear			: both;
	font			: 0/0 sans-serif;
}

.submit {

}

/* =================================== */
/* #header */
/* =================================== */
#header h1 {
	padding: 110px 200px 0 370px;
	font-family:Geneva, Arial, Helvetica, sans-serif;	
	font-size:20px;
	color:#172c79;
}

#header p{
color:#172c79;
	padding: 20px 200px 0 400px;
}

/* =================================== */
/* #main */
/* =================================== */

/*エントリーナビゲーション*/
#main .entry_navi{
	padding-bottom:10px;
	text-align:center;
}

#main .entry_navi a{
	color:#182d79;
}

/* エントリー部分全体 */
#main .entry_area {
	width:600px;
	padding-bottom:30px;
}

/* エントリータイトル */
#main h3 {
    color:#d7477a;
	font-size:medium;
	height:45px;
	padding:45px 185px 0 85px;
	background:url(./template/stepup/entry_top_image.gif) center top no-repeat;
}

/* エントリー時刻 */
#main .entry_date {
	padding: 5px;
}

/* エントリー本文 */
#main .entry {
padding:20px;
background:#fff;
border-bottom:1px solid #182d79;
}

/* エントリー情報 */
#main ul.state li {
    display:inline;
	border-left:1px solid #999;
	padding-left:5px;
}

/* 最新の記事 */

#main div.latest_entry_title{
color:#d7477a;
   background:#fff;
  border-left:1px solid #182d79;
  border-right:1px solid #182d79;
  border-bottom:5px solid #182d79;
}

#main div.latest_entry_title ul{
   padding:0 20px;
   }

#main div.latest_entry_title li{
  list-style-type:none;
  margin-bottom:10px;
   }

/*コメント、TB、プロフィールタイトル*/
dl#com_area dt.title,
dl#com_form dt.title,
dl#tb_form dt.title,
dl#tb_area dt.title,
{
    color:#e7609e;
	border-bottom:1px dashed #e7609e;
	margin: 0 0 5px 0;
	font-weight:bolder;
	padding:5px 10px;;
	font-size:14px;

}

/*プロフィールタイトル*/
dl#profile_area dt.title

{   
    color:#e7609e;
	border-bottom:1px dashed #e7609e;

font-weight:bolder;
	font-size:14px;

height:45px;
	padding:45px 185px 0 85px;
	background:url(./template/stepup/entry_top_image.gif) center top no-repeat;

}
/* コメント本文 */
.com_desc {
 color:#666;
	padding: 0 10px;
}

/* コメントユーザー情報 */
dl#com_area dd {
	padding:5px 10px;
	margin: 5px 0 15px 0;
	color:#666;
	border-bottom:1px dashed #e7609e;
	text-align:right;
	font-size:0.8em;
}

dl#com_area dd ul {
	list-style-type:none;
}

dl#com_area dd li {
	display:inline;
	border-left:1px solid #666;
	padding-left:5px;
	color:#666;
}

/* コメントフォーム */
dl#com_form dd {
padding: 0 10px 10px;
color:#666;
}

dl#com_form dd input.input {
border:1px solid #CCC;
padding: 1px 0;
width:200px;
}

/* コメントフォーム textarea */
dl#com_form dd textarea {
border:1px solid #CCC;
width:300px;
margin: 0 0 10px 0;
}

/* TBフォーム */
dl#tb_form dd {
	padding: 0 10px 10px;
}

dl#tb_form dd input.input {
border:1px solid #CCC;
padding: 1px 0;
width:300px;
}

/* TBタイトル */
dl#tb_area dt.tb_title {
	padding: 0 10px;
}

/* TB本文 */
dl#tb_area dd {
	padding: 0 10px;
}

/* TBユーザー情報 */
dl#tb_area dd.tb_state {
	padding:5px 10px;
	margin: 5px 0 15px 0;
	text-align:right;
	font-size:0.8em;
}

.tb_state ul {
	list-style-type:none;
}

.tb_state li {
	display:inline;
	border-left:1px solid #666;
	padding-left:5px;
}

/* =================================== */
/* サイドコンテンツ */
/* =================================== */

#side dl.alt {
   display:none;
}

#side p.alt {
   display:none;
}

#side .side_header {
	padding:20px 0 0 0;
}

#side dl {
	margin-bottom:20px;
}

/* サイドタイトル */
#side dt {
 margin:5px auto;
	padding:5px;
	font-family:"Trebuchet MS", Trebuchet;
	font-weight:bolder;
	text-align:center;
	font-size:16px;
	background:#3076be;
	color:#fff;
	}
	
#side dd{
	padding:5px 0 0 0;
	line-height: 1.2em;
}

#side img{
  margin:5px 0 0 0;
  }

#side ul {
	margin-left:4px;
	list-style-type:none;
	}

#side li {
	margin: 3px 0 0 0;
	padding-left:8px;
	background:url(./template/stepup/side_disc.gif) no-repeat 0 8px;
	}

/* サイト内検索 */
#side input.search {
	border-left:1px solid #CCC;
	border-top:1px solid #CCC;
	border-right:1px solid #EFEFEF;
	border-bottom:1px solid #EFEFEF;
	padding: 1px 0;
		margin-bottom:5px;
}

/*カレンダー*/
.calendar {
	font-size: 12px;
}

.calendar_month {
font-family: "Verdana";
padding-top:10px;
color: #666666;
}

.cell {
width: 35px;
height: 25px;
background:#FCFCFC;
text-align:center;
vertical-align:middle;
color:#555;
}

/* =================================== */
/* ページ送り */
/* =================================== */

#page_area .page_navi {
	float:left;
	width:345px;
	}

#page_area .page_top {
	float:right;
	width:150px;
	text-align:right;
}

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