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

ホーム

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

テンプレート名 : nursery_tale

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" />
<meta http-equiv="content-script-type" content="text/javascript" />
<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 src="./template/analogue/menu.js" type="text/javascript"></script>
<script type="text/javascript" src="./template/js/cookie.js"></script>
</head>

<div id="header">
	<div class="site_title">{blog_name}</div>
	<div class="description">{blog_description}</div>
	</div>

<div class="linkmenu">
		<div class="menu_title"><a href="" onclick="return buttonClick(event, 'MENU1');">PROFILE</a></div>
		<div class="menu_title"><a href="" onclick="return buttonClick(event, 'MENU2');">ENTRY</a></div> 
		<div class="menu_title"><a href="" onclick="return buttonClick(event, 'MENU3');">COMMENT</a></div> 
		<div class="menu_title"><a href="" onclick="return buttonClick(event, 'MENU4');">TRACKBACK</a></div>
		<div class="menu_title"><a href="" onclick="return buttonClick(event, 'MENU5');">CATEGORY</a></div> 
		<div class="menu_title"><a href="" onclick="return buttonClick(event, 'MENU6');">ARCHIVE</a></div> 
		<div class="menu_title"><a href="" onclick="return buttonClick(event, 'MENU7');">LINK</a></div>
		<div class="menu_title"><a href="" onclick="return buttonClick(event, 'MENU8');">RECOMMEND</a></div> 
		<div class="menu_title"><a href="" onclick="return buttonClick(event, 'MENU9');">OTHERS</a></div> 
	</div>

<div id="MENU2" class="MENU">
	
		<div class="list_text">
		{latest_entry_list2}
		</div>
	
	</div>

<div id="MENU3" class="MENU">
	
		<div class="list_text">
		<div id="commentlist">{recent_comment_list2}</div>
		</div>
	
	</div>

<div id="MENU4" class="MENU">
	
		<div class="list_text">
		<div id="tblist">{recent_trackback_list2}</div>
		</div>
	
	</div>

<div id="MENU5" class="MENU">
	
		<div class="list_text">
		{category_list}
		</div>
	
	</div>

<div id="MENU6" class="MENU">
	
		<div class="list_text">
		{archives_list2ex}
		</div>
	
	</div>

<div id="MENU8" class="MENU">
	
		<div class="list_text">
		{amazon_item}
		</div>
	
	</div>

<div class="free_t">{freespace_title1}</div>
			<div class="free_c">{freespace_contents1}</div>

<div class="free_t">{freespace_title2}</div>
			<div class="free_c">{freespace_contents2}</div>

<div class="free_t">{freespace_title3}</div>
			<div class="free_c">{freespace_contents3}</div>

<div class="free_t">{freespace_title4}</div>
			<div class="free_c">{freespace_contents4}</div>

<div class="free_t">{freespace_title5}</div>
			<div class="free_c">{freespace_contents5}</div>

<div class="free_t">MOBILE</div>
			{site_qrcode}
		</div>
	
	</div>

<div class="calendar">
<span class="cal">
{calendar_horizontal_addzero}
</span>
</div>

<div class="entry_navi">
 	{prev_entry} | <a href="./">main</a> | {next_entry} 
	</div>

<div class="entry">
		<div class="entry_title"><a href="{entry_permalink}">{entry_title}</a></div>
		<div class="entry_date"><span style="color:#c193d1;">{entry_date}</span></div>
		<div class="entry_area">
			<div class="entry_body">{entry_description}</div>
			<a name="sequel"></a>
			<div class="entry_more">{entry_sequel}</div>
			<div class="entry_state">| {entry_time} | {category_name} | {comment_num} | {trackback_num} |</div>
		</div>
		<ul class="comtra">
			<li>
			<a href="{entry_permalink}#comments">Comments({comment_num_only})</a>
			</li>
			<li>
			<a href="{entry_permalink}#trackbacks">Trackbacks({trackback_num_only})</a>
			</li>
			<li>
			<a href="{entry_permalink}">
			{entry_year}.{entry_month}.{entry_day}.{entry_eng_week_short}.{entry_time_only}</a>
			</li>
		</ul>
	</div>
	{trackback_auto_discovery}

<h3 class="comment_title">関連する記事</h3>
	<div class="comment_body2">{related_entry_list}</div>

<a name="comments"></a>
	
	<h3 class="comment_title">comment</h3>
	
	<div class="comment_body">{comment_description}</div>
	<div class="comment_author">{comment_name} {comment_time_24} </div>
	
	<h3 class="comment_title">Submit comment</h3>
	<div class="entry_body">
		<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
		<input type="hidden" name="entry_id" value="{entry_id}" style="width:250px;" class="form_color" />
		<label for="name">name:</label><br/>
		<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" style="width:250px;" class="form_color" /><br />
		<label for="email">email:</label><br>
		<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" style="width:250px;" class="form_color" /><br />
		<label for="url">url:</label><br>
		<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" style="width:250px;" class="form_color" /><br />
		<label for="description">comments:</label><br />
		<textarea tabindex="4" id="description" name="description" rows="10" cols="50" style="width:400px;" class="form_color"></textarea><br /><br />

<input tabindex="5" type="submit" value="コメント送信" onclick="javascript:setval();" class="button" />
		<input type="checkbox" name="set_cookie" value="1" id="set_cookie">
		<label for="set_cookie">Cookie</label>
		</form>
	</div>

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

<h3 class="comment_title">Trackback URL</h3>
	<div class="comment_body">{trackback_url}</div>
	<h3 class="comment_title">Trackback</h3>
	
	<div class="comment_title">{trackback_title}</div>
	<div class="comment_body">{trackback_excerpt}</div>
	<div class="entry_state"> | {trackback_blog_name} | {trackback_time} | </div>

<div class="entry_title">profile</div>
	<div class="entry_body">{profile_name}
	<br />{profile_description}</div>

<div id="pager">
	{full_pager_link}
	</div>

<div id="footer">
		<div class="ad">{ad}</div>
		
		<div class="search">
			<form method="get" action="">
			<input id="search" name="search" size="20" style="width:140px" class="form_color" />
			<input type="submit" value="Search" class="button" />
			</form>
		</div>
		
		
		<div class="othercontent">
			<ul>
			<li><a href="./admin/">Admin</a></li>
			<li><a href="./?mode=rss">RSS1.0</a></li>
			<li><a href="./?mode=atom">Atom0.3</a></li>
			</ul>
		</div>
		
		<div class="pagetop"><a href="#top">このページの先頭へ▲</a></div>
<br class="clear" />
		<div class="copyright">
		Material by <a href="http://atelier-bw.net/">Atelier Black/Whiteさま</a><br />
		Material by <a href="http://simple-life.cside.com/">Simple Lifeさま</a><br />
		Template by <a href="http://moondrop.jugem.cc/">yoshikazu</a><br />

{copyright}<br />
		</div>
	</div>

</div>
</div>
<script type="text/javascript">
<!--
function makeTreeElements (idName,objList) {
  if (!objList.innerHTML) return;
  var objLink = objList.getElementsByTagName('a')[0];
  var linkUrl = objLink.getAttribute('href');
  if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
    var tmpText = objList.innerHTML.split("⇒");
    tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
    this.base = Array('<a href="',linkUrl,'">',tmpText[0],'<\/a>').join('');
    this.elem = Array('<a href="',linkUrl,'">',tmpText[1],'<\/a>').join('');
  } else if (idName.indexOf('entry') > -1) {
    var tmpText = objList.innerHTML;
    tmpText.match(/$(\d\d\d\d\d\d\d\d)$/);
    this.base = Array('<a href="./?day=',RegExp.$1,'">',RegExp.$1,'<\/a>').join('');
    this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'<\/a>').join('');
  } else if (idName.indexOf('link') > -1 || idName.indexOf('category') > -1) {
    var tmpText = objList.innerHTML;
    if ( tmpText.match(/\[(.+)\](.+)/) ) {
      this.base = Array(RegExp.$1).join('');
      this.elem = Array('<a href="',linkUrl,'">',RegExp.$2,'<\/a>').join('');
    } else {
      this.base = Array('<a href="',linkUrl,'">',tmpText,'<\/a>').join('');
      this.elem = 'null';
    }
  } else if (idName.indexOf('archive') > -1) {
    var tmpText = objList.innerHTML;
    tmpText.match(/$(\d+)$/);
    var tmpCnt = Array(RegExp.$1).join('');
    tmpText = objLink.innerHTML;
    tmpText.match(/(.+) (\d+)/);
    this.base = Array(RegExp.$2).join('');
    this.elem = Array('<a href="',linkUrl,'">',RegExp.$1,'<\/a>').join('');
  }
  return this;
}
function createTreeList(idName,option) { // version 2.2
  var objFocus = this.document.getElementById(idName);
  if (!objFocus) return;
  if (!objFocus.innerHTML) return;
  var objLists = objFocus.getElementsByTagName('li');
  var linkList = new Array();
  var outText = new Array();
  if (objLists.length > 0) {
    for (i=0;i<objLists.length;i++) {
      var chckFlag = true;
      var elemText = new makeTreeElements(idName,objLists[i]);
      if (!elemText.base || !elemText.elem) return;
      for (j=0;j<linkList.length;j++) {
        if ( linkList[j].base.indexOf(elemText.base) > -1 ) {
          chckFlag = false;
          linkList[j][linkList[j].length] = elemText.elem;
        }
      }
      if (chckFlag) {
        var tmpNum = linkList.length;
        linkList[tmpNum] = new Array();
        linkList[tmpNum][0] = elemText.elem;
        linkList[tmpNum].base = elemText.base;
      }
    }
    if (idName == 'categorylist' && linkList.length > 0) {
      for (i=0;i<linkList.length;i++) {
        for (j=0;j<linkList[i].length;j++) {
          if (linkList[i][j] != 'null' && linkList[i][j].match(/\[(.+)\](.+)/)) {
            linkListNum[i] = linkListNum[i] + parseInt(RegExp.$1);
          }
        }
      }
    }
    if (linkList.length > 0) {
      outText[outText.length] = '<ul>\n';
      for (i=0;i<linkList.length;i++) {
        outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
        if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
        for (j=0;j<linkList[i].length;j++) {
        if (linkList[i][j] != 'null') {
          outText[outText.length] = (j == linkList[i].length - 1) ? option.end : option.list;
          outText[outText.length] = Array(linkList[i][j],option.leef).join('');
          }
        }
        outText[outText.length] = Array(option.btm,'<\/li>').join('');
      }
      outText[outText.length] = '<\/ul>\n';
      objFocus.innerHTML = outText.join('');
    }
  }
}
var gTreeOption = new Array;
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '┣ '; /* ツリー用マーク(通常) */
gTreeOption['end']  = '┗ '; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '<br />\n'; /* 各枝の末尾 */
gTreeOption['top']  = '<br />\n'; /* ツリー本体の最初 */
gTreeOption['btm']  = ''; /* ツリー本体の最後 */
createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption);    // エントリリストのツリー化
createTreeList('commentlist',gTreeOption);  // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption);       // 最新トラックバックリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化
createTreeList('linklist',gTreeOption);     // リンクリストのツリー化
createTreeList('archivelist',gTreeOption);  // アーカイブリストのツリー化

//ツリー化（改）ver.2.4.05
//配布元　http://nz.jugemers.net/log/eid31.html（JUGEMカスタマイズ講座）
//改造元　http://koda.jugem.cc/?eid=3066（East of R134）
//-->
</script>
</body>
</html>

CSS

/* ----------------------------------------
 最初に
 ご覧頂きありがとうございます。
 何分知識も知恵も持ち合わせておりませぬ故、
 お恥ずかしい限りですが、UPしてみました。
 おかしい所があれば笑って下さい。えっ(^^;)
 じゃなくって･･･ご連絡下さい。
---------------------------------------- */

/* ----------------------------------------
 公開日：2011年6月19日
 2011年6月20日 関連記事リスト追加（汗）
 2013年4月15日 色色頑張りました（汗）
 テンプレート名：nursery_tale
 by yoshikazu（http://moondrop.jugem.cc）
---------------------------------------- */

* {
margin: 0;
padding: 0;
}

body {
font-family: 'verdana','ms pgothic';
font-size: 12px;
color: #7a5166;
text-align: left;
background-color: #f7f7ec;
}

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

#layout {
text-align: left;
margin: 0px auto;
width: 575px;
background-color: #ffffff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}

#header {
background-image: url('http://img-cdn.jg.jugem.jp/9a0/69671/20110605_2219778.jpg');
background-repeat: no-repeat;
background-position:70px 75px;
height: 270px;
float:left;
padding-top:10px;
}

#main {
margin: 0px auto;
}

a { color: #c17d6f; text-decoration: none; }
a:link { color: #c17d6f; text-decoration: none; }
a:visited { color: #c17d6f; text-decoration: none; }
a:active { color: #b24c4c; text-decoration: none; }
a:hover	{ color: #b2904c; text-decoration: underline; background-color: #fffacc;}

.site_title {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-size: 16px;
letter-spacing:1px;
color: #660000;
padding: 10px 0px 10px 10px;
margin: 0px 0px 0px 0px;
}

.site_title a {color: #660000;text-decoration: none;}
.site_title a:link {color: #660000;text-decoration: none;}
.site_title a:visited { color: #660000; text-decoration: none; }
.site_title a:active { color: #660000; text-decoration: none; }
.site_title a:hover	{ color: #b2904c; text-decoration: none; }

.description {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-size: 90%;
color: #767c6b;
letter-spacing:2px;
line-height:130%;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 20px;
}

.pict { 
border-width: 1px;
border-style: solid;
border-color: #9087cc;
}

.entry {
width: 575px;
margin: 0px;
padding: 0px;
}

.entry_navi{
font-size: 10px;
font-family: 'Verdana','ms pgothic';
letter-spacing:1px;
text-align: center;
margin: 10px 0px 10px 0px;
color: #64535a;
}

.entry_title {
font-family: 'Comic Sans MS','Verdana','MS UI Gothic';
font-size: 14px;
letter-spacing: 1px;
font-weight: bolder;
margin: 15px 0px 0px 10px;
padding: 10px 0px 0px 55px;
background:url('http://img-cdn.jg.jugem.jp/9a0/69671/20130415_222257.gif') no-repeat;
height:35px;
}

.entry_date {
font-family: 'Century Gothic';
text-align: right;
text-decoration: underline;color:#e6e6e6;
padding-right: 15px;
}

.entry_body {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
letter-spacing: 1px;
line-height:150%;
margin: 0px 0px 0px 0px;
padding: 15px 20px 15px 20px;
}

.entry_more {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
letter-spacing: 1px;
line-height:150%;
padding-left: 20px;
}

.entry_state {
font-family: 'Verdana','ms pgothic';
font-size: 10px;
letter-spacing: 1px;
color: #64535a;
padding: 5px 5px 30px 0px;
text-align: right;
}

.comment_title {
font-family: 'Century Gothic';
font-size: 14px;
letter-spacing:2px;
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 15px;
}

.comment_body {
font-family: 'Verdana','MS UI Gothic';
letter-spacing: 1px;
line-height:150%;
margin: 0px 20px;
padding: 10px 5px 10px 15px;
background: #f3f1f0;
}

.comment_body2 {
font-family: 'Verdana','MS UI Gothic';
letter-spacing: 1px;
line-height:150%;
margin: 0px 20px;
padding: 10px 5px 10px 20px;
background: #f7ecec;
}

.comment_author {
font-weight: normal;
font-size:95%;
text-align:right;
margin: 5px 5px 15px 0px;
padding: 0px 5px 5px 0px;
border-bottom: 1px dotted #ccc;
}

.form_color {
border:2px dotted #ccc;
background: #f6fbf6;
color: #7a5166;
padding: 3px;
}

ul {
list-style-type: none;
line-height:120%;
margin: 0px;
padding: 0px;
}

ul li {
background: url('http://img-cdn.jg.jugem.jp/9a0/69671/20130415_222258.gif') no-repeat ;
margin-left: 0px;
padding-left: 15px;
}

/* メニュー */
.MENU {
visibility: hidden;
z-index: 999;
position: absolute;
width:180px;
margin-top:5px;
padding: 10px 10px 10px 10px;
background: #f8fbf8;
border: 1px #663300 solid;
}

.linkmenu {
text-align: ;
font-family: 'Century Gothic';
font-size: 10px;
padding: 180px 20px 0px 0px;
}

.menu_title {
background:url('http://img-cdn.jg.jugem.jp/9a0/69671/20110612_2230794.png') no-repeat;
float:left;
padding:4px 2px 0px 14px;
height:16px;
}

.list_text {
font-family: 'Verdana','ms pgothic';
font-size: 10px;
color: #660000;
letter-spacing:2px;
line-height:150%;
margin: 0px 0px 0px 0px;
}

blockquote {
font-size: 95%;
color: #999;
border-left:3px solid;
margin: 20px 10px;
padding: 10px;
}

/* フリースペース */
.free_t {
font-weight: bolder;
margin: 5px 0px 5px 0px;
}

.freef_c {
margin: 5px 0px 10px 0px;
}

/* カレンダー */
.calendar {
font-family: 'Verdana';
font-size: 90%;
margin: 15px 0px 10px 10px;
padding: 0px 0px 0px 0px;
color: #6ca4c0;
}

.calendar_month {
font-family: "Verdana";
margin-bottom: 90%;
font-size: 10px;
color: #ae88aa;
}

.cal a:link {color:#d8728b; text-decoration:none;}
.cal a:visited {color:#d8728b; text-decoration:none;}
.cal a:hover { color: #6a5591; text-decoration: none; }

.cell { padding: 1px; height: 15px; width: 25px; }
.cell a:link, .cell a:visited, .cell a:hover
{ padding: 1px; height: 15px; width: 25px;}

.weekday {
font-size: 10px;
text-align: center;
color: #6b6b60;
padding: 1px;
height: 15px;
width: 25px;
}

td#sun { color:#c41a41;}
td#sat { color:#2595c7;}

.search {
font-family: 'Verdana','ms pgothic';
font-size: 10px;
color: #663300;
letter-spacing:2px;
line-height:150%;
text-align: ;
margin: 0px 0px 5px 0px;
padding: 30px 0px 0px 210px;
}

.page { 
text-align: center;
padding-bottom: 30px;
font-family: 'Century Gothic';
}

#pager{padding:10px 0 20px;text-align:center;width:100%;}
#pager span{margin:0 3px;}

#pager span.current{
	background-color:#e7efdb;
	padding:4px 7px;
	color:#7ab77a;
	font-weight:bold;
}

#pager span a{
	background-color:#f3f7ec;
	color:#939e93;
	padding:4px 7px;
	text-decoration:none;
}

#pager span a:hover,#pager span a:active {
	background-color:#fffacc;
	color:#a3988e;
	text-decoration:none;
}

/* フッター */
#footer {
background: #ffffff url('http://img-cdn.jg.jugem.jp/9a0/69671/20130415_222256.jpg') no-repeat;
}

.othercontent {
padding: 20px 0px 5px 260px;
}

.pagetop {
margin-top:50px;
padding: 40px 0px 0px 20px;
}

.copyright {
font-family: 'Verdana','ms pgothic';
font-size: 10px;
color: #663300;
line-height: 150%;
letter-spacing: 1px;
text-align: center;
margin: 30px 0px 0px;
padding: 10px;
}

.ad {
float:right;
}

.button {
border:1px solid #ccc;
background:transparent;
color:#36648b;
margin: 5px 0 0 0;
cursor: pointer;
}

/* ----------------------------------------
 Ichiranhyouzi
---------------------------------------- */

#cid .entry_area,
#month .entry_area {
width: 100%; height: 85px;
overflow: hidden;
}

.entry_area {
display:block;
}

#cid .comtra,
#month .comtra {
position: relative;
text-align:center;
width:100%; 
height:60px;
margin: 0px;
padding-top: 15px; 
display:block;
}

.comtra {
display: none;
}

.comtra li{
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif,"Osaka‐等幅";
font-size:95%;
display:inline;
line-height:1.1;
list-style-type:none;
}

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