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

ホーム

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

テンプレート名 : BASE

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 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 language="JavaScript" type="text/javascript" src="http://wayco.achoo.jp/template/common/iepngfix.js"></script>
</head>
<body>

<div id="HEADER">

<h1>{blog_name}</h1>
<p>{blog_description}</p>

</div>

<div id="MAIN">

<ul class="sequel">
<li>{prev_entry}</li><li><a href="./">main</a></li><li>{next_entry}</li>
</ul>

<div class="entry">
<h1 class="entry_title"><a href="{entry_permalink}">{entry_title}</a></h1>
<p class="entry_date">{entry_year}.{entry_month}.{entry_day} at {entry_time_only}<span>author:{user_name}</span></p>
<div class="entry_body">
{entry_description}
</div>

<div class="entry_more">
<a name="sequel"></a>
{entry_sequel}
</div>

<ul class="entry_state">
<li>{category_name}</li><li>{comment_num}</li><li>{trackback_num}</li><li>{pookmark_link}</li>
</ul>
{trackback_auto_discovery}
</div>

<div class="comment">

<a name="comments"></a>
<h1>COMMENT</h1>

<a name="{comment_id}">
<div class="comment_body">
<h2 class="comment_name">{comment_name}</h2>
<p class="comment_time">{comment_time}</p>
<p class="comment_description">{comment_description}</p>
</div>

<dt><label for="email">email:</label></dt>
<dd><input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="textbox" /></dd>

<dt><label for="description">comments:</label></dt>
<dd><textarea tabindex="4" id="description" name="description" rows="5" cols="36"></textarea></dd>

<p class="comment_btn">
<input tabindex="5" type="submit" value="送信" onclick="javascript:setval();"/>
<input type="checkbox" name="set_cookie" value="1" id="set_cookie">
<label class="cookie_label" for="set_cookie">Cookieに登録</label>
<p>
</dl>

</form>

</div>

</div>

<div class="trackback">

<a name="trackback"></a>

<h1>TRACKBACK</h1>
<p>
この記事のトラックバックURL
<p>
<input type="text" value="{trackback_url}" class="textbox" onfocus="this.select();">
<p>
</p>

<div class="trackback_body">
<p class="trackback_blog_name">{trackback_blog_name}</p>
<p class="trackback_time">{trackback_time} </p>
<h2 class="trackback_title">{trackback_title}</h2>
<p class="trackback_description">{trackback_excerpt}</p>
</div>


</div>

<h1>{profile_name}</h1>
{profile_description}

<div id="pagination">
<ul id="pagenavi">{prev_page_link} {page_now}/{page_num} {next_page_link}</ul>
</div>

function writeGoogleNavi(page, type) {

var maxLinkNum =5; // 最大ページリンク数
var prevStr = '<li class="pgprev">Prev</li>'; // 前のリンクを表示する文字
var nextStr = '<li class="pgnext">Next</li>'; // 次のリンクを表示する文字
var leftParenthesis = '<li class="pg">'; // ページリンクを囲む文字（左）
var rightParenthesis = '</li>'; // ページリンクを囲む文字（右）

var nextPageNum = 0;
var nextNavi = true;
var linkHtmlTag = '';
var eName = 'pagenavi';
var element = null;

if (document.all) {
element = document.all[eName];
} else if (document.getElementById(eName)) {
element = document.getElementById(eName);
} else {
return;
}

if (maxLinkNum > pageNum) maxLinkNum = pageNum;
if (type == 'next') difPageNum++;
if (type == 'prev') difPageNum--;
if (type == 'init' && page > maxLinkNum) difPageNum = page - maxLinkNum;

if (difPageNum > 0) {
linkHtmlTag = '<a href="javascript:writeGoogleNavi(\'' + difPageNum + '\', \'prev\')">' + prevStr + '</a>';
}

for(i = difPageNum; i  <(maxLinkNum + difPageNum); i ++) {
if (pageNow != 0 && (i + 1) != pageNow) {
linkHtmlTag += ' <a href="' + window.location.pathname + '?page=' + i + '">' + leftParenthesis + (i + 1) + rightParenthesis + '</a> ';
} else {
linkHtmlTag += ' <b>' + leftParenthesis + (i + 1) + rightParenthesis + '</b> ';
}
}

if (pageNum > (maxLinkNum + difPageNum)) {
linkHtmlTag += '<a href="javascript:writeGoogleNavi(\'' + (maxLinkNum + difPageNum - 1) + '\', \'next\')"> ' + nextStr + '</a>';
}

element.innerHTML = linkHtmlTag;
}
writeGoogleNavi(pageNow, 'init');
-->
</script>

</div>

<h2>Calender</h2>
<div id="calendar">
{calendar}
</div>

<h2>Selected Entries</h2>{selected_entry_list}

<h2>Categories</h2>{category_list}

<h2>Archives</h2>{archives_list}

<h2>Recent Comment</h2>
<ul>

<li>{recent_comment_item_title}<br />⇒<a href="./?eid={recent_comment_item_entry_id}#{recent_comment_item_comment_id}">{recent_comment_item_name}({recent_comment_item_date})</a></li>

</ul>

<h2>Recent Trackback</h2>{recent_trackback_list}

<h2>Profile</h2>{user_list}

<h2>{freespace_title1}</h2>{freespace_contents1}

<h2>{freespace_title2}</h2>{freespace_contents2}

<h2>{freespace_title3}</h2>{freespace_contents3}

<h2>{freespace_title4}</h2>{freespace_contents4}

<h2>{freespace_title5}</h2>{freespace_contents5}

<h2>Links</h2>{link_list}

<h2>Recommend</h2>
<div class="amazon">

<a href="{amazon_url}" target="_blank"><img src="{amazon_ImageUrlSmall}" alt="{amazon_ProductName}"/></a>
<p><a href="{amazon_url}" target="_blank">{amazon_ProductName}</a></p>

</div>

<h2>Mobile</h2>
<div class="mobile">
{site_qrcode}
</div>

<h2>Others</h2>
<ul>
<li><a href="./admin/">管理者ページ</a></li>
<li><a href="./?mode=rss">RSS1.0</a></li>
<li><a href="./?mode=atom">Atom0.3</a></li>
</ul>

<form method="get" action="" class="search">
サイト内検索
<input id="search" name="search" size="20" class="search-form" /><input type="submit" value="Search" class="button" />
</form>

<h2>Sponsored Links</h2>
<div id="jugem_ad">{ad}</div>

</div>

<p id="FOOTER">Powered by <a href="https://jugem.jp/">JUGEM</a>and designed by <a href="http://heeldrops.jugem.jp/">way*co</a>.</p>

</div>
</body>
</html>

CSS

@charset "EUC-JP";

/* CSSの記述順
*
*	1.全称セレクタ
*	2.基本要素
*	3.フォントの種類
*	4.フォントの大きさ
*	5.フォントの太さ
*	6.フォントの色
*	7.フォントの下線や取り消し線
*	8.ボーダー
*	9.背景
*	10.レイアウト
*	11.Javascriptとか
*
*/

/**----------------------------- 1.全称セレクタ -----------------------------**/
* {
		margin:0;
		padding:0;
		font-style:normal;
		font-weight:400;
		font-size:100%;
		list-style-type:none;
		text-decoration: none;
		}

/**------------------------------- 2.基本要素 -------------------------------**/
pre {
		font-family:"Osaka－等幅", monospace;
		}
img{
		border:none;
		}
u{
	text-decoration:underline;
	}
	
del{
	text-decoration:line-through;
	}
/**--------------------------- 3.フォントの種類 -----------------------------**/
body {
	font-family:"Lucida Sans Unicode",Arial,Helvetica,Verdana,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	}
/**--------------------------- 4.フォントの大きさ ---------------------------**/
body{
	font-size:76%;
	}

#HEADER h1 a{
	font-size:174%;
	}

#HEADER p{
	font-size:108%;}

#MAIN .entry h1.entry_title,
#MAIN .comment h1,
#MAIN .trackback h1{
	font-size:116%;
	}

#MAIN .entry_date,
#MAIN .entry_state,
#SIDEBAR ul,
#MAIN .comment p.comment_time,
#MAIN .trackback p.trackback_time{
	font-size:92%;
	}

/**---------------------------- 5.フォントの太さ ----------------------------**/
strong,
#HEADER h1 a,
#MAIN .entry h1.entry_title a,
#MAIN .comment h1,
#MAIN .trackback h1,
#SIDEBAR h2{
	font-weight:bold;}
/**----------------------------- 6.フォントの色 -----------------------------**/
body {	
	color:#333;
	}
	
em{
	color:#5757AD;
	}
	
a:link {
	color:#46A341;
}
a:visited,
a:hover,
a:active{
	color:#71B76E
	}

#HEADER h1 a{
	color:#345432;
	}/*ブログのタイトル*/
	
#MAIN .entry h1.entry_title a:link,
#MAIN .entry h1.entry_title a:visited{
	color:#849DEF;
	}/*記事のタイトル*/

#MAIN .entry h1.entry_title a:hover,
#MAIN .entry h1.entry_title a:active{
	color:#5273DD;
	}/*記事のタイトルにマウスを重ねたときの色*/

#MAIN .entry_date,
#MAIN .entry_state{
	color:#666;
	}/*記事の日付・カテゴリーやコメント数*/
	
#MAIN .comment h1,
#MAIN .trackback h1{
	color:#444;
	}/*コメント・トラックバックの見出し*/

/**---------------------- 7.フォントの下線や取り消し線 ----------------------**/
/**------------------------------- 8.ボーダー -------------------------------**/

a:hover{
	border-bottom:1px dotted #71B76E;
	}
	
#MAIN .entry h1.entry_title a:hover{
	border-bottom:1px dotted #345432;
	}
	
#MAIN .entry h1.entry_title a:hover{
	border-bottom:1px dotted #5273DD;
	}

#MAIN .entry .entry_body blockquote,
#MAIN .entry .entry_more blockquote{
	border:5px solid #E3E5E3;
	}
	
#MAIN .entry .entry_body pre,
#MAIN .entry .entry_more pre{
	border:1px dashed #999;
	}
/**--------------------------------- 9.背景 ---------------------------------**/
/**------------------------------10.レイアウト-------------------------------**/
#WRAP{
	margin:auto;
	width:800px;
	}
/* ::::::::: ヘッダー ::::::::: */
#HEADER{
	height:180px;
	}

#HEADER h1{
	padding:50px 0 0 20px;}

#HEADER p{
	padding:15px 0 0 30px;}
/* ::::::::: 記事・コメント・トラックバック・プロフィール ::::::::: */
#MAIN{
	width:600px;;
	float:left;
	}
	
#MAIN ul.sequel{
	text-align:center;}

#MAIN ul.sequel li{
	padding:0 1em;
	display:inline;
	}
	
#MAIN .entry{
	padding:20px;
	}

#MAIN p.entry_date{
	padding:0 0 0.5em 0;
	}

#MAIN .entry_body{
	padding:0.5em 0 0 0;
	}
	
#MAIN p.entry_date span{
	margin-left:1em;
	}
	
#MAIN div.entry_body,
#MAIN div.entry_more{
	line-height:2em;
	}

#MAIN ul.entry_state{
	margin-top:0.8em;
	text-align:right;
	}
	
#MAIN ul.entry_state li{
	margin-left:1em;
	display:inline;
	}

#MAIN .entry .entry_body p,
#MAIN .entry .entry_more p,
#MAIN .entry .entry_body blockquote,
#MAIN .entry .entry_more blockquote,
#MAIN .entry .entry_body pre,
#MAIN .entry .entry_more pre{
	width:90%;
	margin:0.6em;
	padding:0.6em;
	}
	
#MAIN .entry .entry_more pre
	
/*コメント・トラックバック*/
#MAIN .comment,
#MAIN .trackback{
	padding:20px;
	}

#MAIN .comment h1,
#MAIN .trackback h1{
	padding:0 0 20px 0;
	}
	
#MAIN .comment .comment_body,
#MAIN .trackback .trackback_body{
	padding:10px 0;
	}
	
#MAIN .comment .comment_time,
#MAIN .trackback .trackback_time{
	padding: 0 0 5px 0;
	}
	
#MAIN .comment .comment_description,
#MAIN .trackback .trackback_description{
	padding:5px 0 0 0;
	}
	
#MAIN .formarea{
	}
	
#MAIN .formarea dt{
	padding-top:0.8em;}
	
#MAIN .formarea input#name,
#MAIN .formarea input#email,
#MAIN .formarea input#url{
	width:200px;
	}
	
#MAIN .formarea textarea{
	width:320px;
	}

#MAIN .comment .formarea p.comment_btn{
	padding:10px 0;}
	
#MAIN .trackback input.textbox{
	width:80%;
	}
	
/*ページナビ*/
#pagination{
	text-align:center;
	}

#pagination ul#pagenavi{
	padding:20px 0;}

#pagination ul#pagenavi li{
	display:inline;}
/* ::::::::: サイドバー ::::::::: */
#SIDEBAR{
	width:200px;
	float:right;
	line-height:1.6em;
	}
#SIDEBAR h2{
	padding:20px 20px 0 20px;
	}
#SIDEBAR ul,
#SIDEBAR #calendar,
#SIDEBAR .amazon,
#SIDEBAR .mobile img,
#SIDEBAR form.search,
#SIDEBAR #jugem_ad{
	padding:10px 20px 0px 20px;
	}
/*カレンダー*/
#calendar table{
	width:150px;
	}
	
.calendar_month{
	padding:0.6em 0 0 0;
	}	
.calendar_month a{
	padding:0 0.4em;}
/* ::::::::: フッター ::::::::: */
#FOOTER{
	height:200px;
	clear:both;
	text-align:center;
	}

/**----------------------------11.Javascriptとか-----------------------------**/
*{ behavior: expression(IEPNGFIX.fix(this)); }/*IE6でも透過PNGを表示*/

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