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

ホーム

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

テンプレート名 : Re:mix * undecim

HTML・CSSをコピーして使う

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?xml version="1.0" encoding="{site_encoding}"?>
<html xmlns="http://www.w3.org/1999/xhtml" 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 type="text/javascript" src="./template/js/cookie.js"></script>
<script type="text/javascript">
//<![CDATA[
function Browser() {

var ua, s, i;

this.isIE    = false;  // Internet Explorer
  this.isNS    = false;  // Netscape
  this.version = null;

ua = navigator.userAgent;

s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

// Treat any other "Gecko" browser as NS 6.1.

s = "Safari";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isSA = true;
    this.version = 1.0;
    return;
  }

s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }

}

var browser = new Browser();

var activeButton = null;

if (browser.isIE)
  document.onmousedown = pageMousedown;
else
  document.addEventListener("mousedown", pageMousedown, true);

function pageMousedown(event) {

var el;

if (activeButton == null)
    return;

if (browser.isIE)
    el = window.event.srcElement;
  else
    el = (event.target.tagName ? event.target : event.target.parentNode);

if (el == activeButton)
    return;

if (getContainerWith(el, "DIV", "MENU") == null) {
    resetButton(activeButton);
    activeButton = null;
  }
}

function buttonClick(event, menuId) {

var button;

if (browser.isIE)
    button = window.event.srcElement;
  else
    button = event.currentTarget;

button.blur();

if (button.menu == null) {
    button.menu = document.getElementById(menuId);
    if (button.menu.isInitialized == null)
      menuInit(button.menu);
  }

if (activeButton != null)
    resetButton(activeButton);

if (button != activeButton) {
    depressButton(button);
    activeButton = button;
  }
  else
    activeButton = null;

return false;
}

function buttonMouseover(event, menuId) {

var button;

// Find the target button element.

if (browser.isIE)
    button = window.event.srcElement;
  else
    button = event.currentTarget;

// If any other button menu is active, make this one active instead.

if (activeButton != null && activeButton != button)
    buttonClick(event, menuId);
}

function depressButton(button) {

var x, y;

x = getPageOffsetLeft(button);
  y = getPageOffsetTop(button) + button.offsetHeight;
  if (browser.isSA){
		y -=5;
	}
  button.menu.style.left = x + "px";
  button.menu.style.top  = y + "px";
  button.menu.style.display = "block";
}

function resetButton(button) {

//  removeClassName(button, "MENUBUTTONACTIVE");

if (button.menu != null) {
    closeSubMenu(button.menu);
    button.menu.style.display = "none";
  }
}

function menuMouseover(event) {

var menu;

// Find the target menu element.

if (browser.isIE)
    menu = getContainerWith(window.event.srcElement, "DIV", "menu");
  else
    menu = event.currentTarget;

// Close any active sub menu.

if (menu.activeItem != null)
    closeSubMenu(menu);
}

function menuItemMouseover(event, menuId) {

var item, menu, x, y;

if (browser.isIE)
    item = getContainerWith(window.event.srcElement, "A", "MENUITEM");
  else
    item = event.currentTarget;
  menu = getContainerWith(item, "DIV", "MENU");

if (menu.activeItem != null)
    closeSubMenu(menu);
  menu.activeItem = item;

//  item.className += " MENUITEMHIGHLIGHT";

if (item.subMenu == null) {
    item.subMenu = document.getElementById(menuId);
    if (item.subMenu.isInitialized == null)
      menuInit(item.subMenu);
  }

x = getPageOffsetLeft(item) + item.offsetWidth;
  y = getPageOffsetTop(item)-3.0;

var maxX, maxY;

if (browser.isNS) {
    maxX = window.scrollX + window.innerWidth;
    maxY = window.scrollY + window.innerHeight;
  }
  if (browser.isIE) {
    maxX = (document.documentElement.scrollLeft   != 0 ? document.documentElement.scrollLeft   : document.body.scrollLeft)
         + (document.documentElement.clientWidth  != 0 ? document.documentElement.clientWidth  : document.body.clientWidth);
    maxY = (document.documentElement.scrollTop    != 0 ? document.documentElement.scrollTop    : document.body.scrollTop)
         + (document.documentElement.clientHeight != 0 ? document.documentElement.clientHeight : document.body.clientHeight);
  }
  if (browser.isSA) {
    maxX = window.scrollX + window.innerWidth;
    maxY = window.scrollY + window.innerHeight ;
  }

maxX -= item.subMenu.offsetWidth;
  maxY -= item.subMenu.offsetHeight;

if (x > maxX)
    x = Math.max(0, x - item.offsetWidth - item.subMenu.offsetWidth
      + (menu.offsetWidth - item.offsetWidth));
  y = Math.max(0, Math.min(y, maxY));
  if (browser.isSA) {
    item.subMenu.style.left = (x) + "px";
    item.subMenu.style.top  = (y) + "px";
  }else{
    item.subMenu.style.left = x + "px";
    item.subMenu.style.top  = y + "px";
  }
  item.subMenu.style.visibility = "visible";

if (browser.isIE)
    window.event.cancelBubble = true;
  else
    event.stopPropagation();
}

function closeSubMenu(menu) {

if (menu == null || menu.activeItem == null)
    return;

if (menu.activeItem.subMenu != null) {
    closeSubMenu(menu.activeItem.subMenu);
    menu.activeItem.subMenu.style.visibility = "hidden";
    menu.activeItem.subMenu = null;
  }
//  removeClassName(menu.activeItem, "MENUITEMHIGHLIGHT");
  menu.activeItem = null;
}

function menuInit(menu) {

var itemList, spanList;
  var textEl, arrowEl;
  var itemWidth;
  var w, dw;
  var i, j;

if (browser.isIE) {
    menu.style.lineHeight = "2.5ex";
    spanList = menu.getElementsByTagName("SPAN");
    for (i = 0; i < spanList.length; i++)
      if (hasClassName(spanList[i], "MENUITEMARROW")) {
        spanList[i].style.fontFamily = "Webdings";
        spanList[i].firstChild.nodeValue = "4";
      }
  }

itemList = menu.getElementsByTagName("A");
  if (itemList.length > 0)
    itemWidth = itemList[0].offsetWidth;
  else
    return;

for (i = 0; i < itemList.length; i++) {
    spanList = itemList[i].getElementsByTagName("SPAN");
    textEl  = null;
    arrowEl = null;
    for (j = 0; j < spanList.length; j++) {
      if (hasClassName(spanList[j], "MENUITEMTEXT"))
        textEl = spanList[j];
      if (hasClassName(spanList[j], "MENUITEMARROW"))
        arrowEl = spanList[j];
    }
    if (textEl != null && arrowEl != null)
      textEl.style.paddingRight = (itemWidth 
        - (textEl.offsetWidth + arrowEl.offsetWidth)) + "px";
  }

if (browser.isIE) {
    w = itemList[0].offsetWidth;
    itemList[0].style.width = w + "px";
    dw = itemList[0].offsetWidth - w;
    w -= dw;
    itemList[0].style.width = w + "px";
  }
  menu.isInitialized = true;
}

function getContainerWith(node, tagName, className) {

while (node != null) {
    if (node.tagName != null && node.tagName == tagName &&
        hasClassName(node, className))
      return node;
    node = node.parentNode;
  }

return node;
}

function hasClassName(el, name) {

var i, list;

list = el.className.split(" ");
  for (i = 0; i < list.length; i++)
    if (list[i] == name)
      return true;

return false;
}

function removeClassName(el, name) {

var i, curList, newList;

if (el.className == null)
    return;

newList = new Array();
  curList = el.className.split(" ");
  for (i = 0; i < curList.length; i++)
    if (curList[i] != name)
      newList.push(curList[i]);
  el.className = newList.join(" ");
}

function getPageOffsetLeft(el) {

var x;

x = el.offsetLeft;
  if (el.offsetParent != null)
    x += getPageOffsetLeft(el.offsetParent)+0.5;

return x;
}

function getPageOffsetTop(el) {

var y;

y = el.offsetTop;
  if (el.offsetParent != null)
    y += getPageOffsetTop(el.offsetParent);

return y;
}
//]]>
</script>
</head>

<div id="POSITION">

<div id="HEADER">

<div id="TITLE">
<h1>{blog_name}</h1>
<p>{blog_description}</p>
</div>

</div>

<div id="MENU_LINK">
<a href="#" onclick="return buttonClick(event, 'MENU1');">calendar</a> | 
<a href="#" onclick="return buttonClick(event, 'MENU2');">entry</a> | 
<a href="#" onclick="return buttonClick(event, 'MENU3');">category</a> | 
<a href="#" onclick="return buttonClick(event, 'MENU4');">archive</a> | 
<a href="#" onclick="return buttonClick(event, 'MENU5');">recommend</a> | 
<a href="#" onclick="return buttonClick(event, 'MENU6');">link</a> <br />
<a href="#" onclick="return buttonClick(event, 'MENU7');">comment</a> | 
<a href="#" onclick="return buttonClick(event, 'MENU8');">trackback</a> | 
<a href="#" onclick="return buttonClick(event, 'MENU9');">profile</a> | 
<a href="#" onclick="return buttonClick(event, 'MENU10');">others</a>
</div>

<div id="MENU_BOX">

<div id="MENU1" class="MENU">
<div class="calendar" align="center">
<table border="0" cellspacing="1" cellpadding="0">
			<tr>
			<td class="weekday">S</td>
			<td class="weekday">M</td>
			<td class="weekday">T</td>
			<td class="weekday">W</td>
			<td class="weekday">T</td>
			<td class="weekday">F</td>
			<td class="weekday">S</td>
			</tr>
			</table>
			{calendar}
</div>
<div class="list_title">CALENDAR</div>
</div>

<div id="MENU2" class="MENU">
<div class="list_text">{latest_entry_list}</div>
<div class="list_title">LATEST ENTRY</div>
</div>

<div id="MENU3" class="MENU">
<div class="list_text">{category_list}</div>
<div class="list_title">CATEGORY</div>
</div>

<div id="MENU4" class="MENU">
<div class="list_text">{archives_list}</div>
<div class="list_title">ARCHIVE</div>
</div>

<div id="MENU5" class="MENU">

<div class="list_text">{amazon_item}</div>
	
<div class="list_title">RECOMMEND</div>
</div>

<div id="MENU6" class="MENU">
<div class="list_text">{link_list}</div>
<div class="list_title">LINK</div>
</div>

<div id="MENU7" class="MENU">
<div class="list_text">{recent_comment_list}</div>
<div class="list_title">RECENT COMMENT</div>
</div>

<div id="MENU8" class="MENU">
<div class="list_text">{recent_trackback_list}</div>
<div class="list_title">RECENT TRACKBACK</div>
</div>

<div id="MENU9" class="MENU">
<div class="list_text">{user_list}</div>
<div class="list_title">PROFILE</div>
</div>

<div class="f_t">{freespace_title1}</div>
			<div class="f_c">{freespace_contents1}</div>

<div class="f_t">{freespace_title2}</div>
			<div class="f_c">{freespace_contents2}</div>

<div class="f_t">{freespace_title3}</div>
			<div class="f_c">{freespace_contents3}</div>

<div class="f_t">{freespace_title4}</div>
			<div class="f_c">{freespace_contents4}</div>

<div class="f_t">{freespace_title5}</div>
			<div class="f_c">{freespace_contents5}</div>
			
<ul>
<li><a href="{site_rss}">RSS1.0</a></li> 
<li><a href="{site_atom}">Atom0.3</a></li>
<li><a href="./admin/">Admin</a></li>
</ul>
</div>
<div class="list_title">OTHERS</div>
</div>

</div>

<div id="CONTENTS">

<div id="MAIN">

<div class="entry">

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

<div class="entry_title"><h2>{entry_title}</h2></div>
<div class="entry_data">{entry_date}</div>
<div class="entry_body">{entry_description}</div>
<div class="entry_more">

<a href="./?eid={entry_sequel_id}#sequel">read more...</a>


{entry_sequel_text}

</div>
<div class="entry_state">
<span class="state_category">{category_name} | </span>
<span class="state_time">{entry_time} | </span>
<span class="state_tb">{trackback_num} | </span>
<span class="state_cm">{comment_num}</span>
</div>

{trackback_auto_discovery}

</div>

<div class="comment" id="comments">

<div class="comment_title"><h2>comment</h2></div>

<div class="comment_data">
<div class="comment_body" id="cm_{comment_id}"><p>{comment_description}</p></div>
<div class="comment_state">
<span class="state_cm_name">{comment_name} | </span>
<span class="state_cm_time">{comment_time_24}</span>
</div>
</div>

<div class="formarea">
<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
<div><input type="hidden" name="entry_id" value="{entry_id}" /></div>
<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</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">comments</label></dt>
<dd><textarea tabindex="4" id="description" name="description" rows="7" cols="50"></textarea></dd>
<dt><input tabindex="5" type="submit" id="cmsub" value="comment" onclick="javascript:setval();" /></dt>
<dt><input type="checkbox" name="set_cookie" value="1" id="set_cookie" /><label for="set_cookie">Cookieに登録</label></dt>
</dl>
</form>
</div>

</div>

<div class="trackback" id="trackbacks">

<div class="formarea" id="TBurl">
<div class="trackback_title"><h2>trackback URL</h2></div>
<dl>
<dt><label for="url">url</label></dt>
<dd><input type="text" value="{trackback_url}" name="url" /></dd>
</dl>
</div>

<div class="trackback_title"><h2>trackback</h2></div>

<div class="trackback_data">
<div class="trackback_body"><p>{trackback_excerpt}</p></div>
<div class="trackbackt_state">
<span class="trackback_title" id="tb_{trackback_id}">{trackback_title} | </span>
<span class="state_tb_blog_name">{trackback_blog_name} | </span>
<span class="state_tb_time">{trackback_time_24}</span>
</div>
</div>

</div>

<div class="entry" id="profile_box">
<div class="entry_title" id="profile_title"><h2>{profile_name}</h2></div>
<div class="entry_body" id="profile_body">{profile_description}</div>
</div>

<div class="paging">
<a href="{prev_page_url}">&lt;&lt;</a>{page_now}/{page_num}<a href="{next_page_url}">&gt;&gt;</a>
</div>

</div>

</div>

<div id="FOOTER">
Powered by <a href="http://jugem.jp/" target="_blank">JUGEM</a> 
Material by <a href="http://surephotosozai.web.fc2.com/" target="_blank">::: sure* :::</a> 
Template by <a href="http://reimix.jugem.jp/" target="_blank">Re:mix</a>

<div id="AD">
{ad}
</div>

</div>

</div>

</body>
</html>

CSS

/*////////////////////////////// エレメント ///*/
body,table,th,td,pre,textarea,input {
	font-size: 75%;
}

*{
	margin: 0;
	padding: 0;
	font-family: "Osaka‐等幅","Verdana","ＭＳ ゴシック";
	color: #5b5b5b;
	letter-spacing: 2px;
	line-height: 200%;
	scrollbar-arrow-color: #5b5b5b;
	scrollbar-face-color: #fff;
	scrollbar-highlight-color: #f2f2f2;
	scrollbar-shadow-color: #f2f2f2;
	scrollbar-3dlight-color: #fff;
	scrollbar-darkshadow-color: #fff;
	scrollbar-track-color: #fff;
}

a:link {color:#999; text-decoration:none;}
a:visited {color:#999; text-decoration:none;}
a:active {color:#999; text-decoration:none;}
a:hover {color:#ccc; text-decoration:none;}

a img {
	border:none;
}

p{
	margin-top: 10px;
	margin-bottom: 10px;
}

h2,h3 {
	font-size: 12px;
}

br {
	letter-spacing:normal;
}

textarea {
	overflow: auto;
	letter-spacing: normal;
	scrollbar-face-color: #999;
	scrollbar-highlight-color: #999;
	scrollbar-shadow-color: #999;
	scrollbar-3dlight-color: #999;
	scrollbar-darkshadow-color: #999;
	scrollbar-track-color: #eee;
	scrollbar-arrow-color: #eee;
}

/*////////////////////////////// 横幅要素 ///*/
#HEADER,
#CONTENTS,
#MENU_LINK,
#AD,
#FOOTER {
	width: 600px;
}

#search {
	width: 130px;
}

.formarea input,
.formarea textarea {
	width: 100%;
}

.entry textarea {
	width: 580px;
}

/*////////////////////////////// メインBOX#ID ///*/
#POSITION,div#HEADER {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#HEADER {
	padding: 80px auto 0;
	background: #fff url(http://img-cdn.jg.jugem.jp/64c/963251/20080827_147606.gif) no-repeat right bottom;
	height: 200px;
}

#MENU_LINK {
	margin: 20px auto;
	text-align: left;
}

#TITLE {
	text-align: left;
	padding-top: 20px;
}

#TITLE h1{
	font-size: 18px;
}

#MAIN li {
	list-style:none;
}

#CONTENTS {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#AD {
	text-align: right;
}

#FOOTER {
	margin-left: auto;
	margin-right: auto;
}

/*////////////////////////////// メニュー ///*/
.MENU {
	display: none;
	z-index: 999;
	position: absolute;

width: 230px;
	margin-top: 5px;
	padding-top: 5px;

background: #fff;
	border: 1px #b2b2b2 solid;
}

.MENU li {
	list-style:none;
	background: url(http://img-cdn.jg.jugem.jp/64c/963251/20080809_41987.gif) repeat-x 100% 100%;
}

.list_title {
	margin: 10px;
	font-size: 12px;
	text-align: center;
	background: #fef1fe;
}

.list_text {
	padding:5px 10px;
	color: #666;
	text-align:left;
}

.f_t {
	font-weight: bold;
}

.f_c {
	margin-top: 10px;
	margin-bottom: 10px;
}

/*////////////////////////////// カレンダー ///*/
.calendar {
	font-size: 10px;
	font-family: "Verdana";
	color: #666666;
	margin:0px auto;
}

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

.weekday {
	font-size: 10px;
	width: 25px;
	height: 20px;
	padding: 0px;
	text-align:center;
	color: #666666;
}

.cell {
	font-size: 10px;
	width: 25px;
	height: 20px;
	padding: 0px;
	text-align:center;
	color: #666666;
	background:#fef1fe;
}

.cell a {color: pink;text-decoration: none; font-weight:bolder;}
.cell a:link {color: pink;text-decoration: none;}
.cell a:visited {color: pink;text-decoration: none;}
.cell a:active {color: pink;text-decoration: none;}
.cell a:hover {color: pink;text-decoration: none;}

.calendar table {
	margin:0 auto;
}

/*////////////////////////////// エントリー・CM・TB タイトル ///*/

.entry_title h2,
.comment_title h2,
.trackback_title h2 {
	background: url(http://img-cdn.jg.jugem.jp/64c/963251/20080809_41987.gif) repeat-x bottom;
}

/*////////////////////////////// エントリー・CM・TB ボディ ///*/
.entry_body,
.comment_body,
.trackback_body {
	margin : 10px 0;
}

/*////////////////////////////// エントリー・CM・TB ステータス ///*/
.entry_state,
.comment_state,
.trackbackt_state {
	text-align: right;
}

/*////////////////////////////// エントリー ///*/
.entry {
	margin-bottom: 50px;
}

.entry_more {
	margin-top : 10px;
}

/*////////////////////////////// エントリー記事装飾 ///*/
.entry blockquote {
	background: url(http://img-cdn.jg.jugem.jp/64c/963251/20080827_148069.gif);
	border-top: 1px #fef1fe solid;
	border-bottom: 1px #fef1fe solid;
	padding: 5px;
}

.entry textarea {
	background: url(http://img-cdn.jg.jugem.jp/64c/963251/20080827_148068.png);
	border: none;
	padding: 10px;
}

.entry h3 {
	margin-top: 10px;
	margin-bottom: 10px;
}

.entry hr {
	border-style: dashed none none none;
	border-top-width: 1px;
	border-top-color: #ffe4e1;
	height: 1px;
}

.pict {
	border: 1px solid #eee;
	padding: 5px;
}

/*////////////////////////////// トラックバック ///*/
.trackback {
	margin-top: 10px;
}

.trackback_data {
	margin: 10px 0px 50px;
}

#TBurl dl {
	margin: 20px 0;
}

#TBurl label {
	display:none;
}

/*////////////////////////////// フォーム ///*/
.formarea textarea {
	letter-spacing: 2px;
}

.button {
	margin-left: 5px;
}

#sea_box input,
.formarea input,
.formarea textarea {
	border: 1px solid #eee;
	padding: 2px 0;
	line-height: 100%;
}

#cmsub,
.button {
	color: #fff;
	background: #7e7e7e url(http://img-cdn.jg.jugem.jp/64c/963251/20080809_42290.gif);
}

#cmsub {
	margin: 5px 0; 
}

#set_cookie {
	border: none;
	width: 20px;
}

/*////////////////////////////// ページ移動 ///*/
.entry_navi,
.paging {
	text-align: center;
}

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