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

ホーム

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

テンプレート名 : 3_faux_absolute07

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="container">
	<div id="minwidth">
		
		<a id="top" name="top"></a>

<div id="branding">

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

<div id="branding-area" class="sap-content">
				
				<h1 title="{site_title}"><span>&nbsp;</span>{blog_name}</h1>
				<h2 title="{blog_description}">{blog_description}</h2>
				
			</div>

</div>

<div id="freespace1" class="sap-content">
		   
		   <div class="rounded-corners">
		     <div class="corners-top"><div></div></div>
					<div class="corners-content">
					<div class="notelabel centering">{freespace_title1}</div>
					<div class="entry-body border centering">{freespace_contents1}</div>
				</div>
				<div class="corners-bottom"><div></div></div>
			</div>
			
		</div>

<div id="identification">{eid}&nbsp;{entry_sequel_id}&nbsp;{page_num}&nbsp;{cid_num}&nbsp;{moth_yymm}&nbsp;{day_yymmdd}&nbsp;{index}</div>

<div id="xcol" class="item">
			<div class="side">
				<div class="sidebox">

<h2>navigation</h2>
					
					<dl id="nav-global" class="subNavi">
						<dt>ナビゲーション</dt>
						<dd>
							<ul id="nav-g">
								<li><a href="./" title="ホーム">ホーム</a></li>
								<li><a href="#contents" title="本文">本文</a></li>
								<li><a href="#calendar" title="カレンダー">カレンダー</a></li>
								<li><a href="#search-area" title="検索">検索</a></li>
								<li><a href="#user-list" title="メンバーリスト">メンバーリスト</a></li>
								<li><a href="#category" title="カテゴリー">カテゴリー</a></li>
								<li><a href="#archives" title="月別記事">月別記事</a></li>
								<li><a href="#link" title="リンク">リンク</a></li>
								<li><a href="#moblie" title="携帯用QRコード">携帯用QRコード</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>
							</ul>
						</dd>
					</dl>

<dl id="calendar" class="centering">
						<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 class="centering">
						<dt class="sidelabel">カレンダー（縦型）</dt>
						<dd id="calendar-vertical">{calendar_vertical_addzero}</dd>
					</dl>

<dl class="centering">
						<dt>powered</dt>
						<dd class="centering">{powered}</dd>
					</dl>

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

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

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

<a name="contents"></a>
			<div id="contents">
				<div id="incontents" class="sap-content">

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

<div class="entry">
				    
				    <div class="rounded-corners">
				      <div class="corners-top"><div></div></div>
               <div class="corners-content">
               	<div class="notelabel">{freespace_title2}</div>
               	<div class="entry-body border">{freespace_contents2}</div>
               </div>
              <div class="corners-bottom"><div></div></div>
            </div>
            
          </div>

<h2>main&nbsp;contents</h2>
					
					<div class="entry">
					
				    
				    <div class="rounded-corners">
				      <div class="corners-top"><div></div></div>
               <div class="corners-content">
                
									
								<div class="entry-date border">
									{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>
									<a name="liquid"></a>
									<div class="entry-more"><div class="jgm_entry_desc_mark">{entry_sequel}</div></div>
								</div>
								<div class="entry-state">
									{comment_num},&nbsp;{trackback_num}&nbsp;&nbsp;<a href="#contents" title="本文の先頭へ">本文の先頭へ▲</a>
								</div>
					
							
              </div>
            <div class="corners-bottom"><div></div></div>
            </div>

</div>
					{trackback_auto_discovery}

<div class="entry-foot">

<a name="comments"></a>
		
						<dl id="comment">
							
							
							<dt>この記事のコメント</dt>
							<dd>
					    	
					    	<div class="rounded-corners">
					     		<div class="corners-top"><div></div></div>
               		<div class="corners-content">
										<div class="border">{comment_name},&nbsp;{comment_time}</div>
										<p>{comment_description}</p>
									</div>
									<div class="corners-bottom"><div></div></div>
              	</div>
              	
							</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>

<a name="trackback"></a>
							<dl id="trackback">
								<dt>この記事のトラックバックURL</dt>
								<dd class="tb_url">url:<strong>{trackback_url}</strong></dd>

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

<a name="profile"></a>
							<dl id="profile">
								<dt>プロフィール</dt>
			
								<dd>
					    	
					    	<div class="rounded-corners">
					     		<div class="corners-top"><div></div></div>
               		<div class="corners-content">
											<h3 class="border">{profile_name}</h3>
											<p>{profile_description}</p>
									</div>
									<div class="corners-bottom"><div></div></div>
              	</div>
              	
								</dd>
							</dl>

</div>

<div class="entry">
				    
				    <div class="rounded-corners">
				      <div class="corners-top"><div></div></div>
               <div class="corners-content">
               	<div class="notelabel">{freespace_title3}</div>
               	<div class="entry-body border">{freespace_contents3}</div>
               </div>
              <div class="corners-bottom"><div></div></div>
            </div>
            
          </div>

<div id="page-area">
					  
						<div class="page-navi">{prev_page_link}&nbsp;|&nbsp;{page_now}/{page_num}ページ&nbsp;|&nbsp;{next_page_link}</div>
					  
						<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>sub&nbsp;contents</h2>
					
					<dl class="centering">
						<dt class="sidelabel">検&nbsp;索</dt>
						<dd>
							<form method="get" action="./">
								<input id="search" name="search" size="20" style="width:110px" class="search" />
								<input type="submit" value="search" class="btn" />
							</form>
						</dd>
					</dl>

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

<dl>
						<dt class="centering">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>
						</dd>
					</dl>

<dl id="category">
						<dt class="sidelabel">カテゴリー</dt>
						<dd>{category_list}</dd>
					</dl>

<dl id="archives">
						<dt class="sidelabel">月別記事</dt>
						<dd>{archives_list}</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 class="centering">{site_qrcode}</dd>
					</dl>

<dl>
						<dt class="sidelabel">{freespace_title4}</dt>
						<dd>{freespace_contents4}</dd>
					</dl>

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

<dl id="recent-trackback">
						<dt class="sidelabel">最新トラックバック</dt>
						<dd>{recent_trackback_list}</dd>
					</dl>

<dl>
						<dt class="centering">{amazon_Creator}</dt>
						<dd class="ditch">{amazon_item}</dd>
					</dl>

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

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

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

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

<div id="site-info">
			<div id="siteinfo-area" class="sap-content">
				<h2>site&nbsp;information</h2>
				<address>{copyright}</address>
				<div id="end">designed&nbsp;by&nbsp;</div>
			</div>
		</div>
		
		
		<a name="end"></a>

</div>
</div>

</body>
</html>

CSS

@charset "euc-jp";

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

0. CSS initialization

======================================*/
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%;
}

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

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

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

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

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

pre {
border:3px solid #ddd;
width:auto;
overflow:scroll;
color:#3d4263;
background:#fff url(../images/bg_smp.gif) top right no-repeat;
font-family:"Osaka-等幅", monospace;
padding:0.5em 10px;
}

p {
font-weight:400;
margin:0.8em 10px;
}

blockquote {
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
background:#ddd url(http://img-cdn.jg.jugem.jp/e1f/447852/20091205_737557.gif) top left no-repeat;
margin:1.5em 20px 1.5em 40px;
padding:20px;
}

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

em.ja {
color:#000;
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:#f5f5f5;
font-family:"Osaka-等幅", monospace;
text-transform:uppercase;
padding:0 0.3em;
}

q {
background-color:#ffc;
}

a {
color:#191919;
outline:none;
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20081209_611067.png) bottom repeat-x;
}

a:link {
color:#0000cd;
text-decoration:none;
}

a:visited {
color:#8a2be2;
text-decoration:none;
}

a:hover {
color:#ffefd5;
text-decoration:underline;
background:#ef1b17 url(none);
}

a:focas {
color:#ffebcd;
text-decoration:underline;
background:#ef1b17 url(none);
}

a:active {
color:#ff1493;
background-color:#fff080;
}

img {
border:solid 1px transparent;
}

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

======================================*/
#container {
margin-right:auto;
margin-left:auto;
width:100%;
min-width:760px;
max-width:1920px;
font-size:1.3em;
text-align:left;
}

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

#branding {
margin:0 auto;
}

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

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

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

#xcol .side {
border-top:solid 1px #c5c5c5;
border-right:solid 1px #8d8d8d;
border-bottom:solid 1px #8d8d8d;
width:182px;
min-width:182px;
max-width:182px;
}

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

#main #incontents {
margin-left:202px;
margin-right:204px;
}

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

#subcol .side {
border-top:solid 1px #c5c5c5;
border-bottom:solid 1px #8d8d8d;
border-left:solid 1px #c5c5c5;
width:182px;
min-width:182px;
max-width:182px;
}

#site-info {
clear:both;
color:#fafafa;
background-color:#191919;
}

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;
}

input.button {
cursor:pointer;
}

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

#skip-content {
background-color:#fafafa;
text-align:center;
margin:0 auto;
}

#branding #branding-area {
vertical-align:top;
background:#f9f3a9 url(http://img-cdn.jg.jugem.jp/e1f/447852/20091205_737531.gif) top left repeat;
text-align:left;
}

#branding #branding-area h1 {
color:#52b8cf;
letter-spacing:-0.08em;
line-height:1em;
font-family:Verdana;
font-size:6.6em;
margin:-4px 0 0;
padding:0;
}

#branding #branding-area h1 a {
color:#52b8cf;
background:url(none);
}

#branding #branding-area h1 a:hover {
color:#ef1b17;
text-shadow:5px 2px 5px #372517;
}

#branding #branding-area h1 span {
position:absolute;
width:80px;
height:90px;
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20091205_737532.png) 0 10px no-repeat;
}

#branding #branding-area h2 {
color:#333;
font-weight:400;
font-size:1.1em;
margin:0 auto;
padding:0.2em 0 0;
}

#identification {
text-align:left;
clear:both;
}

#main h2,.side h2 {
color:#535353;
font-weight:400;
font-size:1.1em;
margin:0;
padding:0.1em 0.2em;
}

.entry {
margin-bottom:10px;
color:#191919;
}

.rounded-corners {
background-color:#fafafa;
margin:4px 0;
}

.corners-top {
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20091205_737534.gif) no-repeat top right;
}

.corners-top div {
width:20px;
height:20px;
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20091205_737533.gif) no-repeat top left;
}

.corners-bottom {
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20091205_737534.gif) no-repeat bottom right;
}

.corners-bottom div {
width:20px;
height:20px;
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20091205_737533.gif) no-repeat bottom left;
}

.corners-content {
padding:0 20px;
}

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

.notelabel {
border-top:solid 1px #c5c5c5;
border-right:solid 1px #8d8d8d;
border-bottom:solid 1px #8d8d8d;
border-left:solid 1px #c5c5c5;
color:#333;
background-color:#eef8fb;
font-family:"ヒラギノ明朝 Pro W3", "MS P 明朝", serif;
font-weight:700;
font-size:1.2em;
margin:0;
padding:3px 5px 2px;
}

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

.entry-title {
border-bottom:double 3px #52b8cf;
border-left:solid 8px #52b8cf;
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20091205_737535.gif) top left repeat-y;
line-height:1.1em;
font-family:"Georgia";
font-weight:700;
text-shadow:2px 1px 2px #999;
margin:0;
padding:3px 5px 2px 10px;
}

.entry-title a:hover {
text-shadow:5px 2px 5px #372517;
}

.border {
border-bottom:1px dotted #9c938c;
padding:0;
}

.entry-body {
color:#191919;
padding:15px 10px;
}

.entry-description {
margin-left:auto;
margin-right:auto;
width:98%;
text-align:justify;
-ms-text-justify:inter-ideograph;
}

.entry-more {
margin-top:10px;
margin-left:auto;
margin-right:auto;
width:98%;
text-align:justify;
-ms-text-justify:inter-ideograph;
}

.entry-state {
text-align:right;
padding:5px 0;
}

.entry p {
colum-width:18em;
columu-gap:25px;
-moz-colum-width:18em;
-moz-columu-gap:25px;
}

.entry p:first-letter {
float:left;
color:#535353;
font-weight:700;
font-size:1.29em;
text-shadow:2px 1px 2px #999;
margin:0;
padding:0 0.2em 0 0;
}

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

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

.entry img a {
border:0;
background:transparent;
outline:medium solid #e9e9e9;
margin:0 1em 1em 0;
}

.entry img a:hover {
outline:medium solid #ef1b17;
}

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

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

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

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

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

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

#comment .rounded-corners,#trackback .rounded-corners,#profile .rounded-corners {
color:#191919;
background:#fafafa;
}

#comment .form {
width:55%;
}

#comment #description {
width:95%;
}

#trackback .tb-url {
margin-bottom:10px;
width:250px;
text-align:center;
}

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

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

fieldset {
border-top:solid 1px #c5c5c5;
border-right:solid 1px #8d8d8d;
border-bottom:solid 1px #8d8d8d;
border-left:solid 1px #c5c5c5;
color:#1c130c;
background:#fbf6bf;
padding:20px;
}

input.text {
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20090703_685207.gif);
}

textarea {
background:#fff url(http://img-cdn.jg.jugem.jp/e1f/447852/20090703_685207.gif);
}

input:focus,textarea:focus {
background:#d4edf3 url(none);
}

dl#comment,dl#trackback,dl#profile {
width:92%;
margin:30px auto 0;
}

dl#comment dt,dl#trackback dt,dl#profile dt {
margin-top:20px;
margin-bottom:10px;
font-family:"Arial";
font-weight:bolder;
text-align:center;
}

dl#comment p,dl#trackback p,dl#profile p {
color:#191919;
padding:5px 0 0;
}

.sidebox {
margin-left:auto;
margin-right:auto;
width:100%;
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20090703_685205.gif);
}

.sidelabel {
border-top:solid 1px #c5c5c5;
border-right:solid 1px #8d8d8d;
border-bottom:solid 1px #8d8d8d;
border-left:solid 1px #c5c5c5;
color:#fafafa;
background-color:#191919;
font-weight:700;
text-align:center;
margin:0 5px 8px;
padding:5px;
}

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

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

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

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

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

.subNavi dl {
display:inline;
}

.subNavi dt {
margin-bottom:2px;
border-top:solid 1px #c5c5c5;
color:#fafafa;
background-color:#191919;
text-align:center;
padding:6px 8px 4px;
}

.subNavi dd {
margin:0;
padding:0.2em 0;
}

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

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

.subNavi dd ul li a {
border-bottom:1px solid #c5c5c5;
display:block;
position:relative;
text-decoration:none;
-webkit-transition:all 0.5s ease-in-out;
padding:2px 8px;
}

.subNavi dd ul li a:hover {
text-decoration:underline;
-webkit-box-shadow:5px 5px 5px #8d8d8d;
-webkit-transform:translate(10px,0) scale(1.2);
-webkit-border-radius:10px;
text-shadow:2px 1px 2px #372517;
}

.side input.search {
margin-bottom:5px;
border-top:1px solid #c5c5c5;
border-bottom:1px solid #8d8d8d;
border-right:1px solid #8d8d8d;
border-left:1px solid #c5c5c5;
background:#fafafa;
width:96%;
padding:1px 0;
}

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

.side input.button {
cursor:pointer;
}

#calendar-vertical {
text-align:right;
margin:0 40px;
}

#calendar-vertical a,#calendar-vertical a:link,#calendar-vertical a:active {
border:1px solid #4040da;
display:block;
width:66px;
height:50px;
color:#e6e6fb;
background-color:#4040da;
font-size:2.5em;
font-family:"Arial Black";
font-weight:700;
text-align:right;
text-shadow:1px 1px 1px #191919;
padding:0 10px;
}

#calendar-vertical a:visited {
border:1px solid #8a2be2;
color:#a860ea;
background:transparent;
font-weight:700;
text-shadow:2px 1px 2px #666;
}

#calendar-vertical a:hover {
border:1px solid #f35451;
color:#ef1b17;
background-color:#fafafa;
text-shadow:5px 2px 5px #372517;
}

#calendar-vertical .today {
background:#ff8e24;
}

#calendar .cell {
width:22px;
height:20px;
vertical-align:middle;
text-align:center;
border-color:#9c938c #695c51 #695c51 #9c938c;
border-style:solid;
border-width:1px;
padding:0;
}

#calendar .sun {
color:#ff0100;
}

#calendar .sat {
color:#0100fe;
}

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

#calendar .cell a,#calendar .cell a:link,#calendar .cell a:visited,#calendar .cell a:active {
display:block;
width:22px;
height:20px;
color:#fff;
background-color:#4040da;
font-weight:700;
}

#calendar .cell a:visited {
color:#8a2be2;
background-color:#fafafa;
}

#calendar .cell a:hover {
color:#ef1b17;
background-color:#fafafa;
}

#profile h3 {
font-size:1em;
color:#333;
}

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

.contents-top {
text-align:right;
}

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

.centering,#page-area .page-navi,#page-area .contents-top {
margin-right:auto;
margin-left:auto;
text-align:center;
}

#site-info #siteinfo-area h2 {
color:#8d8d8d;
font-weight:400;
font-size:1.1em;
}

#site-info #siteinfo-area address {
font-weight:400;
font-style:normal;
text-align:center;
}

#site-info #siteinfo-area a {
color:#fafafa;
outline:none;
background:url(http://img-cdn.jg.jugem.jp/e1f/447852/20091205_737536.png) bottom repeat-x;
}

#site-info #siteinfo-area a:link {
color:#a9dce8;
}

#site-info #siteinfo-area a:visited {
color:#d8bfd8;
text-decoration:none;
}

#site-info #siteinfo-area a:hover {
color:#ef1b17;
text-decoration:underline;
background:#ffefd5 url(none);
}

#site-info #siteinfo-area a:focas {
color:#ffebcd;
text-decoration:underline;
background:#fee9e8 url(none);
}

#site-info #siteinfo-area a:active {
color:#ee82ee;
}

#end {
color:#8d8d8d;
text-align:right;
}

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

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

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

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

/* IE6で表示できない透過PNGを、IEの独自拡張を使って表示させる */
* html body #branding #branding-area h1 span {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/branding_circle.png");
}

/* IE6では、独自の「expression」メソッドを使用することによって、「min-width」「max-width」を使えます */
* html body #container {
width:expression(document.body.clientWidth < 760? "760px" : document.body.clientWidth > 1920? "1920px" : "auto");
}

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

テンプレート修正用

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

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

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