無料ブログ作成なら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}" />
<link rel="alternate" media="handheld" type="application/xhtml+xml" href="{mobile_url}" />
<script src="./template/analogue/menu.js" type="text/javascript"></script>
<script type="text/javascript" src="./template/js/cookie.js"></script>
</head>

<h1>{blog_name}</h1><p class="description">{blog_description}</p>	
	
</div>

<div id="left">

<p>

<a href="" onclick="return buttonClick(event, 'MENU1');">カレンダー</a>
<br /><br /><br /><br />
　<a href="" onclick="return buttonClick(event, 'MENU2');">アマゾン</a>
<br /><br />
　<a href="" onclick="return buttonClick(event, 'MENU3');">新着記事</a>
<br /><br /><br /><br />
　<a href="" onclick="return buttonClick(event, 'MENU4');">コメント</a>
<br /><br />
　<a href="" onclick="return buttonClick(event, 'MENU5');">トラックバック</a>
<br /><br />
　<a href="" onclick="return buttonClick(event, 'MENU6');">カテゴリー</a>
<br /><br /><br /><br />
　<a href="" onclick="return buttonClick(event, 'MENU7');">アーカイブ</a>
<br /><br />
　<a href="" onclick="return buttonClick(event, 'MENU8');">リンク</a>
<br /><br /><br /><br />
　<a href="" onclick="return buttonClick(event, 'MENU9');">プロフィール</a>
<br /><br />
　<a href="" onclick="return buttonClick(event, 'MENU10');">モバイル</a>
<br /><br />
　<a href="" onclick="return buttonClick(event, 'MENU11');">サーチ</a>
<br /><br /><br /><br />

</p>

<div id="MENU1" class="MENU">
		<div class="calendar" align="center">
		<div class="list_title">Calendar</div>
			<table border="0" cellspacing="1" cellpadding="0">
			<tr>
			<td class="weekday"><font color="red">S</font></td>
			<td class="weekday">M</td>
			<td class="weekday">T</td>
			<td class="weekday">W</td>
			<td class="weekday">T</td>
			<td class="weekday">F</td>
			<td class="weekday"><font color="blue">S</font></td>
			</tr>
			</table>
			{calendar}
		</div>
	</div>

<div id="MENU2" class="MENU">
		<div class="list_title">Recommend</div>
		
		<div class="list_text">
		{amazon_item}
		</div>
		
	</div>

<div id="MENU3" class="MENU">
		<div class="list_title">Latest Entry</div>
		<div class="list_text">
		{latest_entry_list}
		</div>
	</div>

<div id="MENU4" class="MENU">
		<div class="list_title">Recent Comment</div>
		<div class="list_text">
		{recent_comment_list}
		</div>
	</div>

<div id="MENU5" class="MENU">
		<div class="list_title">Recent Trackback</div>
		<div class="list_text">
		{recent_trackback_list}
		</div>
	</div>

<div id="MENU6" class="MENU">
		<div class="list_title">Category</div>
		<div class="list_text">
		{category_list}
		</div>
	</div>

<div id="MENU7" class="MENU">
		<div class="list_title">Archive</div>
		<div class="list_text">
		{archives_list}
		</div>
	</div>

<div id="MENU8" class="MENU">
		<div class="list_title">Link</div>
		<div class="list_text">
		{link_list}
		</div>
	</div>

<div id="MENU9" class="MENU">
		<div class="list_title">Profile</div>
		<div class="list_text">
			{user_list}
		</div>
	</div>

<div id="MENU10" class="MENU">
			<div class="list_title">Mobile</div>
			<div align="center">{site_qrcode}</div>
	</div>

<div id="MENU11" class="MENU">
       <div class="list_title">Search</div>
       <div class="search" align="center">
             <form method="get" action="">
             <input name="search" size="16" style="width:100px;" />　
             <input class="seach" type="submit" value="検索" />
             </form>
       </div>
       </div>

<div id="MENU11" class="MENU">
        <div class="list_title">{freespace_title1}</div>
	<div class="list_text">{freespace_contents1}</div>
        </div>

<div id="MENU12" class="MENU">
        <div class="list_title">{freespace_title2}</div>
	<div class="list_text">{freespace_contents2}</div>
        </div>

<div id="MENU13" class="MENU">
	<div class="list_title">{freespace_title3}</div>
	<div class="list_text">{freespace_contents3}</div>
        </div>

<div id="MENU14" class="MENU">
	<div class="list_title">{freespace_title4}</div>
	<div class="list_text">{freespace_contents4}</div>
        </div>

<div id="MENU15" class="MENU">
	<div class="list_title">{freespace_title5}</div>
	<div class="list_text">{freespace_contents5}</div>
        </div>

</div>

<div class="entry_navi">{prev_entry} | <a href="./">本文</a> |  {next_entry}</div>

<div class="entry">
	<div class="entry_head">
	    <div class="entry_title"><a href="{entry_permalink}">{entry_title}</a></div>
        </div>
	<div class="ent">	
		<div class="entry_in">

<div class="entry_date">{entry_date}</div>

{entry_description}

<a name="sequel"></a>

<div class="entry_more">
			{entry_sequel}
			</div>
			<div id="user_name">{user_name}</div>
		</div>
	</div>

<div class="entry_state_box">
			<div class="entry_state">♪ {category_name} | {comment_num} | {trackback_num} ♪</div>
			<div id="dc"><a href="#top" title="はじめに戻る">D.C.</a></div>
			</div>
	</div>
	{trackback_auto_discovery}

<a name="comments"></a>
	<div class="tb_main_title">Comment</div>

<div class="tb_area">{comment_description}</div>
	<div class="tb_state">{comment_name} | {comment_time} |</div>

<ul class="comment_form">
            
	<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
	<input type="hidden" name="entry_id" value="{entry_id}" />
			<li><label for="name">name</label><br />
	<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" class="under" /></li>
			<li><label for="email">email</label><br />
	<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="under" /></li>
			<li><label for="url">url</label><br />
	<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="under" /></li>
			<li><label for="description">comments</label><br />
	<textarea tabindex="4" id="description" name="description" rows="5" cols="50" class="under"></textarea></li><br /><br />
	<input tabindex="5" type="submit" value="コメント送信" onclick="javascript:setval();" class="sub" />　　<input type="checkbox" name="set_cookie" value="1" id="set_cookie" style="border:none;" />
	<label for="set_cookie">Cookieに登録</label></li>
	</form>
        </ul>

<a name="trackback"></a>
	<div class="tb_main_title">Trackback</div>

<div class="tb_url"><strong>この記事のトラックバックURL:</strong> {trackback_url}</div>

<div class="tbentry_title">{trackback_title}</div>
			<div class="tb_area">{trackback_excerpt}</div>
			<div class="tb_state"> | {trackback_blog_name} | {trackback_time} | </div>

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

<div class="prof_area">
			<div class="entry_body">
				<div class="profile_name">{profile_name}</div>
				{profile_description}
			</div>
	</div>

<div class="navipage">Page

if ( page_now > 1 ) { document.write( '<a href="./?page=' + (page_now-2).toString() + '">' + prevText + '</a>&nbsp;' ); }
for ( i = pmin; i <= pmax; i++ ) {
  document.write( '|' );
  if ( i != page_now ) { document.write( '<a href="./?page=' + (i-1).toString() + '">' ); }
  document.write( i.toString() );
  if ( i != page_now ) { document.write( '</a>' ); }
  document.write( '|&nbsp;' );
}
if ( page_now < page_num ) { document.write( '&nbsp;<a href="./?page=' + (page_now).toString() + '">' + nextText + '</a>' ); }
// -->
</script>
</div>

<div id="other">| <a href="./admin">管理者ページ</a> | <a href="./?mode=rss">RSS1.0</a> | <a href="./?mode=atom">Atom0.3</a> |</div>
<div class="copy">Template by <a href="http://boyakusakana.jugem.jp/" target="_blank">魚のぼやき</a></div>
<br>
</div>

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

<div id="ad" align="right">{ad}</div>

<div class="jugem_bana">{powered}</div>
                        <div class="copy"><a href="http://jugem.jp/" target="_blank">Powered by JUGEM</a></div>
                        <div class="copy"><a href="http://paperboy.co.jp" target="_blank">Service Provided by paperboy&amp;co.</a></div>
			<div class="copy">{copyright}</div>
	
</div>

</div>

</body>
</html>

CSS

/* ●作成者のブログタイトル５文字を目安に作ってます．それより長い場合，またはブログ説明が長い場合はコメントを参考に調整してください． */

* {
margin: 0;
padding: 0;
}

body {
        background:#EEE;
        color:white;
        font-weight:bold;
        font: 12px/160% "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
        margin:20px 0;
        padding:0px;
        scrollbar-track-color: #000000;
        scrollbar-face-color: #FFFFFF;
        scrollbar-shadow-color: #000000;
        scrollbar-darkshadow-color: #000000;
        scrollbar-highlight-color: #000000;
        scrollbar-3dlight-color: #000000;
	}
p{padding-top:95px;_padding-top:100px;}
br{clear:both;}

/* 大まかな段組 */
#back {
	width:760px;
        _width:720px;
	border:8px black double;
	margin:0 auto;
	position:relative;
	background:url(http://img-cdn.jg.jugem.jp/f1d/422739/20070717_166437.gif) repeat-y left top black;
	}

#header {
	width:100%;
	height:100px; /* ●ブログ説明が長いときは，数字を増やしてください */
	background:url(http://img-cdn.jg.jugem.jp/f1d/422739/20070717_166438.gif) no-repeat right top; /* ●ブログタイトルが長くてバランスが悪い場合は background～を撤去することをお奨めします */
	}

#left {
	width:210px;
	position:absolute;left:0px;top:0px;
	font-size:12px;
	line-height:145%;
	color:white;
	font-weight:bold;
	}

#entrybox {
	width:500px;
	font-size:11px;
	line-height:150%;
	margin-left:210px;
        z-index;4;}

#footer{
	height:330px;
	width:100%;
	clear:both;
        text-align:right;
	}

/* 基本リンク設定 */
a:link		{ color: black; text-decoration: none; }
a:visited	{ color: black; text-decoration: none; }
a:active	{ color: black; text-decoration: none; }
a:hover		{ color: #9A101D; text-decoration: none; }

/* リスト */
ul {
	list-style-type: square;
	line-height:120%;
	margin:0px;
	margin-left:15px;
	padding:0px;
	}

li {margin-bottom:5px;}

img {border:none;}

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

.sub {
        padding:2px;
        margin-left:50px;
        border:1px white solid;
	}

/* サイトタイトル　●作成者のタイトル５文字を目安に作ってます．それより長い場合はコメントを参考に調整してください．---------------------------------------------------------------------- */

h1 {	padding: 5px 0;
	text-align: center;
	font-size: 18px;
	margin-right:0px;
/* ●見本の右上の画像を撤去した場合，ここから● */
        width:6em; /* タイトルの文字数に合わせて数字を変えてください（推奨：(全角)文字数＋１） */
        background:white;
        border:1px black solid;
/* ●ここまでを削除してください● */
        position:relative;
        left:620px;top:15px; /●* タイトルの文字数にあわせて，left部分のpxを変えてください．５文字より多い場合は，620 -（18×(文字数 -5 )）位を目安に．あとは増減させて微調整してください． */

}

p.description {
	font-weight:normal;
	margin-right:0px;
        margin-top:20px;
        padding-top:20px;
	color: gray;
	font-size: 12px;
	text-align:right;
	}

/* ●見本の右上の画像を削除した場合　ここから● */
h1 a {color: #000;text-decoration: none;} 
h1 a:link {color: #000;text-decoration: none;}
h1 a:visited {color: #000;text-decoration: none;}
h1 a:active {color: #000;text-decoration: none;}
/* ●ここまでのcolorの000をfffを変えてください● */
h1 a:hover {color: #9A101D;text-decoration: none;}

/* メニュー---------------------------------------------------------------------- */

/* メニュー部分のリンク設定 */
p a {color: #FFF;text-decoration: none;}
p a:link {color: #FFF;text-decoration: none;}
p a:visited {color: #FFF;text-decoration: none;}
p a:active {color: #FFF;text-decoration: none;}
p a:hover {color: #9A101D;text-decoration: none;}

.MENU {
	visibility: hidden;
	z-index: 999;
	position: absolute;
	width:200px;
	margin-top:-10px;
        margin-left:-25px;
	padding-top:5px;
	background: #FFF;
        border:3px gray double;
	}

.list{
	}

.list_title{
	margin:5px 10px 0 10px;
        _padding-top:5px;
	font-size:34px;
	text-align:center;
	border-bottom:5px gray solid;
        color:black;
        font-family:"Palace Script MT";
        font-weight:bold;
	}

.list_text{
        margin-top:5px;
	font-size: 10px;
	padding:10px 10px;
	color:black;
	text-align:left;
	}
.list_text a:link{color:black;text-decoration:none;font-weight:bold;}
.list_text a:visited{color:gray;text-decoration:none;font-weight:bold;}
.list_text a:active{color:black;text-decoration:none;font-weight:bold;}
.list_text a:hover{color: #9A101D;text-decoration:none;font-weight:bold;}

/* カレンダー */

.calendar {
	font-family: "Verdana";
	font-size: 10px;
	color: gray;
	margin:0px auto;
	}

.calendar_month {
	font-family: "Verdana";
	margin-bottom: 10px;
	font-size: 10px;
	color: black;
	}

.weekday {
	width: 25px;
	height: 20px;
	padding: 0px;
	text-align:center;
	font-size: 10px;
	color: gray;
	}

.cell {
	width: 25px;
	height: 20px;
	padding: 0px;
	text-align:center;
	font-size: 10px;
	color: white;
	background:url(http://img-cdn.jg.jugem.jp/f1d/422739/20070719_167710.gif) no-repeat center center;
	}

.cell a {color: black;text-decoration: none; font-weight:bolder;}
.cell a:link {color: black;text-decoration: none;}
.cell a:visited {color: black;text-decoration: line-through;}
.cell a:active {color: black;text-decoration: none;}
.cell a:hover {color: #9A101D;text-decoration: none;}

.calendar table {
	margin:0 auto;
	}

/* アマゾン */
.amazon {
	margin-bottom:10px;
	}

.amazon_text {
	font-size:10px;
	text-align: left;
	}

.amazon_text strong {
	}

/* エントリー---------------------------------------------------------------------- */

.entry {
	width: 540px;
        _width:500px;
	margin-bottom: 30px;background:white;
	margin-top:30px;
        margin-right:10px;
        color:black;
	}

.entry_head {
        margin:0 30px -2px -8px;
        _margin:0 0 -5px 0;
         width:540px;
	_width: 500px;
        padding:15px 0;
	_padding:10px 20px 15px 6px;
	background:url(http://img-cdn.jg.jugem.jp/f1d/422739/20070717_166439.gif) no-repeat center bottom;
	}

.entry_title { 
	padding: 10px;
	color: #000;
	font-size: 30px;
	font-family: Arial;
        text-align:center;
	}

.entry_in {
	width:480px;
        padding:10px 5px;
	_padding: 15px 25px 0px 25px;
        margin:0 20px;
        _margin:0;
	}

.ent   {
        background:url(http://img-cdn.jg.jugem.jp/f1d/422739/20070717_166441.gif) repeat-y 2% 0%;
        width:500px;padding-left:10px;
        }

.entry_date {
        width: 480px;
	border-bottom:1px #8B8380 dotted;
	margin-bottom:10px;
	font-weight: bolder;
        font-size:12px;
	}

.entry_body a {color: #9A101D; background:#EFE7E4; text-decoration: underline;}

.entry_more {
	padding-top: 10px;
	}

#user_name{text-align:right;font-weight:bold;}

.entry_state_box {
	width:540px;
	background:url(http://img-cdn.jg.jugem.jp/f1d/422739/20070717_166435.gif) no-repeat top;
        padding:20px 0;
	_padding:15px 0px 15px 5px;
	margin-top:-5px;
        margin-left:-10px;
	_margin-left:-11px;
        margin-right:30px;
        _margin-right:0;
	}

.entry_state {
	color: black;
        font-weight:bold;
	text-align: right;
	padding:0 15px 3px 0;
	}
/* ダ・カーポ */
#dc { 
	font-family:"Palace Script MT";
	text-align:right;
	font-size:25px;
	font-color:black;
	font-weight:bold;
	padding-top:3px;
	}

#dc a:link{font-weight:bold;}
#dc a:visited{font-weight:bold;}
#dc a:active{font-weight:bold;}
#dc a:hover{font-weight:bold;}

/* コメント数，トラバ数 */
.entry_state a:link {font-weight:bold;}
.entry_state a:visited {font-weight:bold;}
.entry_state a:active {font-weight:bold;}
.entry_state a:hover {font-weight:bold;}

blockquote {
	color: #999;
	border-left:3px solid;
	margin: 10px 0;
	padding: 5px;
	padding-left:10px;
	}

.pict {
	display:block;
	text-align:center;
	margin:0 auto;
	}

.entry_navi {
        width:540px;
	text-align:center;
	margin-top:30px;
        font-weight:bold;
        background:gray;
	}

.entry_navi a:link {color:white;text-decoration:none;font-weight:bold;}
.entry_navi a:visited {color:white;text-decoration:none;font-weight:bold;}
.entry_navi a:active {color:white;text-decoration:none;font-weight:bold;}
.entry_navi a:hover {color:#9A101D;text-decoration:none;font-weight:bold;}

/* コメント・トラックバック・プロフィール */

ul.comment_form {list-style:none;}

.comment_form {
	margin:20px 110px 30px 110px;
        }

.under {
        border:0;
        width:300px;
        }

.tb_main_title {
	border-bottom:5px solid gray;
	margin:35px 0 2px 0;
        padding:8px 0;
	text-align:center;
	font-size: 48px;
	font-family: "Palace Script MT";
	font-weight:bolder;
	color: gray;
        width:540px;
	}

#tb {
	width:500px;
	margin-bottom:30px;
	font-size:12px;
	line-height:170%;
	}

.tb_url {
	margin:20px 0;
	text-align:center;
	}

.tbentry_title {
	font-weight:bolder;
	margin:20px 20px 0 20px;
	}

.tb_area {
	margin:10px 5px 0 40px;
        padding-right:30px;
        background:url(http://img-cdn.jg.jugem.jp/f1d/422739/20070719_167697.gif) no-repeat bottom right;
	}

.tb_state {
	color:gray;
	font-size:10px;
	text-align:right;
	border-bottom:2px dotted gray;
	margin:10px 0 0 40px;
	}

input,textarea {
	color: black;
	font-size :12px;
	background-color:#FFF;
	padding: 5px;
        margin-top:5px;
	}

.profile_name {
	font-weight:bolder;
	margin-bottom:5px;
	}

.prof_area { width:500px;margin:30px 0;padding:10px; }

#other {text-align:right;color:white;margin-bottom:15px;}

#other a:link {color:white;text-decoration:none;}
#other a:visited {color:white;text-decoration:none;}
#other a:active {color:white;text-decoration:none;}
#other a:hover {color:#9A101D;text-decoration:none;}

/* ページ */
.navipage{
        font-size:12px;
        text-align:center;
        margin-bottom:10px;
        padding-left;20px;
        }

.navipage a:link{color:gray;text-decoration:none;}
.navipage a:visited{color:gray;text-decoration:none;}
.navipage a:active{color:white;text-decoration:none;}
.navipage a:hover{color:white;text-decoration:underline;}

/* フッタ---------------------------------------------------------------------- */

.copy {text-align:right;
	}
.copy a:link{color:#9A101D;}
.copy a:visited{color:gray;}
.copy a:active{color:white;}
.copy a:hover{color:white;}

.jugem_bana{
	margin: 5px 0px 10px 0px;
        text-align:right;
	}

/* AD--------------- */
#ad .linktext {
	line-height:160%;
	text-align:right;
	}

/* サーチ--------------- */
.search {

}

.search input{
	color: black;
	font-size :12px;
	background-color:darkgray;
        margin:10px 0;
	padding: 3px;
        border:gray 1px solid;
	}

.button {
	margin-left:5px;
	padding:0px;
	}

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