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

ホーム

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

テンプレート名 : PinkPunkBlack

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}" />
</head>

<div id="header">
	<div id="header-inner">
	<h1 id="blog-name">{blog_name}</h1>
	<div id="blog-desc" class="txt-color01">{blog_description}</div>
	</div>
</div>

<div id="contents">

<div id="main01">

<div class="entry-box">
	<h2 class="entry-title title-color01 title-back">{entry_title}</h2>
	<div class="entry-desc txt-color01">{entry_description}</div>

	<div class="entry-more"><a href="./?eid={entry_sequel_id}#seq">Read More</a></div>


	<div class="entry-sequel txt-color01"><a id="seq"></a>{entry_sequel_text}</div>

	<div class="entry-date txt-color02">{category_name} | {entry_date} | {comment_num} | {trackback_num}</div>
</div>

<div class="page-navi01 txt-color01">{prev_entry} | <a href="./">main</a> | {next_entry}</div>

<div class="com-box">
	<div class="com-title title-color01 title-back"><a id="comments">Comments</a></div>

	<div class="com-desc txt-color01">{comment_description}</div>
	<div class="com-date txt-color02">{comment_name} | {comment_time}</div>

</div>

<div class="com-box post01">
	<div class="com-title title-color01 title-back">Post Comments</div>
	<form name="comment_area" id="comment_area" class="com-post txt-color01" action="./?mode=comment" method="post">
	<input type="hidden" name="entry_id" value="{entry_id}" class="post02 txt-color01" />
	<label for="name">Name</label><br/>
	<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" size="40" class="post02 txt-color01" /><br />
	<label for="email">Mail</label><br />
	<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" size="40" class="post02 txt-color01" /><br />
	<label for="url">URL</label><br />
	<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" size="40" class="post02 txt-color01" /><br />
	<label for="description">Comments</label><br />
	<textarea tabindex="4" id="description" name="description" rows="5" cols="40" class="post02 txt-color01"></textarea><br />
	<input tabindex="5" type="submit" value="Post" class="post03 txt-color02" /><br />
	<input type="checkbox" name="set_cookie" value="1" id="set_cookie" /><label for="set_cookie">入力情報の登録</label>
	</form>
</div>

<div class="tb-box">
	<div class="tb-title01 title-color01 title-back"><a id="trackback">Trackback</a></div>
	<div class="tb-url txt-color01">この記事のURL<br /><input type="text" value="{trackback_url}" size="40" class="post02 txt-color01" /></div>

	<div class="tb-title02 title-color01 title-back">{trackback_title}</div>
	<div class="tb-desc txt-color01">{trackback_excerpt}</div>
	<div class="tb-date txt-color02">{trackback_blog_name} | {trackback_time}</div>

</div>

<div class="entry-box">
<h2 class="entry-title title-color01 title-back">{profile_name}</h2>
<div class="prof-desc txt-color01">{profile_description}</div>
</div>

</div>

<div id="navi01">
	<div id="navi02">

<div class="navi-title txt-color02">Calendar</div>
		<div class="navi-cont txt-color01">{calendar2_addzero}</div>

<div class="navi-title txt-color02">Latest Entries</div>
		<div class="navi-cont txt-color01">{selected_entry_list}</div>

<div class="navi-title txt-color02">Archives</div>
		<div class="navi-cont txt-color01">{archives_list}</div>

<div class="navi-title txt-color02">Categories</div>
		<div class="navi-cont txt-color01">{category_list}</div>

<div class="navi-title txt-color02">Links</div>
		<div class="navi-cont txt-color01">{link_list}</div>

<div class="navi-title txt-color02">Profile</div>
		<div class="navi-cont txt-color01">{user_list}</div>

<div class="navi-title txt-color02">Comments</div>
		<div class="navi-cont txt-color01">{recent_comment_list}</div>

<div class="navi-title txt-color02">Trackbacks</div>
		<div class="navi-cont txt-color01">{recent_comment_list}</div>

<div class="navi-title txt-color02">{freespace_title1}</div>
		<div class="navi-cont txt-color01">{freespace_contents1}</div>

<div class="navi-title txt-color02">{freespace_title2}</div>
		<div class="navi-cont txt-color01">{freespace_contents2}</div>

<div class="navi-title txt-color02">{freespace_title3}</div>
		<div class="navi-cont txt-color01">{freespace_contents3}</div>

<div class="navi-title txt-color02">{freespace_title4}</div>
		<div class="navi-cont txt-color01">{freespace_contents4}</div>

<div class="navi-title txt-color02">{freespace_title5}</div>
		<div class="navi-cont txt-color01">{freespace_contents5}</div>

<div class="navi-cont txt-color01"><a href="https://jugem.jp/" target="_blank"><img src="../template/banner/powered_04b.gif" width="128" height="22" alt="みんなのブログポータル JUGEM" border="0" /></a></div>

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

</div>
</div>

</div>

<div id="footer01">


	<div class="page-navi02 txt-color01">{prev_page_link} | {page_now}/{page_num}Pages | {next_page_link}</div>


	<div id="copy" class="footer-color">Copyright (C) 2009 {user_name}. All Rights Reserved.</div>
</div>

</div>

</body>

</html>

CSS

*{margin:0px;padding:0px;}
body{background-color:#000000;font-family:sans-serif;text-align:center;}
img{border:none;}
hr{height:1px;border:0px;text-align:center;color:#e5004f;background-color:#e5004f;margin:5px 0px;}
ul{list-style-type:square;list-style-position:inside;}

#frame01{width:750px;margin:0px auto;text-align:left;}
#header{height:300px;background-color: #000000;background-image: url(http://img-cdn.jg.jugem.jp/c3d/969943/20080817_91836.jpg);background-position:right;text-align:right;}
#contents{padding:30px 0px 0px;}
#main01{width:520px;float:right;}
#navi01{width:230px;float:right;}
#navi02{margin:0px 30px 0px 0px;}
#footer01{width:100%;clear:right;text-align:center;}

/*タイトルカラー(エントリ等のタイトル)*/
.title-color01, .footer-color{background-color:#e5004f;color:#000000;}
.title-back{background-image: url(http://img-cdn.jg.jugem.jp/c3d/969943/20080818_96598.gif);background-position:right;}
.title-color01 a. footer-color a{text-decoration:none;color:#000000;}

/*テクストカラー(01が白、02がピンク)*/
.txt-color01{color:#f9f9f9;}
.txt-color02{color:#e5004f;}

/*ヘッダリンク色*/
#blog-name a{color:#e5004f;text-decoration:none;}
/*リンク色*/
a:link, a:hover{color:#e5004f;}
a:visited{color:#cc3366;}

/*記事内画像の枠(枠が必要なければ削除してください)*/
.pict{border:1px solid #e5004f;}

/*日付枠リンク色*/
.entry-date a:link, .com-date a:link, .tb-date a:link, .entry-date a:active, .com-date a:active, .tb-date a:active{color:#e5004f;text-decoration:none;}
.entry-date a:hover, .com-date a:hover,.tb-date a:hover{color:#e5004f;text-decoration:underline;}
.entry-date a:visited, .com-date a:visited, .tb-date a:visited{color:#cc3366;text-decoration:none;}

/*ページナビのリンク色*/
.page-navi01 a:link, .page-navi01 a:hover, .page-navi01 a:active, .page-navi02 a:link, .page-navi02 a:hover, .page-navi02 a:active{color:#f9f9f9;}
.page-navi01 a:visited, .page-navi02 a:visited{color:#cccccc;}
/*フッタリンク色*/
#copy a{color:#000000;text-decoration:none;}

/*ヘッダ(フォントサイズや文字揃えは適宜変更してください)*/
#header-inner{width:400px;padding:120px 30px 0px;text-align:center;}
#blog-name{font-size:30pt;}
#blog-desc{margin:10px 0px 0px;font-size:15px;}

/*ナビコンテンツ*/
.navi-title{padding:5px 0px;font-size:15px;text-align:right;font-weight:bolder;}
.navi-cont{margin:0px 0px 20px 0px;font-size:13px;text-align:right;}
.navi-cont ul{list-style-type:none;}
.navi-cont li{margin:0px 0px 5px;}
.ad{text-align:right;}

/*カレンダー*/
.navi-cont table{width:196px;}
.calendar_month{text-align:center;}
.weekday, .cell{width:28px;padding:1px;text-align:center;}

/*記事*/
.entry-box{padding:0px 0px 50px;}
.entry-title{padding:5px 10px;font-size:13px;}
.entry-desc, .prof-desc{padding:15px 10px 10px;font-size:13px;line-height:21px;}
.entry-more{padding:5px 10px;font-size:13px;}
.entry-sequel{padding:5px 10px 5px 25px;font-size:13px;line-height:21px;}
.entry-date{padding:5px 10px;font-size:11px;text-align:right;}

/*コメント、TB*/
.com-box, .tb-box{margin:30px 0px 20px;}
.com-title, .tb-title01{padding:3px 10px;font-size:15px;font-weight:bolder;}
.tb-title02{margin:15px 0px 0px;padding:3px 10px;font-size:13px;}
.tb-url{margin:15px 0px 0px;padding:3px 10px;font-size:13px;}
.com-desc, .tb-desc{padding:15px 10px 10px;font-size:14px;line-height:21px;}
.com-date, .tb-date{padding:0px 10px;font-size:11px;text-align:right;}

/*コメント投稿(線-ピンク)*/
.com-post{padding:15px 10px 0px;}
.post01{font-size:15px;}
.post02{margin:0px 0px 5px;padding:3px;background-color:#000000;color:#f9f9f9;font-size:15px;border:2px solid #e5004f;}
.post03{margin:5px 0px 10px;padding:2px;background-color:#000000;color:#ff0045;font-size:15px;border:2px solid #e5004f;}

/*プロフィール*/
.prog-desc img{border:none;}

/*ページナビ*/
.page-navi01{padding:0px 0px 15px;font-size:13px;text-align:center;}
.page-navi02{padding:15px 0px;font-size:13px;}

/*フッタ*/
#copy{padding:10px 0px;font-size:15px;}

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