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

ホーム

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

テンプレート名 : 黒背景、白文字大きめ

HTML・CSSをコピーして使う

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={site_encoding}" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title>{site_title}</title>

</head>

<div id="top" name="top"><span>&nbsp;</span><a href="#contents" title="本文の先頭へ">Skip&nbsp;to&nbsp;content&nbsp;▼</a></div>

<div id="header" class="sap-content">			
				
				<h1 title="{site_title}">{blog_name}</h1>
				<h2 id="description" title="{blog_description}">{blog_description}</h2>
				
	
				<h2>global navigation</h2>
				<div id="nav-global">
					<ul id="nav-g">
						<li class="first"><a href="./" title="ホーム">ホーム</a></li>
						<li class="last">&nbsp;</li>
					</ul>	
				</div>

<div id="freespace1" class="sap-content">
					<div class="note">
						<div class="notelabel">{freespace_title1}</div>
						<div class="note-body">{freespace_contents1}</div>
					</div>
				</div>

</div>
		</div>

<div id="main" class="item">

<div class="entry-link">
						{prev_entry}&nbsp;|&nbsp;<a href="./" title="ホーム">ホーム</a>&nbsp;|&nbsp;{next_entry} 
					</div>

<div class="entry">
           	<div class="notelabel">{freespace_title2}</div>
           	<div class="note-body">{freespace_contents2}</div>
          </div>

<h2>main&nbsp;contents</h2>
					
					<div class="entry">
									
						<div class="entry-date">
							{entry_year}年{entry_month}月{entry_day}日（{entry_jpn_week}）&nbsp;/&nbsp;{category_name}&nbsp;/&nbsp;by&nbsp;{user_name}
						</div>
						<div class="entrylabel">
							<h3 id="{eid_num}{page_num}{cid_num}{moth_yymm}{day_yymmdd}{index}" class="entry-title">
								<a href="{entry_permalink}" title="{entry_title}">{entry_title}</a>
							</h3>
						</div>
						<div class="entry-body border">
							<div class="entry-description">{entry_description}</div>
							<div class="entry-more"><div class="jgm_entry_desc_mark">{entry_sequel}</div></div>{love_soft}
						</div>						<div class="entry-state">
							{comment_num},&nbsp;{trackback_num}&nbsp;&nbsp;<a href="#contents" title="本文の先頭へ">本文の先頭へ▲</a>
						</div>

</div>
					{trackback_auto_discovery}

<dl id="comment" name="comments">
							<dt>この記事のコメント</dt>
							
							<dd>
									<div class="border">{comment_name},&nbsp;{comment_time}</div>
									<p>{comment_description}</p>
							</dd>
							
																	
							<dt>コメントする</dt>
							<dd class="form_area">
								<form name="comment_area" action="./?mode=comment" method="post">
									<fieldset>
										<input type="hidden" name="entry_id" value="{entry_id}" />
										<label for="name">名前：</label><br />
										<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" class="form" /><br />
										<label for="email">eメールアドレス：</label><br />
										<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="form" /><br />
										<label for="url">URL：</label><br />
										<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="form" /><br />
										<label for="description">コメント：</label><br />
										<textarea tabindex="4" id="description" name="description" rows="7" cols="50" class="form">コメントをお願いします</textarea><br /><br />
			
										<input tabindex="5" type="submit" value="送信" onclick="javascript:setval();" onkeypress="javascript:setval();" class="button" />
										<input type="checkbox" name="set_cookie" value="1" id="set_cookie" />
										<label for="set_cookie">入力情報をCookieに登録しますか？</label>
									</fieldset>
								</form>
							</dd>
						</dl>

<dl id="trackback" name="trackback">
							<dt>この記事のトラックバックURL</dt>
							<dd class="tb-url">
								<label for="url">URL：</label><br />
								<input type="text" value="{trackback_url}" class="form" tabindex="0" accept="7" />
							</dd>

<dt>この記事のトラックバック</dt>								
							
							<dd>
								<div class="border">{trackback_blog_name},&nbsp;{trackback_time}</div>
								<div class="tb-title border">{trackback_title}</div>
								<p>{trackback_excerpt}</p>
							</dd>

</dl>

<dl id="profile" name="profile">
							<dt>プロフィール</dt>
							<dd>
							<h3 class="border">{profile_name}</h3>
								<p>{profile_description}</p>
							</dd>
						</dl>

<dl id="freespace3" class="entry">
           		<dt class="notelabel">{freespace_title3}</dt>
           		<dd class="note-body">{freespace_contents3}</dd>
         		</dl>

<div id="page-area">
					  	
							<div class="page-navi">{full_pager_link}</div>
					  	
							<div class="contents-top"><a href="#contents" title="本文の先頭へ">本文の先頭へ▲</a></div>
						</div>

</div>

<h2>supp&nbsp;contents</h2>
					
					<dl id="category" class="entry">
          	 <dt class="supplabel">カテゴリ</dt>
         	  <dd class="supp-body">{category_list}</dd>
        	 </dl>
					
				
					
					<dl id="archives" class="entry">
						<dt class="supplabel">月別記事</dt>
						<dd class="supp-body">{archives_list2ex}</dd>
					</dl>

<dl id="latest-entry" class="entry">
						<dt class="supplabel">新着記事</dt>
						<dd class="supp-body">{latest_entry_list}</dd>
					</dl>
					
			
					
					<dl id="recent-comment" class="entry">
						<dt class="supplabel">最新コメント</dt>
						<dd class="supp-body">{recent_comment_list2}</dd>
					</dl>

<dl id="recent-trackback" class="entry">
						<dt class="supplabel">最新トラックバック</dt>
						<dd class="supp-body">{recent_trackback_list2}</dd>
					</dl>

<dl id="freespace4" class="entry">
           	<dt class="supplabel">{freespace_title4}</dt>
           	<dd class="supp-body">{freespace_contents4}</dd>
         	</dl>

<div id="to-top">
						<div class="contents-top"><a href="#contents" title="本文の先頭へ">本文の先頭へ▲</a></div>
					</div>

</div>
			</div>

</div>

<div id="subcol" class="item">
			<div class="side">
				<div class="sidebox">
				
					<h2>local navigation</h2>
					<dl id="nav-local" class="subNavi">
						<dt>ナビゲーション</dt>
						<dd>
							<ul id="nav-l">
								<li class="first"><a href="#contents" title="本文">本文</a></li>
								<li><a href="#category" title="カテゴリー">カテゴリー</a></li>
								<li><a href="#archives" title="月別記事">月別記事</a></li>
								<li><a href="#latest-entry" title="新着記事">新着記事</a></li>
								<li><a href="#recent-comment" title="最新コメント">最新コメント</a></li>
								<li><a href="#recent-trackback" title="最新トラックバック">最新トラックバック</a></li>
								<li><a href="#search-area" title="検索">検索</a></li>
								<li><a href="#calendar" title="カレンダー">カレンダー</a></li>
								<li><a href="#user-list" title="メンバーリスト">メンバーリスト</a></li>
								<li><a href="#link" title="リンク">リンク</a></li>
								<li class="last"><a href="#moblie" title="携帯用QRコード">携帯用QRコード</a></li>
							</ul>
						</dd>
					</dl>
					
					<h2>sub&nbsp;contents</h2>
					
					<dl id="search-area">
						<dt class="sidelabel">検&nbsp;索</dt>
						<dd>
							<form method="get" action="./">
								<input id="search" name="search" size="20" style="width:118px" class="search" value="" tabindex="0" accesskey="8" />
								<input type="submit" value="search" class="btn" tabindex="0" accesskey="9" />
							</form>
						</dd>
					</dl>
					
					
					
					<dl id="calendar">
						<dt class="sidelabel">カレンダー</dt>
						<dd>
							<table class="date" border="0" cellspacing="1" cellpadding="0" summary="曜日"><tr><td class="cell sun">日</td><td class="cell">月</td><td class="cell">火</td><td class="cell">水</td><td class="cell">木</td><td class="cell">金</td><td class="cell sat">土</td></tr></table>
							{calendar}
						</dd>
					</dl>

<dl id="user-list">
						<dt class="sidelabel">メンバーリスト</dt>
						<dd>{user_list}</dd>
					</dl>

<dl id="others">
						<dt>others</dt>
						<dd>
							<ul>
 								<li><a href="./admin/" title="管理者ページ">管理者ページ</a></li>
								<li><a href="./?mode=rss" title="RSS1.0">RSS1.0</a></li>
								<li><a href="./?mode=atom" title="Atom0.">Atom0.3</a></li>
							</ul>
							<ul>
								<li>書いた記事数:{all_entry_count}</li>
								<li>最後に更新した日:{last_entry_date}</li>
							</ul>
						</dd>
					</dl>

<dl id="link" class="subNavi">
						<dt>リンク</dt>
						<dd>
							<ul>
								<li>{link_list}</li>
							</ul>
						</dd>
					</dl>

<dl id="moblie">
						<dt class="sidelabel">携帯用QRコード</dt>
						<dd>{site_qrcode}</dd>
					</dl>

<dl id="amazon-area">
						<dt>{amazon_Creator}</dt>
						<dd class="ditch">{amazon_item}</dd>
					</dl>

<dl id="freespace5">
						<dt class="sidelabel">{freespace_title5}</dt>
						<dd>{freespace_contents5}</dd>
					</dl>

<dl id="ad">
						<dt>sponsored links</dt>
						<dd>{ad}</dd>
					</dl>

<dl id="powered">
						<dt>powered</dt>
						<dd>{powered}</dd>
					</dl>

<div class="contents-top">
						<a href="#contents" title="本文の先頭へ">本文の先頭へ▲</a>
					</div>

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

<div id="site-info">
			<div id="footer" class="sap-content">
	
				<h2>assist navigation</h2>
				<dl id="nav-assist">
     			<dt>ブログテンプレート</dt>
     			<dd>
     				<ul>
     					<li><a href="https://jugem.jp/design/" title="ブログテンプレート一覧">ブログテンプレート一覧</a></li>
     				</ul>
     			</dd>
     			<dd>
     				<ul>
     					<li><a href="https://jugem.jp/utf/" title="ユーザー作成テンプレート「utf」">User Template File</a></li>
     				</ul>
     			</dd>
     			<dd>
     				<ul>
     					<li><a href="https://jugem.jp/design/dress/?ref=templatebnr" title="JUGEM dressでかんたん、コーディネート">JUGEM dress</a></li>
     				</ul>
     			</dd>
   			</dl>
   	
				<br class="clear" />
		
				<h2>site&nbsp;information</h2>
				<address>{copyright}</address>
				<div id="end" name="end">Template&nbsp;designed&nbsp;by&nbsp;<a href="http://hopi-r.jugem.jp/" title="ホピロボ">hopi-r</a></div>
		
			</div>
		</div>

</div>
</div>

</body>
</html>

CSS

@charset "euc-jp";

/*======================================

======================================*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
margin:0;
padding:0;
}

body {
line-height:1;
font-size:small;
font:x-small;
font-family:Arial, Helvetica, sans-serif;
}

ol,ul {
list-style:none;
}

blockquote,q {
quotes:none;
}

:focus {
outline:0;
}

ins {
text-decoration:none;
}

del {
text-decoration:line-through;
}

table {
border-collapse:collapse;
border-spacing:0;
font-size:inherit;
font:100%;
}

select,input,textarea {
font-size:99%;
}

body {
font-size:small;
font:x-small;
font-family:Arial, Helvetica, sans-serif;
}

table {
font-size:inherit;
font:100%;
}

select,input,textarea {
font-size:99%;
}

* {
line-height:1.6;
font-size:16px;
font-style:normal;
margin:0;
padding:0;
}

body {
line-height:160%;
color:#fafafa;
background:#191919 url(none);
font-size:62.5%;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐ ゴシック", "MS P Gothic", sans-serif;
text-align:center;
text-shadow:1px 1px 0 #000;
padding:0;
}

pre {
border:3px solid #eee;
width:auto;
overflow:scroll;
color:#e9e9e9;
background:#151515 url(http://img-cdn.jg.jugem.jp/e1f/447852/20101219_1554892.gif) no-repeat top right;
font-family:"Osaka-等幅", monospace;
padding:0.5em 10px;
}

p {
font-weight:400;
margin:1.2em 8px;
}

blockquote {
color:#fafafa;
background:#0d0d0d url(http://img-cdn.jg.jugem.jp/e1f/447852/20101219_1554890.gif) top left no-repeat;
margin:1.5em 0 1.5em 80px;
padding:24px;
}

cite {
display:block;
color:#e9e9e9;
text-align:right;
}

em.ja {
color:#fff;
font-style:normal;
}

em.en {
font-style:oblique;
}

strong {
font-weight:700;
}

code {
font-family:"Osaka-等幅", monospace;
}

addr,acronym {
border-bottom:1px dotted #aaa;
cursor:help;
}

kbd {
border:1px solid #ccc;
background-color:#0d0d0d;
font-family:"Osaka-等幅", monospace;
text-transform:uppercase;
padding:0 0.3em;
}

q {
color:#fafafa;
background-color:#0d0d0d;
}

h1,h2,h3,h4,h5,h6 {
line-height:1.2;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐ ゴシック", "MS P	Gothic";
font-weight:700;
margin:0.8em 10px;
}

a {
color:#fafafa;
background:#060606 url(none);
text-decoration:underline;
outline:none;
}

a:link {
color:#a9bce8;
text-decoration:underline;
}

a:visited {
color:#d8bfd8;
background:#191919;
text-decoration:underline;
}

a:hover {
color:#fff;
background:#cb1714 url(none);
text-decoration:underline;
text-shadow:1px 1px 1px #000;
}

a:focas {
color:#fff;
background:#b31411 url(none);
text-decoration:underline;
text-shadow:1px 1px 1px #000;
}

a:active {
padding-top:2px;
color:#ee82ee;
background-color:#180302;
}

img {
border:solid 0 transparent;
}

#container {
width:100%;
min-width:760px;
max-width:1920px;
font-size:1.6em;
text-align:left;
zoom:1;
margin:0 auto;
}

#container:before,#container:after {
content:"";
display:table;
}

#container:after {
clear:both;
}

#minwidth {
float:left;
width:100%;
min-width:760px;
height:100%;
display:block;
position:relative;
}

.item {
position:relative;
float:left;
left:100%;
}

.sap-content {
text-align:left;
margin:0;
padding:5px 0;
}

#xcol {
margin-left:-100%;
width:100px;
z-index:2;
}

#main {
margin-left:-100%;
width:100%;
}

#main #incontents {
margin-left:100px;
margin-right:200px;
}

#subcol {
margin-left:-180px;
width:180px;
z-index:1;
}

#subcol .side {
border-top:solid 1px #0d0d0d;
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20101219_1554895.gif) repeat-x left bottom;
width:180px;
}

#site-info {
width:100%;
clear:both;
}

h1 {
font-size:1.8em;
}

h2 {
font-size:1.7em;
}

h3 {
font-size:1.6em;
}

h4 {
font-size:1.5em;
}

h5 {
font-size:1.4em;
}

h6 {
font-size:1.35em;
}

#branding h2,#container h2,#site-info h2 {
color:#c5c5c5;
font-weight:400;
font-size:1.1em;
margin:0;
padding:0.1em 0;
}

input.button {
cursor:pointer;
}

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

#top {
background-color:#0d0d0d;
text-align:center;
opacity:0.8;
}

#top a,#top a:link {
border-bottom:solid 1px #535353;
display:block;
}

#top a:hover {
opacity:1;
}

#top span {
position:absolute;
width:80px;
height:100%;
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20110430_1921813.gif) repeat-y;
top:0;
left:0;
z-index:3;
}

#header {
margin-left:100px;
vertical-align:top;
text-align:left;
}

#header h1 {
color:#c5c5c5;
font-family:Verdana, "ＭＳ Ｐ ゴシック", "MS P	Gothic", "中ゴシック体", Osaka;
margin:0;
padding:0 0 8px;
}

#header h1 a {
text-decoration:none;
}

#header h1 a:hover {
text-decoration:underline;
text-shadow:1px 1px 0 #180302, 2px 2px 0 #c5c5c5;
}

#header h2#description {
margin-bottom:18px;
color:#fafafa;
font-family:Verdana, "ＭＳ Ｐ ゴシック", "MS P	Gothic", "中ゴシック体", Osaka;
font-weight:400;
font-size:1.1em;
}

#nav-global {
background-color:#060606;
}

#nav-g {
vertical-align:middle;
background-color:#060606;
text-align:center;
zoom:1;
display:inline-block;
margin:0 auto;
padding:0;
}

#nav-g:before,#nav-g:after {
content:"";
display:table;
}

#nav-g:after {
clear:both;
}

#nav-g li {
border-left:solid 1px #0d0d0d;
background-color:#060606;
width:199px;
height:100%;
float:left;
list-style-type:none;
color:#fafafa;
text-align:left;
margin:0;
padding:0;
}

#nav-g li a {
border:none;
display:block;
position:relative;
color:#fafafa;
font-family:Arial;
font-weight:700;
font-size:1em;
text-decoration:none;
padding:4px 1px;
}

#nav-g li a:hover,#nav-g li a:focus {
color:#fff;
background-color:#cb1714;
text-decoration:underline;
}

#nav-g li.first {
border:none;
}

#nav-g li.current {
color:#fafafa;
background-color:#780c0e;
}

#nav-g li.current > a {
pointer-events:none;
cursor:default;
}

.entry,.entry0,.entry1,.note {
margin-bottom:10px;
}

.entry,.entry0,.entry1 {
width:100%;
}

.entry-foot {
margin-bottom:10px;
width:100%;
text-align:left;
}

.entry-link {
font-size:0.9em;
}

.page-link {
font-size:0.9em;
text-align:center;
margin:10px auto;
}

.notelabel {
border-top:solid 1px #535353;
border-bottom:solid 1px #3f3f3f;
font-family:"ヒラギノ明朝 Pro W3", "MS P 明朝", serif;
font-weight:700;
font-size:1.2em;
margin:0;
padding:3px 1px 2px;
}

.supplabel {
border-top:solid 1px #535353;
border-bottom:solid 1px #3f3f3f;
font-weight:700;
margin:0;
padding:3px 1px 2px;
}

.entrylabel {
font-family:"ヒラギノ明朝 Pro W3", "MS P 明朝", "平成明朝", serif;
font-weight:700;
margin:0;
padding:1px;
}

.entry-title {
border-top:solid 1px #535353;
border-bottom:solid 1px #3f3f3f;
display:block;
line-height:1.1em;
font-family:"Georgia";
font-weight:700;
text-shadow:5px 2px 5px #000;
margin:0;
padding:0;
}

.entry-title a:hover {
text-shadow:2px 1px 2px #3c0706;
}

.entry-title a:active {
color:#fff7be;
background-color:#180302;
}

.entry-date {
border-top:solid 1px #53553;
}

.border {
border-bottom:1px dotted #3f3f3f;
padding:0;
}

.note-body,.supp-body {
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20101219_1554895.gif) repeat-x left bottom;
padding:2px 1px 4px;
}

.entry-body,.comment-body,.trackback-body {
width:100%;
height:100%;
padding:1px;
}

.note-body p a,.note-body p a:link,.note-body p a:active,.supp-body p a,.supp-body p a:link,.supp-body p a:active,.entry-body p a,.entry-body p a:link,.entry-body p a:active {
margin-right:8px;
display:inline-block;
font-weight:700;
border-color:#787878 #474747 #535353 #6a6a6a;
border-style:solid;
border-width:1px;
padding:4px 2px;
}

.note-body p a:visited,.supp-body p a:visited,.entry-body p a:visited {
border:1px solid #823872;
background:transparent;
font-weight:700;
}

.note-body p a:hover,.supp-body p a:hover,.entry-body p a:hover {
background-color:#ef1b17;
border-color:#cb1714 #b31411 #b31411 #cb1714;
border-style:solid;
border-width:1px;
}

.note-body p a:active,.supp-body p a:active,.entry-body p a:active {
color:#ee82ee;
background-color:#180302;
}

.entry-state {
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20101219_1554895.gif) repeat-x left bottom;
text-align:right;
padding:2px 0 4px;
}

.entry p:first-letter,.entry0 p:first-letter,.entry1 p:first-letter {
display:inline;
float:left;
color:#fdfdfd;
font-weight:700;
font-size:1.29em;
text-shadow:1px 2px 2px #000;
margin:0;
padding:0 0.2em 0 0;
}

.entry li,.entry0 li,.entry1 li {
margin-left:20px;
list-style-type:circle;
}

.supp-body li {
list-style-type:none;
margin:0;
}

.entry-body:hover a img {
opacity:0.7;
}

.entry-body:hover a img:hover {
opacity:1;
}

img.spacer {
width:2px;
height:6px;
}

.lead-image {
height:0;
margin:0;
}

a .lead-image {
cursor:pointer;
}

ul.thumbnail {
list-style-type:none;
margin:0.5em 16px;
padding:0;
}

ul.thumbnail li {
display:inline;
float:left;
list-style-type:none;
margin:0 8px 8px 0;
padding:4px;
}

ul.arrange {
display:inline-block;
width:100%;
_height:1%;
list-style-type:none;
zoom:1;
margin:0;
padding:0;
}

ul.arrange:before,ul.arrange:after {
content:"";
display:table;
}

ul.arrange:after {
clear:both;
}

ul.arrange li {
display:inline;
float:left;
list-style-type:none;
white-space:nowrap;
margin:0;
padding:2px 4px 2px 0;
}

.continue {
clear:both;
margin:0.5em 16px;
}

.entry-title a,.entry-title a:link,ul.arrange,ul.arrange li {
display:block;
}

ul.thumbnail li img,ul.arrange li img {
vertical-align:bottom;
}

#related,#comment,#trackback,#profile {
margin-bottom:10px;
border-top:solid 1px #3f3f3f;
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20101219_1554895.gif) repeat-x left bottom;
color:#fafafa;
padding:5px 1px;
}

#comment .form,#trackback .form {
width:378px;
}

#comment #description {
width:99.3%;
}

#trackback .tb-url {
margin-bottom:10px;
}

#trackback .form {
width:478px;
font-weight:700;
}

#trackback .tb-title {
font-weight:bolder;
}

fieldset {
padding:2px 1px;
}

input,textarea {
background:#0d0d0d url(none);
color:#fafafa;
}

input:focus,textarea:focus {
background:#030303 url(none);
color:#fff;
}

#related dt,#comment dt,#trackback dt,#profile dt {
font-size:1.15em;
font-family:"Arial";
font-weight:700;
margin:4px 0;
padding:1px;
}

#related dd,#comment dd,#trackback dd,#profile dd {
padding-bottom:10px;
clear:both;
}

#related p,#comment p,#trackback p,#profile p {
margin:0;
padding:3px 1px 1em;
}

.page-navi {
width:100%;
font-size:0.9em;
padding:10px 0 20px;
}

.page-navi span {
margin:0 3px;
}

.page-navi span.current {
font-weight:700;
padding:4px 7px;
}

.page-navi span a {
background-color:#0d0d0d;
text-decoration:none;
padding:4px 7px;
}

.page-navi span a:hover,#pager span a:active {
background-color:#cb1714;
}

.entry-foot .contents-top,#page-area .contents-top,#to-top .contents-top {
text-align:right;
}

#category ul,#category li {
display:block;
list-style-type:none;
margin:0;
padding:0;
}

#category ul {
display:inline-block;
width:100%;
_height:1%;
zoom:1;
}

#category ul:before,#category ul:after {
content:"";
display:table;
}

#category ul:after {
clear:both;
}

#category li {
float:left;
list-style-type:none;
white-space:nowrap;
margin:0;
padding:2px 4px 2px 0;
}

.sidebox {
width:100%;
margin:0;
padding:0;
}

.sidelabel {
border-top:solid 1px #535353;
border-bottom:solid 1px #3f3f3f;
font-weight:700;
margin:0;
padding:0 1px;
}

.side dl {
overflow:auto;
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20101219_1554895.gif) repeat-x left bottom;
padding:0 0 4px;
}

.side dt {
margin-top:4px;
font-weight:bolder;
padding:4px 1px 2px;
}

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

.side li {
margin-bottom:5px;
line-height:130%;
}

.side p:first-letter {
display:inline;
float:left;
color:#fdfdfd;
font-weight:700;
font-size:1.29em;
text-shadow:1px 2px 2px #000;
margin:0;
padding:0 0.2em 0 0;
}

.subNavi dl {
display:inline;
}

.subNavi dt {
border-top:solid 1px #131313;
padding:4px 1px 2px;
}

.subNavi ul {
width:100%;
overflow:hidden;
margin:0;
padding:0;
}

.subNavi ul li {
display:inline;
list-style-type:none;
margin:0;
padding:0;
}

.subNavi ul li a {
border-bottom:solid 1px #0d0d0d;
display:block;
position:relative;
text-decoration:none;
padding:2px 0;
}

.subNavi ul li a:hover {
text-decoration:underline;
}

.subNavi ul li a:active {
color:#fff7be;
background-color:#180302;
}

.subNavi ul li.current a {
background-color:#fff7bf;
}

.subNavi ul li.current > a {
pointer-events:none;
cursor:default;
}

.subNavi:hover ul:hover a {
opacity:0.5;
}

.subNavi:hover ul:hover a:hover {
opacity:1;
}

.side input.search {
margin-bottom:5px;
border-top:solid 1px #131313;
border-bottom:solid 1px #0d0d0d;
border-right:1px solid #0d0d0d;
border-left:1px solid #131313;
background-color:#0d0d0d;
width:94%;
padding:1px 0;
}

.side input.search:focus {
background-color:#030303;
}

.side input.button {
cursor:pointer;
}

#calendar .cell {
width:24px;
height:22px;
vertical-align:middle;
text-align:center;
border-color:#0d0d0d #131313 #131313 #0d0d0d;
border-style:solid;
border-width:1px;
padding:0;
}

#calendar .sun {
color:#ff0100;
}

#calendar .sat {
color:#4040c3;
}

#calendar .date {
font-weight:bolder;
}

#calendar .cell a,#calendar .cell a:link,#calendar .cell a:visited,#calendar .cell a:active {
display:block;
width:24px;
height:22px;
font-weight:700;
}

#profile h3 {
font-size:1em;
margin:0;
padding:1px;
}

.side .ditch {
padding:0 2px;
}

.centering {
margin-right:auto;
margin-left:auto;
text-align:center;
}

.side p,#calendar table {
margin:0;
}

#footer {
margin-left:100px;
width:680px;
}

#footer h2 {
font-weight:400;
font-size:1.1em;
margin:0;
padding:1px;
}

#footer address {
padding-left:200px;
font-weight:400;
font-style:normal;
}

#nav-assist dd {
float:left;
width:200px;
}

#nav-assist ul a {
display:block;
}

#end {
margin-left:400px;
}

/*======================================

IE6以下のバージョンに適用

======================================*/

/* IE5.0と IE5.5はボックスのパディングとボーダーを含めた範囲として高さや幅を設定してしまうので、少し余裕を取るために IE6以下のバージョンに適用 */
/* IE6.0は、大きさが指定されたボックスに内容が入りきらなくなると、ボックス自体を拡張してしまうので、少し余裕を取るために IE6以下のバージョンに適用 */

* html body pre {
width:95%;
}
* html body .entry .entry-description,* html body .entry .entry-more, * html body .side .sidebox {
width:92%;
}

/* IE6でリサイズ時にずれる */
* html body #contents {
position:relative;
}

/*======================================

CSS3  Firefox(Gecko), Chrome & Safari(Webkit), Opera(Presto)

======================================*/

body:before	{
content:"";
position:fixed;
top:-10px;
left:0;
width:100%;
height:10px;
z-index:100;
-webkit-box-shadow:0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow:0px 0px 10px rgba(0,0,0,.8);
box-shadow:0px 0px 10px rgba(0,0,0,.8);
}

blockquote {
-webkit-background-clip:padding-box; /* Webkit */
-webkit-border-radius:18px;
-webkit-box-shadow: 2px 2px 4px #000;
-moz-border-radius:18px; /* Gecko */
-moz-box-shadow: 2px 2px 4px #000;
border-radius:18px;
box-shadow: 2px 2px 4px #000;
}

a:link {
-webkit-transition:color .1s linear .05s; /* Webkit */
-moz-transition:color .1s linear .05s; /* Gecko */
-o-transition:color .1s linear .05s; /* Presto */
-ms-transition:color .1s linear .05s;
transition:color .1s linear .05s;
}

a:visited {
-webkit-transition:color .15s linear .1s;
-moz-transition:color .15s linear .1s;
-o-transition:color .15s linear .1s;
-ms-transition:color .15s linear .1s;
transition:color .15s linear .1s;
}

a:hover {
background:-webkit-gradient(linear,left top,left bottom,from(#ef1b17),to(#cb1714));
background:-moz-linear-gradient(top,#ef1b17,#cb1714);
-webkit-transition:color .2s linear;
-moz-transition:color .2s linear;
-o-transition:color .2s linear;
-ms-transition:color .2s linear;
transition:color .2s linear;
}

a img	{
-webkit-transition:all .25s ease-in-out;
-moz-transition:all .25s ease-in-out;
-o-transition:all .25s ease-in-out;
-ms-transition:all .25s ease-in-out;
transition:all .25s ease-in-out;
}
a img:hover	{
-webkit-transform:rotate(-7deg);
-webkit-box-reflect: left 2px -webkit-gradient(linear,  right top, left top, from(transparent), color-stop(.7, transparent), to(white));
-moz-transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
-o-transform:rotate(-7deg);
}

input[type="submit"]::-moz-focus-inner {
border:0px;
}

#nav-g {
-webkit-background-clip:padding-box;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
#nav-g li:first-chid a {
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}

.entry-title a:hover {
background:-webkit-gradient(linear,left top,right bottom,from(#ef1b17),to(#cb1714));
background:-moz-linear-gradient(0deg,#ff450c,#ef1b17 20%,#cb1714);
}
.entry-title a:active {
background:-webkit-gradient(linear,left top,right bottom,from(#fffce6),to(#fff7bf));
background:-moz-linear-gradient(270deg,#fff,#fffce6 40%,#fff7bf);
}

.note-body p a:link,
.supp-body p a:link,
.entry-body p a:link {
background:-webkit-gradient(linear,left top,left bottom,from(#0d0d0d),to(#000));
background:-moz-linear-gradient(top,#0d0d0d,#000);
-webkit-border-radius:4px;
-webkit-box-shadow:4px 4px 4px #000;
-moz-border-radius:4px;
-moz-box-shadow:4px 4px 4px #000;
border-radius:4px;
box-shadow:4px 4px 4px #000;
}
.note-body p a:visited,
.supp-body p a:visited,
.entry-body p a:visited {
-webkit-box-shadow:0 0 0 transparent;
-moz-box-shadow:0 0 0 transparent;
box-shadow:0 0 0 transparent;
}
.note-body p a:hover,
.supp-body p a:hover,
.entry-body p a:hover {
background:-webkit-gradient(linear,left top,left bottom,from(#cb1714),to(#b31411));
background:-moz-linear-gradient(top,#cb1714,#b31411);
-webkit-box-shadow:1px 1px 1px #000;
-moz-box-shadow:1px 1px 1px #000;
box-shadow:1px 1px 1px #000;
}
.note-body p a:active,
.supp-body p a:active,
.entry-body p a:active {
background:-moz-radial-gradient(0deg,#3c0706,#180302);
}

.side dt {
-webkit-background-clip:padding-box;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}

.subNavi dt, .supplabel {
-webkit-background-clip:padding-box;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:0;
-webkit-border-bottom-right-radius:0;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:0;
-moz-border-radius-bottomright:0;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}

.subNavi ul li a {
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.subNavi ul li a:hover {
background:-webkit-radial-gradient(top left,ellipse,#ef1b17,#cb1714,#b31411);
background:-moz-radial-gradient(top left,ellipse,#ef1b17,#cb1714,#b31411);
-webkit-transform:translate(18px,0) scale(1.2);
-webkit-border-radius:5px;
-webkit-box-shadow:1px 1px 1px #000;
-moz-transform:translate(18px,0) scale(1.2);
-moz-border-radius:5px;
-moz-box-shadow:1px 1px 1px #000;
-o-transform:translate(18px,0) scale(1.2);
-ms-transform:translate(18px,0) scale(1.2);
transform:translate(18px,0) scale(1.2);
border-radius:5px;
box-shadow:1px 1px 1px #000;
}
.subNavi ul li a:active {
background:-moz-radial-gradient(0deg,#3c0706,#180302);
}

/*======================================

IE6以下のバージョンに適用

======================================*/

/* 透明色が使えないIE6以下用 */
* html img {
border:none;
}
* html a img {
border:solid 0 #4040da;
}
* html a:hover img {
border:solid 0 #ef1b17;
}

/*======================================

テンプレート修正用

======================================*/

/* テンプレート修正用赤点線 */
/* div {border:dashed 1px #f00f00;} */
/* div {outline:dashed 1px #ff00ff;} */

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