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

ホーム

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

テンプレート名 : Kiss!Kiss!Kiss!

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="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="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 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>

</body>
</html>

CSS

body {
background-image: url('http://img-cdn.jg.jugem.jp/17b/1154026/20090206_851660.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}

body,table,th,td,pre,textarea,input {
margin: 0;
padding: 0;
font-family: "Osaka‐等幅","Verdana","ＭＳ ゴシック";
color: #5b5b5b;
font-size: 10px;
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;
}

#POSITION,div#HEADER {
margin-left: auto;
margin-right: auto;
text-align: center;
}

#HEADER {
padding: 80px auto 0;
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;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;
}

.entry_title h2,
.comment_title h2,
.trackback_title h2 {repeat-x bottom;
}

.entry_body,
.comment_body,
.trackback_body {
margin : 10px 0;
}

.entry_state,
.comment_state,
.trackbackt_state {
text-align: right;
}

.entry {
margin-bottom: 50px;
}

.entry_more {
margin-top : 10px;
}

.entry blockquote {
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;
}

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