無料ブログ作成なら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 rel="alternate" type="application/rss+xml" title="RSS" href="{site_rss}" />
<link rel="alternate" type="application/atom+xml" href="{site_atom}" />
<script type="text/javascript" src="./template/js/cookie.js"></script>
</head>

<body onload="javascript:initval();">
<a href="top" id="top"></a>
<div id="wrapper">
    <div id="header">
        
        <h2 id="site_title">{blog_name}</h2>
        <h3 class="description">{blog_description}</h3>
        
    
    <div class="header_navigation">
    <ul>
        
        <li><a href="./">TOP</a></li>
        <li><a href="./?pid=1">PROFILE</a></li>

</ul>
    </div>
    </div>

<div id="contents">
    <div id="contents_header"></div>
    	
        <div id="main">
            
            
            <div class="entry_box">
            <div class="entry_title">{profile_name}のプロフィール</div>
            <div class="entry_sub_title">こんな人が書いてます。</div>
            <div class="entry_body">{profile_description}</div>
            </div>
            
            
            
            <div class="entry_box">
            <h3 class="entry_title"><a href="{entry_permalink}">{entry_title}</a></h3>
            <h3 class="entry_sub_title">{entry_date}</h3>
            
            <div class="entry_body">{entry_description}</div>
            <div class="entry_more">{entry_sequel}</div>
            <div class="entry_category">Category : {category_name}　author : {user_name} 
</div>
            <div class="entry_state">{comment_num} | {trackback_num}</div> 
            </div>

<a name="comments"></a>
            <div class="comment_box">
            <div class="comment_title">comment</div>
            <div class="comment_sub_title">コメント</div>
            
            <div class="comment_name">{comment_name}</div> 
            <div class="comment_body">{comment_description}</div>
            <div class="comment_state">{comment_time}</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}" style="width:250px;" class="form_color" />
            <label for="name" class="comment_sub_title">::name</label>
            ::<br/>
            <input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" style="width:250px;" class="form_color" /><br />
            <label for="email" class="comment_sub_title">::email</label>
            ::<br>
            <input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" style="width:250px;" class="form_color" /><br />
            <label for="url" class="comment_sub_title">::url</label>
            ::<br>
            <input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" style="width:250px;" class="form_color" /><br />
            <label for="description" class="comment_sub_title">::comments</label>
            ::<br />
            <textarea tabindex="4" id="description" name="description" rows="10" cols="50" style="width:400px;" class="form_color"></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>
            
            
            <div class="trackback_box">
            <div class="trackback_title">trackback</div>
            <div class="trackback_sub_title">トラックバック</div>
            
            <div class="trackback_name">{trackback_title}</div> 
            <div class="trackback_body">{trackback_excerpt}</div>
            <div class="trackback_state">{trackback_blog_name} | {trackback_time}</div>
             
            </div>
            <div class="trackback_box">
            <div class="trackback_title">trackback URL </div>
            <div class="trackback_sub_title">トラックバックはこちらへ</div>
            <div class="trackback_body"><INPUT name="trackbackurl" type="text" value="{trackback_url}" size="70" /></div>
            </div>
            
            
            
            <div class="entry_navi">
            {prev_entry} | <a href="./">main</a> | {next_entry} 
            </div>
            
            
            
            <div class="page">{prev_page_link}  | {page_now}/{page_num}PAGES |  {next_page_link}</div>
            <div class="top"><a href="#top">▲このページの先頭へ</a></div>
            
            
        </div>
	    
        <div id="menu">
			<div id="menu_large">

<dl class ="menu_item">
				<dt class="menu_midashi"><img src="http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639992.jpg" alt="カテゴリー" /></dt>
				<dd>
				<div id="categorylist">{category_list}</div>
				</dd>
				</dl>

<dl class ="menu_item">
                <dt class="menu_midashi"><img src="http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639992.jpg" alt="プロフィール" /></dt>
                <dd>
                    {user_list}
                </dd>
                </dl>

<dl class ="menu_item">
                <dt class="menu_midashi"><img src="http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639997.jpg" alt="検索" /></dt>
                <dd>
                    <form method="get" action="">
                    <div class="search"><br />
                    <input id="search" name="search" size="20" style="width:140px" class="form_color" />
                    <input type="submit" value="Search" class="button" />
                    </div>
                    </form>
                </dd>
                </dl>
                
                
			
	
				
				
				<dl class ="menu_item">
				<dt class="menu_midashi"><img src="http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639993.jpg" alt="コメント" /></dt>
                    <dd>
<div id="commentlist">{recent_comment_list}</div>						
                    </dd>
				</dl>
				
				
	
	
				
				
				<dl class ="menu_item">
				<dt class="menu_midashi"><img src="http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639998.jpg" alt="トラックバック" /></dt>
                    <dd>
                        <div class="tblist">{recent_trackback_list}</div>
                    </dd>
				</dl>				
				
				                
		        
		        
		        
                
                
                <dl class ="menu_item">
                <dt class="menu_midashi"><img src="http://img-cdn.jg.jugem.jp/e0d/40469/20090315_640000.jpg" alt="リンク" /></dt>
                    <dd>
                        <div id="linklist">{link_list}</div>
                      
{freespace_contents4}

</dd>
                </dl>

<dl class ="menu_item">
                <dt class="menu_midashi">{freespace_title5}</dt>
                <dd>
                {freespace_contents5}
                </dd>
                </dl>
                 
		    </div>
	    
		    <div id="menu_small">

<dl class ="menu_item">
				<dt class="menu_midashi"><img src="http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639991.jpg" alt="エントリー" /></dt>
				<dd>
				<div id="selectedentrylist">{selected_entry_list}</div>
				</dd>
				</dl>

<dl class ="menu_item">
				<dt class="menu_midashi"><img src="http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639991.jpg" alt="アーカイブ" /></dt>
                    <dd>
                        <div class="archiveslist">{archives_list}</div>			
                    </dd>
                    
				</dl>

<dl class ="menu_item">
                <dt class="menu_midashi"><img src="http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639995.jpg" alt=""その他  /></dt>
                <dd>
                    <ul>
                    <li><a href="./?mode=rss">RSS1.0</a></li>
                    <li><a href="./?mode=atom">Atom0.3</a></li>
                    </ul>
                </dd>
                </dl>

{amazon_item}

<dl class ="menu_item">
                <dt class="menu_midashi">{freespace_title1}</dt>
                <dd>
                {freespace_contents1}
                </dd>
                </dl>

<dl class ="menu_item">
                <dt class="menu_midashi">{freespace_title2}</dt>
                <dd>
                {freespace_contents2}
                </dd>
                </dl>

<dl class ="menu_item">
                <dt class="menu_midashi">{freespace_title3}</dt>
                <dd>
                {freespace_contents3}
                </dd>
                </dl>

</div>

{ad}

</div>
        <div id="footer">

<! -- 著作権表示-->
            <p class="copyright">Template by <a href="http://www.v-colors.com/" target="_blank">ビビッドカラーズ</a>(<a href="http://yuki930.jugem.cc/" target="_blank">YUKI</a>)<br /><a href="https://jugem.jp/utf/?mode=viewer&act=lookup&jtid=7329">このデザインを使う</a></p>
            <! -- 著作権表示ここまで-->

</div>
	</div>
</div>

</body>
</html>

CSS

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.7.0
*/
/**
 * YUI Fonts
 * @module fonts
 * @namespace yui-
 * @requires 
 */

/**
 * Percents could work for IE, but for backCompat purposes, we are using keywords.
 * x-small is for IE6/7 quirks mode.
 */
body {
	font:13px/1.231 arial,helvetica,clean,sans-serif;
	/* for IE6/7 */ 
	*font-size:small; 
	/* for IE Quirks Mode */
	*font:x-small; 
}

/**
 * Nudge down to get to 13px equivalent for these form elements
 */ 
select,
input,
button,
textarea,
button {
	font:99% arial,helvetica,clean,sans-serif;
}

/**
 * To help tables remember to inherit
 */
table {
	font-size:inherit;
	font:100%;
}

/**
 * Bump up IE to get to 13px equivalent for these fixed-width elements
 */
pre,
code,
kbd,
samp,
tt {
	font-family:monospace;
	*font-size:108%;
	line-height:100%;
}

body {
	margin:0px;
	padding:0px 0px;
	text-align:center;
	margin:0px 0px 10px;
	background:#181512;
	color:#555555;

}

body a {
	color:#D05E69;
	overflow:hidden;
	text-decoration:underline;
}
	
td,th{
	vertical-align: top;
}

img,object,param{
	border: 0;
	vertical-align: bottom;
}
dt,dd,ul,li{
	line-height:1.5;
}
input{
}
strong{
	font-weight: normal;
}

blockquote {
	border-left:solid 5px #C9B7A7;
	padding-left:5px;
}

h1 {
	font-size:large;
}

h2 {
	font-size:medium;
	font-weight:bold;
}

span {
}

hr {

}

a:link,
a:visited {
	color:#D05E69;
	text-decoration:underline;

}

a:hover,
a:active {
	color:#FF9900;
	text-decoration:underline;
}

.alt_text {
	text-indent:-9999px;
	color:#FFFFFF;
}

#wrapper {
	margin:0 auto 20px;
	padding:0px;
	text-align:left;
	width:960px;
}

#header {
	margin:0px 0px 0px 0px;
	padding:0px 0px;
	height:180px;
	background:url(http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639970.jpg) repeat-x;
}

#site_title {
	padding:35px 0px 0px 40px;
	margin:0px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	line-height:18px;
	font-weight:bold;
	color:#FFFFFF;
}

#site_title a{
	text-decoration:none;
	color:#FFFFFF;
}

.description {
	padding:10px 0px 0px 80px;
	margin:0px 0px 0px 0px;
	color:#FFFFFF;	
	font-size:85%;
	line-height:13px;
	font-weight:normal;
}

.header_navigation {
	margin:0px 0px 0px 0px;
	padding:50px 0px 0px 0px;
	line-height:30px;
	height:30px;

}

.header_navigation ul {
	margin:0px;
	padding:0px;
	width:960px;
	height:30px;
	list-style-type:none;
	background:url(http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639969.jpg) no-repeat;
}

.header_navigation ul li {
	margin:0px;
	padding:0px 0px;
	float:left;
	width:150px;
	font-size:77%;
	font-weight:bold;
	list-style-type:none;
	line-height:30px;
	height:30px;
	text-align:center;
	background:url(http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639968.jpg) repeat-x;
}

.header_navigation li a {
	color:#40262F;
	line-height:30px;
	height:30px;
	width:150px;
	display:block;
	text-decoration:none;
}

#contents {
	margin:0px 0px;
	padding:0px;
	background:url(http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639966.jpg) ;
}

#contents_header {
	margin:0px 0px;
	padding:0px;
	height:15px;
	line-height:15px;
	background:url(http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639965.jpg) no-repeat;
}

#main {
	margin-left:20px;
	padding-top:10px;
	display:inline;
	width:500px;
	float:left;
}

#menu {
	margin-right:10px;
	display:inline;
	width:400px;
	float:right;
}

#menu_large {
	width:200px;
	float:right;
}

#menu_small {
	width:180px;
	float:left;
}

#footer {
	clear:both;
}

.entry_area {
	margin:0px 0px 20px 0px;
	background:#FFFFFF;
}

.entry_header {
	padding:5px 20px 20px 20px;
	margin:0px;
}

.entry_contents {
	margin:0px;
	padding: 0px 20px 0px;
	background:#FFFFFF;

}

#main ul {
	margin:10px 0px 20px 30px;
	padding: 0px 0px 0px;
}

#main ul li{
	margin:0px;
	padding: 0px 0px 0px;
}

.entry_footer {
	clear:both;
	margin:0px;
	padding:0px;
	height:15px;
}

.entry_title {
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 10px;
	border-left:solid 5px #40262F;
	color:#40262F;
	line-height:160%;
	font-size:116%;
	font-weight:bold;
}

.entry_title a{
	color:#40262F;
	text-decoration:none;
}

.entry_sub_title {
	margin:0px 0px 20px 0px;
	padding:0px 0px 0px 10px;
	border-left:solid 5px #D3CFD2;
	line-height:160%;
	font-size:77%;
}

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

.entry_more {
	padding:0px 0px 10px 0px;
	margin:0px;
line-height:180%;
}

.entry_category {
	clear:both;
	text-align:right;
}

.entry_state {
	clear:both;
	background:url(http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639967.jpg);
	height:40px;
	line-height:40px;
	text-align:right;
	padding-right:20px;
	margin-bottom:20px;
	color:#FFFFFF;
}
.entry_state a,
.entry_state a:link{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:106%;
	color:#FFFFFF;
}

.comment_area {
	clear:both;
	margin:0px 0px 20px 0px;
	background:#F3EFED;

}

.comment_title {
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 10px;
	border-left:solid 5px #40262F;
	line-height:160%;
	font-size:116%;
	font-weight:bold;
}

.comment_sub_title {
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 10px;
	border-left:solid 5px #D3CFD2;
	line-height:160%;
	font-size:77%;
}
.comment_body {
	margin:0px;
	padding:5px 0px;
}

.comment_area .input{
	width:150px;
}

.comment_area textarea{
	width:350px;
	height:250px;
}

.comment_name {
	line-height:30px;
	border-bottom:#40262F dotted 1px;
	margin:0px 0px 10px 0px;
	padding:0px;
}

.comment_state {
	text-align:right;
	border-bottom:#40262F double 3px;
	line-height:30px;
}

.trackback_area {
	margin:0px 0px 20px 0px;
	background:#E2D8CF;

}
.trackback_area .input{
	width:250px;
}

.trackback_title {
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 10px;
	border-left:solid 5px #40262F;
	line-height:160%;
	font-size:116%;
	font-weight:bold;
}

.trackback_sub_title {
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 10px;
	border-left:solid 5px #D3CFD2;
	line-height:160%;
	font-size:77%;
}

.trackback_name {
	line-height:30px;
	border-bottom:#40262F dotted 1px;
	margin:0px 0px 10px 0px;
	padding:0px;
}

.trackback_body {
	margin:0px;
	padding:0px;
	padding:5px 0px;
}

.trackback_state {
	text-align:right;
	border-bottom:#40262F double 3px;
	line-height:30px;
}

.page_area {
	margin:0px 0px 20px 0px;
	background:#FFFFFF;
}

.page_header {
	padding:5px 20px 20px 20px;
	margin:0px;

}

.page_contents {
	margin:0px;
	padding: 0px 20px 0px;
	background:#FFFFFF;
	text-align:center;

}

.page_footer {
	clear:both;
	margin:0px;
	padding:0px;
	height:15px;
	text-align:center;
}

.page_title {
	margin:0px;
	padding:0px 0px 0px 10px;
	border-left:solid 10px #C9B7A7;

}

.page_body {
	padding:0px 0px 10px 0px;
	margin:0px;

}

.page_more {
	padding:0px 0px 10px 0px;
	margin:0px;
}

#menu dl {
	margin:0px;
	padding:0px;
}

#menu dt {
	margin:0px 0px 10px;
	padding:0px;
}

#menu dd {
	margin:0px 0px 10px;
	padding:0px 0px;
}

#menu .menu_item dt {
	font-weight:bold;
}

#menu_large dt {
	background:url(http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639972.jpg);
	height:30px;
	padding-left:20px;
}

#menu_small dt {
	background:url(http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639973.jpg);
	height:30px;
	padding-left:20px;
}

.left_pict {
	float:left;
	padding:0px 15px 15px 0px;
}

.pict {
	padding-bottom:10px;
}

#footer {
	clear:both;
	padding:10px 20px;
	text-align:left;
}

#menu ul {
	margin:0px;
	padding:0px 0px 0px 0px;
	list-style-type:none;
}
#menu ul li {
	margin:0.4em 0px 0.4em 0px;
	padding:0px 0px 0px 15px;
	list-style-type:none;
	background:url("http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639982.jpg") top left no-repeat;
}
#menu ul li li{
	margin:0px;
	padding:0px 0px 0px 15px;
	list-style-type:none;
	background:url("http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639981.jpg") -2px center no-repeat;
	font-size:85%;
}

#menu_small ul {
	margin:0px;
	padding:0px 0px 0px 0px;
	list-style-type:none;
}
#menu_small ul li {
	margin:0.4em 0px 0.4em 0px;
	padding:0px 0px 0px 20px;
	list-style-type:none;
	background:url("http://img-cdn.jg.jugem.jp/e0d/40469/20090315_639983.jpg") top left no-repeat;
	font-size:85%;
}

#menu #categorylist ul li {
	font-weight:bold;
}

#menu #categorylist ul li li{
	font-weight:normal;
	
}

.page {
	text-align:center;
	padding:10px 0px;
}

.top {
	text-align:center;
	padding:10px 0px;
}

.copyright {
	text-align:right;
	font-size:77%;
}

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