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

ホーム

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

テンプレート名 : IroKaete

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-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>{site_title}</title>
<link rel="stylesheet" href="{site_css}" type="text/css" />
<link type="text/css" href="{gmo_header_css}" rel="stylesheet" media="screen,print" />
<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 type="text/javascript" src="./template/js/cookie.js"></script>
</head>

<body onload="javascript:initval();">
{gmo_header_src}

<div id="block-header">

		<div id="block-logo">
				<h1>{blog_name}</h1>
					<div id="blog-description">{blog_description}</div>
		</div>

</div>

<div id="block-left-menu">
			

					<div class="box-menu">
						<h2 class="txt-serif">Calendar</h2>
							<div class="calendar-title">
									<table border="0" cellspacing="0" cellpadding="0">
										<tr>
												<td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td>
												<td>Thu</td><td>Fri</td><td>Sat</td>
										</tr>
									</table>
							</div>
							<div class="calendar-day">
									{calendar}
							</div>
					</div>

<div class="box-menu">
						<h2>Link</h2>
							{link_list}
					</div>
					
					
					
					<div class="box-menu">
						<h2>Profile</h2>
							{user_list}
					</div>
					
					
					
					
					<div class="box-menu">
						<h2>Mobile</h2>
							{site_qrcode}
					</div>
					
					
					
					
					<div class="box-menu">
					<h2>Sponsored Links</h2>
							{ad}
					</div>
					
					
					
					
					<div class="box-menu">
						<h2>Others</h2>
							<ul id="list-others">
									<li><a href="./admin/">管理者ページ</a></li>
									<li><a href="./?mode=rss">RSS1.0</a></li>
									<li><a href="./?mode=atom">Atom0.3</a></li>
									<li>{powered}</li>
							</ul>
					</div>

<div class="box-menu">
							<h2>{freespace_title1}</h2>
								{freespace_contents1}
						</div>
					
	
	
					
						<div class="box-menu">
							<h2>{freespace_title2}</h2>
								{freespace_contents2}
						</div>
					
	
	
					
						<div class="box-menu">
							<h2>{freespace_title3}</h2>
								{freespace_contents3}
						</div>
					
	
	
					
						<div class="box-menu">
							<h2>{freespace_title4}</h2>
								{freespace_contents4}
						</div>
					
	
	
					
						<div class="box-menu">
							<h2>{freespace_title5}</h2>
								{freespace_contents5}
						</div>

</div>

<div id="block-left-contents">
			
				
				<div id="block-left-contents-body-sequel">
					<div id="box-entry-sequel" class="clearfix">
 						<span id="txt-sequel-prev">{prev_entry}</span>
						<span id="txt-sequel-next">{next_entry}</span>
						<span id="txt-sequel-main"><a href="./">{blog_name} Top</a></span>
					</div>
				</div>
				
				
				
				<div id="block-left-contents-body">
					<h3 class="txt-entry-title">{entry_title}</h3>
						<div class="box-entry">{entry_description}</div>
						<a name="sequel"></a>
						<div class="box-entry-more">{entry_sequel}</div>
						<div class="box-post-data">{entry_date} | {comment_num} | {trackback_num}</div>
						{trackback_auto_discovery}
				</div>

<a name="comments"></a>
				<div id="block-left-contents-body">

<h4>Commnets</h4>
							<div class="box-comment">
								{comment_description}
							</div>
							<div class="box-comment-writer">{comment_name} | {comment_time}</div>
					
					
					
						<h4>Post a Comment</h4>
							<div id="box-comment-form">
								<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
									<input type="hidden" name="entry_id" value="{entry_id}" />
									<dl>
										<dt><label for="name">Name</label></dt>
											<dd><input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" /></dd>
											
										<dt><label for="email">Email Address</label></dt>
											<dd><input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" /></dd>
											
										<dt><label for="url">URL</label></dt>
											<dd><input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" /></dd>
											
										<dt><label for="description">Commnets</label></dt>
											<dd><textarea tabindex="4" id="description" name="description" rows="10" cols="30" ></textarea></dd>
											
									</dl>
									
									<div id="block-cookie"><label for="set_cookie" id="check-cookie"><input type="checkbox" name="set_cookie" value="1" id="set_cookie" />Cookie</label></div>
									<div id="btn-submit"><input name="submit" type="submit" alt="Submit" title="Submit" accesskey="5" tabindex="5" onclick="javascript:setval();" value="Submit" /></div>
								</form>
							</div>
				</div>
				
				
				
				<a name="trackback"></a>
				<div id="block-left-contents-body">
					<h4>Trackback URL</h4>
						<div class="box-trackback-url">{trackback_url}</div>
					<h4>Trackbacks</h4>
					
					<div class="block-trackback">
						<h5 class="txt-trackback-title">{trackback_title}</h5>
							<div class="box-trackback">{trackback_excerpt}</div>
								<div class="box-trackback-writer">{trackback_blog_name} | {trackback_time}</div>
					</div>
					
				</div>
				
				
				
				<div id="block-left-contents-body">
					<h3 id="txt-profile">{profile_name}</h3>
					<div id="box-profile">{profile_description}</div>
				</div>
				
				
							
		
				
					<div id="box-entry-page" class="clearfix">
 						<span id="txt-page-prev">{prev_page_link}</span>
						<span id="txt-page-next">{next_page_link}</span>
						<span id="txt-page-main">{page_now}/{page_num}PAGES</span>
					</div>
				
		
		</div>
</div>

<div class="box-menu">
				<h2>Category Archives</h2>
				{category_list}
			</div>
		
		
		
			<div class="box-menu">
				<h2>Selected Entries</h2>
				{selected_entry_list}
			</div>

<div class="box-menu">
				<h2>Recent Comments</h2>
				{recent_comment_list}
			</div>

<div class="box-menu">
				<h2>Recent Trackback</h2>
				{recent_trackback_list}
			</div>
		
		
		
	</div>
</div>

<div id="block-footer">
		{copyright}
	</div>

</body>
</html>

CSS

@charset 'EUC-JP';
/* メモ帳等にコピーしてご覧ください */
/* ================================================================================ */
/*      																																						*/
/*      テンプレート「IroKaete」を使っていただいてありがとうございます！						*/
/*      このテンプレートは、使う人に簡単に色を変更していただけるように作りま				*/
/*      した。デザインに画像は一切使用してませんので、CSSの値を変更するだけで				*/
/*      各部所の色を変更出来ます。このCSSファイルの中ほどに色のプロパティを集				*/
/*      めた場所がありますので、そこでガンガンカスタマイズして使ってください。			*/
/*      もちろん、このまま使って下さって結構です（個人的に今とても好きな配色				*/
/*      です）。																																		*/
/*      																																						*/
/* 																															by maruyanma     		*/
/*      																																						*/
/* ================================================================================ */
/*      																																						*/
/*      ++++++　「IroKaete」解説　++++++																						*/
/*      																																						*/
/*      1.Reset Property																														*/
/*      Yahoo! UI Libraryを元に少しいじったものです。ページを観るときに環境					*/
/*      毎でレイアウトが崩れるといった事がないように、各値をリセットしていま				*/
/*      す。この部分は触らないで下さい！																						*/
/*      																																						*/
/*      2.Font Property																															*/
/*      Fontに関する指定を集めています。文字の種類やサイズを指定しています。				*/
/*      この部分も各環境で最適な表示となるように指定しています。CSSの知識が					*/
/*      十分にある方にカスタマイズをお勧めします。																	*/
/*      ※見出しに明朝を使っているのは単なる私の好みです。お上品に見えるから				*/
/*      	指定しました。どんどん変えてね。																					*/
/*      																																						*/
/*      3.Color Property																														*/
/*      この部分にページの全ての色指定を集約しています。														*/
/*      主な変更点は、テキスト色・ブログ全体の背景色・見出し等の背景色・点線				*/
/*      です。色指定は16進数で行ってください。#FFFFFFみたいなやつです。							*/
/*      下記エントリーで16進数を簡単に取得できるサイトを紹介しています。						*/
/*      http://blog-log.jugem.jp/?eid=40																						*/
/*      																																						*/
/*      4.Layout Property 																													*/
/*      主にレイアウトに関する指定を記述しています。この部分の値を少し変える				*/
/*      とレイアウトが大きく崩れる可能性があります。CSSの知識が十分にある方に				*/
/*      カスタマイズをお勧めします。																								*/
/*      																																						*/
/*      5.Parts Property 																														*/
/*      各パーツに関する指定を記述しています。ブログのタイトルの大きさや見出し			*/
/*      部分の太字指定、細かい位置調整等もここで指定しています。										*/
/*      																																						*/  
/*      6.Float Clear																																*/
/*      レイアウト指定で生じたfloatを解除する為の裏技です。IE7にも対応しています。	*/
/*      この部分は触らないで下さい！																								*/
/*      																																						*/
/*      																																						*/
/*      																																						*/
/* ================================================================================ */

/* ================================================================================ */
/*      1.Reset Property                                                            */  
/* ================================================================================ */
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,p,
blockquote,pre,form,fieldset,
input,textarea,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
q:before,
q:after {
content:'';
}
abbr,acronym {
border:0;
}

/* ================================================================================ */
/*			2.Font Property                          	                                  */
/* ================================================================================ */
body,div,table,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,p,
form,input,textarea,select,
caption,pre,code,
th,tr,td {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック', sans-serif;
}
body {
font-size:77%;
}
* html body {
font-size:small;
font:x-small;
}
table {
font-size:inherit;
font:77%;
}
select,input,textarea {
font-size:100%;
}
body * {
line-height:1.5em;
}
h1,h2,h3,h4,h5,h6 {
font-family:'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro',Georgia,'ＭＳ Ｐ明朝',serif;
font-size:100%;
}
#block-footer,
#box-comment-form label,
#btn-submit input,
.box-trackback-url {
font-family:'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro',Georgia,'ＭＳ Ｐ明朝',serif;
}
.txt-entry-title,
.txt-trackback-title,
#txt-profile {
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック', sans-serif;
}

/* ================================================================================ */
/*      																																						*/
/*     +++++++ 3.Color Property +++++++                      										    */ 
/*      																																						*/ 
/* ================================================================================ */

/* ------------------------------------------- */
/*   全体背景色                                */ 
/* ------------------------------------------- */
body {
	background:#F5F3F1;
}

/* ------------------------------------------- */
/*   ヘッダー部分                              */ 
/* ------------------------------------------- */
#block-header {
background:#FFFFFF; 							/* 背景色 */
border-bottom:#DFD1C9 dotted 1px;	/* 点線色（下部） */
}

/* ------------------------------------------- */
/*   フッター部分                              */ 
/* ------------------------------------------- */
#block-footer {
background:#FFFFFF; 						/* 背景色 */
border-top:#DFD1C9 dotted 1px;	/* 点線色（上部） */
}

/* ------------------------------------------- */
/* 	基本文字色                       	         */ 
/* ------------------------------------------- */
body {
	color:#51442B;
}

/* ------------------------------------------- */
/*   リンクテキスト色                          */
/* ------------------------------------------- */
a:link {
	color:#3CA2BF;	/* リンクが設定されているテキスト色 */
}
a:visited {
	color:#31879F;	/* 既に訪れたリンクのテキスト色 */
}
a:hover {
	color:#49C0E1;	/* マウスを乗せた時のリンクテキスト色 */
}
a:active {
	color:#59DAFF;	/* マウスを押した時のリンクテキスト色 */
}

/* ------------------------------------------- */
/*   ブログタイトル文字色                      */
/* ------------------------------------------- */
#block-logo h1 a{
color:#705F50;
}

/* ------------------------------------------- */
/*   ブログ説明文テキスト色                    */
/* ------------------------------------------- */
#blog-description {
color:#8D7D70;
}

/* ------------------------------------------- */
/*   ・エントリーやコメント、トラックバックが  */
/* 			入る枠の色指定     				             */
/* ------------------------------------------- */
#block-left-contents-body-sequel,
#block-left-contents-body {
background:#FFFFFF; 				/* 背景色 */
border:#DFD1C9 dotted 1px;	/* 点線色 */
}

/* ------------------------------------------- */
/*   ・左・右サイドのメニュー部分の見出し			 */
/*   ・トラックバック、コメントのタイトル			 */
/* ------------------------------------------- */
#block-left-menu h2,
#block-right h2,
#block-left-contents h4 {
background:#FFF3FD; 							/* 背景色 */
border-bottom:#DFD1C9 dotted 1px;	/* 点線色 */
}

/* ------------------------------------------- */
/*   ・エントリーのタイトル色  		             */
/*   ・プロフィールページの名前部分の色        */
/* ------------------------------------------- */
.txt-entry-title,
#txt-profile {
background:#FFF3FD; 				/* 背景色 */
border:#DFD1C9 dotted 1px;	/* 点線色 */
}

/* ------------------------------------------- */
/*   ・コメントを囲む枠の点線色と  	   				 */
/*   ・コメント記入部分の各パーツの点線色  	   */
/*   ・トラックバックURLの点線色				  	   */
/*   ・トラックバックがある場合、				  	   */
/*   　トラックバックを囲む点線の色				  	 */
/* ------------------------------------------- */
.box-comment,
#box-comment-form input#name,
#box-comment-form input#email,
#box-comment-form input#url,
#box-comment-form textarea#description,
#block-cookie,
.box-trackback-url,
.block-trackback {
border:#DFD1C9 dotted 1px;
}

/* ------------------------------------------- */
/*   ・コメントを書いた人の情報部分の背景色    */
/*   ・エントリーを書いた日時等の部分の背景色  */
/*   ・コメント入力フォームの各見出し背景色 	 */
/*   ・トラックバックしてくれたサイトの		 		 */
/*   ・タイトルの背景色  											 */
/* ------------------------------------------- */
.box-comment-writer,
.box-post-data,
#box-comment-form label,
.box-trackback-writer {
background:#F9F9F9;
}

/* ------------------------------------------- */
/*   コメント入力後の送信ボタンの色				     */
/* ------------------------------------------- */
#btn-submit input {
background:#FFF3FD; 			/* 背景色 */
border:#DFD1C9 solid 1px;	/* 実線色 */
}

/* ------------------------------------------- */
/*   トラックバックしてくれたサイトの				   */
/*   エントリータイトル背景色								   */
/* ------------------------------------------- */
.txt-trackback-title {
background:#FFF3FD;
}

/* ================================================================================ */
/*			4.Layout Property                          	                                */
/* ================================================================================ */
#wrapper{
width:950px;
margin:0 auto;
}
#block-left{
width:770px;
float:left;
}
#block-right{
width:165px;
float:right;
padding-left:15px;
word-break:break-all;
overflow:hidden;
}
#block-left-menu {
width:185px;
float:left;
}
#block-left-contents {
width:538px;
float:right;
padding:0 15px;
}
#block-left-contents-body {
width:476px;
padding:30px;
margin-bottom:30px;
}
#block-left-contents-body-sequel {
width:476px;
padding:10px 30px;
margin-bottom:15px;
}
#block-header {
width:100%;
padding:30px 0;
margin-bottom:30px;
}
#block-footer {
clear:both;
padding:15px 0 30px;
text-align:center;
font-weight:600;
}
.box-menu {
margin-bottom:30px;
}

/* ================================================================================ */
/*			5.Parts Property                          	                                */
/* ================================================================================ */
/* ----- header ----- */
#block-logo h1{
font-weight:600;
font-size:197%;
margin:0 auto;
width:950px;
}
#block-logo h1 a{
text-decoration:none;
}
#blog-description {
margin:5px auto 0;
width:950px;
}

/* ----- menu ----- */
/* menu title */
#block-left-menu h2,
#block-right h2 {
font-weight:600;
margin-bottom:15px;
padding:5px 0 5px 10px;
}

/* calender */
.calendar-title table,
.calendar-day table {
width:100%;
}
.calendar-title td {
width:26px;
}
.calendar-title td,
.calendar-day td {
padding:4px 0;
text-align:center;
}

/* Others */
.box-menu li{
margin-bottom:5px;
}

/* ----- entry + comment ----- */
/* entry title */
.txt-entry-title {
font-weight:600;
font-size:114%;
margin-bottom:15px;
padding:10px;
}

/* entry flow */
#box-entry-sequel {
width:478px;
text-align:center;
}
#txt-sequel-prev {
float:left;
}
#txt-sequel-next {
float:right;
}

/* entry + comment body */
.box-entry,
.box-entry-more {
padding-bottom:15px;
}
.box-post-data {
padding:5px;
text-align:right;
}
.box-comment {
padding:15px;
margin-bottom:5px;
}
.box-comment-writer {
padding:5px;
text-align:right;
margin-bottom:30px;
}

/* comment + post a comment + trackback title */
#block-left-contents h4 {
font-weight:600;
margin-bottom:10px;
padding:5px 0 5px 10px;
}

/* ----- form ----- */
/* label default */
#box-comment-form label{
padding:2px 10px;
margin-bottom:5px;
display:block;
font-weight:600;
}
#box-comment-form dd {
margin-bottom:10px;
}
/* input */
#box-comment-form input#name {
padding:2px;
width:200px;
}
#box-comment-form input#email,
#box-comment-form input#url {
padding:2px;
width:300px;
}
/* textarea */
#box-comment-form textarea#description {
padding:2px;
width:400px;
}
/* cookie */
#block-cookie {
background:transparent;
padding:5px;
vertical-align:middle;
margin-bottom:10px;
}
label#check-cookie {
display:inline;
background:transparent;
}
#block-cookie input{
margin-right:5px;
}
/* input submit */
#btn-submit {
text-align:center;
margin-bottom:15px;
}
#btn-submit input {
padding:2px 10px;
margin-bottom:5px;
font-weight:600;
}

/* ----- trackback ----- */
.box-trackback-url {
padding:5px;
margin-bottom:15px;
}
.txt-trackback-title {
padding:2px 10px;
margin-bottom:5px;
font-weight:normal;
}
.box-trackback {
margin:15px 0;
}
.box-trackback-writer {
padding:5px;
text-align:right;
}
.block-trackback {
padding:15px;
margin-bottom:15px;
}

/* ----- page flow ----- */
#box-entry-page {
width:538px;
text-align:center;
margin-bottom:30px;
}
#txt-page-prev {
float:left;
}
#txt-page-next {
float:right;
}

/* ----- profile ----- */
/* profile title */
#txt-profile {
font-weight:600;
font-size:114%;
margin-bottom:15px;
padding:10px;
}

/* ================================================================================ */
/*			6.Float Clear         		                 	                                */
/* ================================================================================ */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

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