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

ホーム

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

テンプレート名 : stella_memo

HTML・CSSをコピーして使う

HTML

<?xml version="1.0" encoding="{site_encoding}"?>
<!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 rel="stylesheet" href="{gmo_header_css}" type="text/css" media="screen,print" />
<link rel="alternate" href="{mobile_url}" type="application/xhtml+xml" media="handheld" />
<link rel="alternate" href="{site_rss}" type="application/rss+xml" title="RSS" />
<link rel="alternate" href="{site_atom}" type="application/atom+xml" />
<script src="./template/js/cookie.js" type="text/javascript"></script>
<script src="./template/analogue/menu.js" type="text/javascript"></script>

</head>
<body onload="javascript:initval();">
<div id="page">

<div id="header">
<div class="navi_navi">| <a href="./admin">Login</a> | <a href="./?mode=rss">RSS1.0</a> | <a href="./?mode=atom">Atom0.3</a> |
</div>

<div id="blog_title">
<h1 id="top">{blog_name}</h1>
<p class="description">{blog_description}</p>

<form method="get" class="search-form">
<input id="search" name="search" value="Search this site" size="20" class="search-input" />
<input type="submit" value="Search" class="search-button" />
</form>
</div>

<div id="calendar">
{calendar_horizontal}
</div>

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

<div id="MENU1" class="MENU">
<div class="menu_title">Profile</div>
<div class="menu_list">
{user_list}
</div>
</div>

<div id="MENU2" class="MENU">
<div class="menu_title">New Entries</div>
<div class="menu_list">
{latest_entry_list}
</div>
</div>

	

<div id="MENU3" class="MENU">
<div class="menu_title">Categories</div>
<div class="menu_list">
{category_list}
</div>
</div>

	

<div id="MENU4" class="MENU">
<div class="menu_title">Archives</div>
<div class="menu_list">
{archives_list}
</div>
</div>

	

<div id="MENU5" class="MENU">
<div class="menu_title">Recent Comments</div>
<div class="menu_list">
{recent_comment_list}
</div>
</div>

	

<div id="MENU6" class="MENU">
<div class="menu_title">Recent Trackback</div>
<div class="menu_list">
{recent_trackback_list}
</div>
</div>

	

<div id="MENU7" class="MENU">
<div class="menu_title">Links</div>
<div class="menu_list">
{link_list}
</div>
</div>

<div id="MENU8" class="MENU">
<div class="menu_title">Recommend</div>

<div class="menu_list">
{amazon_item}
</div>

</div>


</div>

<div id="contents">

<div class="entry">
<div class="entry_box">

<div class="entry_head">
<span>{entry_year}.</span>{entry_month}/{entry_day}&nbsp;{entry_eng_week}
</div>
<div class="entry_text">
<h2><a href="{entry_permalink}">{entry_title}</a></h2>
<div class="entry_body">{entry_description}</div>
<div class="entry_more">{entry_sequel}</div>
</div>
<p class="entry_footer">
{category_name}&nbsp;
CO<a href="{entry_permalink}#comments"title="{comment_num_only}">
({comment_num_only})</a>&nbsp;
TB<a href="{entry_permalink}#trackback"title="{trackback_num_only}">
({trackback_num_only})</a>&nbsp;
<a href="#top" title="pagetop">TOP▲</a>
</p>				
</div>
</div>


<p class="entry_navi">{prev_entry}&nbsp;|&nbsp;<a href="./" title="main">main</a>&nbsp;|&nbsp;{next_entry}</p>

{trackback_auto_discovery}

<div id="cctb">


<h3 id="comments">COMMENTS</h3>
<div class="comment_entry">

<dl>
<dt>{comment_description}</dt>
<dd>Posted by <span class="comment_name">{comment_name}</span>&nbsp;&nbsp;at {comment_time}</dd>
</dl>

<div>
<div class="comment_form">
<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
<input type="hidden" name="entry_id" value="{entry_id}" />
<label for="name">Name:</label><br />
<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" class="comment_input" /><br />
<label for="email">Mail:</label><br />
<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="comment_input" /><br />
<label for="url">URL:</label><br />
<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="comment_input" /><br />
<label for="description">Comments:</label><br />
<textarea tabindex="4" id="description" name="description" rows="10" cols="50" ></textarea><br />
<label for="set_cookie">Cookie:</label>
<input type="checkbox" name="set_cookie" value="1" id="set_cookie" />&nbsp;
<input tabindex="5" type="submit" value="submit" onclick="javascript:setval();" class="comment_button" />&nbsp;
</form>
</div>
</div>

</div>

<h3 id="trackback">TRACKBACKS</h3>
<div class="comment_entry">

<dl>
<dt><span class="comment_name">{trackback_title}<br />
{trackback_excerpt}</dt>
<dd>
{trackback_blog_name}</span>&nbsp;&nbsp;at {trackback_time}
</dd>
</dl>

<p class="trackback_url">&nbsp;TRACKBACK URL&nbsp;&raquo;&nbsp;&nbsp;<br />
<input type="text" name="tburl" size="50" value="{trackback_url}" class="tb_input" onfocus="this.select()" /></p>
</div>

</div>


<div class="profile_entry">
<p class="profile_name">{profile_name}</p>
<div class="profile_body">{profile_description}</div>
</div>

</div>

<div id="footer">
	


<div class="page_navi">			
{prev_page_link}&nbsp;&nbsp;&nbsp;{page_now}&nbsp;/&nbsp;{page_num} PAGES&nbsp;&nbsp;&nbsp;{next_page_link}
</div>

<div class="address">{copyright} Powered By "<a href="https://jugem.jp/">JUGEM</a>"
T.Name [stella_memo] Design By <a href="http://einmeteor.jugem.jp/" target="_blank">pika</a></div>

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

<div id="footer_link">


<dl>
<dt>{freespace_title1}</dt>
<dd>
{freespace_contents1}
</dd>
</dl>

	

<dl>
<dt>{freespace_title2}</dt>
<dd>
{freespace_contents2}
</dd>
</dl>

	

<dl>
<dt>{freespace_title3}</dt>
<dd>
{freespace_contents3}
</dd>
</dl>

	

<dl>
<dt>{freespace_title4}</dt>
<dd>
{freespace_contents4}
</dd>
</dl>

	

<dl>
<dt>{freespace_title5}</dt>
<dd>
{freespace_contents5}
</dd>
</dl>

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

CSS

/* 全般的な設定ここから */
body {
margin: 10px 100px;
line-height: 1.6; 
color: #000000; 
background-color: #fff; 
font-family : "\30D2\30E9\30AE\30CE\20Pro\20W3","Osaka","Verdana","Helvetica","Arial","\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF",sans-serif;
font-size: 62.5%;
text-align: center; 
letter-spacing: .1em; 
}

br { letter-spacing : normal; } /*IE用のバグ回避*/

a { text-decoration: none; }

table {
text-align: left; 
font-weight: normal;
font-size: 12px;
color: #888888;
}

table a:link {
text-align: left; 
font-weight: normal;
font-size: 12px;
}
table a:visited {
text-align: left; 
font-weight: normal;
font-size: 12px;
}

textarea,
input,
select {
font-family : "\30D2\30E9\30AE\30CE\20Pro\20W3","Osaka","Verdana","Helvetica","Arial","\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF",sans-serif;
}

/* リスト */
ul { padding-left: 2em; }
ol { padding-left: 2.5em; }

/* 文字装飾 */
strong { font-weight: bold; }

em { 
font-style: italic; 
font-weight: normal;
}

/* 引用  */
blockquote { 
margin : 20px 10px 15px 20px;
padding : 0.5em;
background : #eee;
border : 1px solid #999;
-moz-border-radius : 5px;
}

/* 画像の設定  */
img.pict { 
border: 1px solid #888;
margin:10px;
padding:10px;
}

/* レイアウトの設定 */
#page { 
width: 780px; 
}

#header { 
width: 100%;
}

#contents { 
width: 100%;
}

#cctb {
text-align:left;
}

#footer { 
width: 100%;
}

/* リンクの設定 */
a:link, 
a:visited { 
color:#5f9b9f;
}

a:hover { 
color :#4169e1;
text-decoration: underline;
}

a:active { 
color :#4169e1; 
}
/* 全般的な設定ここまで */

/* ヘッダーここから*/
/* RSS1.0、Atom0.3、Login. */
div.navi_navi {
text-align:right;
}

/* カレンダー */
div#calendar {
margin:5px 0px;
padding: 5px 0px;
color: #888888; 
font-size: 0.9em;
text-align: center; 
}

div#calendar a:link, 
div#calendar a:visited { 
color:#5f9b9f;
font-weight:bold;
}

div#calendar a:hover { 
color :#4169e1;
text-decoration: underline;
}

/* タイトル */
div#blog_title { 
margin: 0em 0 1em; 
padding: 0 1em;
text-align: left; 
}

h1 { 
line-height: 1em; 
font-size: 2.6em; 
letter-spacing: 2px; 
}

h1 a:link, 
h1 a:visited { 
color:#5f9b9f;
}

h1 a:hover { 
color :#4169e1; 
text-decoration:underline;
}

div#blog_title p.description { 
	padding: .5em 0 0;
	color: #888; 
	font-size: 1.2em; 
	}

/* 検索 */
.search-form {
margin: 0;
padding: .0em 0em .5em;
text-align: right; 
}

input.search-input {
background-color: #f7f6f5; 
vertical-align: text-bottom;
font-size: 10px;
}

input.search-button { 
	border: 1px solid #888; 
	color: #888;
	background-color: #fff; 
	font-weight: bold; 
	cursor: pointer;
	}

/* リンクメニュー */
div.linkmenu { 
padding: 0 5px;
line-height: 1.5; 
color: #fff;
background: #888; 
text-align: center;
}

div.linkmenu a:link, 
div.linkmenu a:visited {
color: #fff;
font-weight:bold;
}

div.linkmenu span {
margin:0px 5px;
}

div.linkmenu a:hover {
color:#fff;
text-decoration: underline;
}

/* 折り畳み部分 */
.MENU { 
margin: 10px 0 0 -80px; 
padding: .2em .5em .3em;	
position: absolute;
z-index: auto;
border: 1px solid #888; 
position: absolute;
z-index: auto;
width: 250px; 
visibility: hidden;
background: #fff; 
}

div.menu_title { 
	margin: 0; 
	padding: 3px;
	font-weight: bold;
	font-size: 1.1em;
	text-align:left;
	letter-spacing: 2px; 
}

div.menu_list { color: #fff;}

div.menu_list ul {
padding: 0;
list-style-type: none;
}

div.menu_list ul li { 
width: 225px; 
margin: 0 5px 3px 5px; 
padding: 2px 5px 2px 5px;
background-color: #888; 
text-align:left;
}

div.menu_list a:link, 
div.menu_list a:visited { 
color: #fff; 
}

div.menu_list a:hover { 
color :#fff;
text-decoration:underline;
}

/* オススメ */
div.amazon {
	margin: 0 0 3px; 
	padding: .2em .5em;
	background-color: #888; 
	}
img.amazon_pict { 
	margin: .7em .5em;
	border: 1px solid #d2d2d2; 
	}
div.amazon_text {
	padding: 0 0 .3em .2em;
	color: #fff; 
	}
/* ヘッダーここまで  */

/* エントリー部分の設定ここから */
div.entry { 
margin: 10px 0 10px;
background-color: #fff; 
}

/* エントリー内段組み */
div.entry_box { 
margin:5px 0px 5px 0px;
border: 1px solid #888;
}

div.entry_head {
font-family:arial black,'ＭＳ Ｐゴシック',sans-serif ;
font-size:18px;
font-style: italic;
font-weight:bold;
text-align:left;
margin: 0px 20px 10px 20px;
border-bottom: 1px solid #888;
}

div.entry_head span {
font-size:25px;
}

/* 記事本文 */
div.entry_text {
text-align:left;
margin: 0px 10px;
padding: 0px 15px;

}

div.entry p.entry_footer { 
padding: 5px 0px 0px 0px;
margin: 5px 20px 10px 20px;
clear: right;
color: #a1a1a1;
text-align: right; 
}

/* エントリー */
div.entry_text h2 { 
padding: .5em 1.2em 1em 0px;
line-height: 1.2; 
color: #1e2a63;
font-size: 1.7em;
text-align: left; 
}

div.entry_text div.entry_body, 
div.entry_text div.entry_more { 
padding: 0px 1.5em 10px 0px;
line-height: 1.2;
color: #888888; 
font-size: 1.2em;
}

/*  レビュー（デフォルトで表示したい場合は削除してください～ここから） */
div.jugem_review {
	margin: .8em 0;
	padding: .8em .5em;
	border-top: 5px solid #efefef; 
	border-bottom: 5px solid #efefef; 
	background-color: #f7f6f5; 
}

div.review_img {
	margin: 0 auto; 
	padding: .5em .5em .8em;
	text-align: center; 
	}
div.review_info,
div.review_info_area {
	line-height: 1.6; 
	}
div.review_info div.review_item_title,
div.review_info_area div.review_item_title {
	font-weight: bold; 
	}
div.review_info div.link_monocolle,
div.review_info_area div.link_monocolle {
	padding: 0 0 .7em;
	}
/* レビュー（デフォルトで表示したい場合は削除してください～ここまで） */

p.entry_navi { /* エントリーナビ */
	margin: 0 0 10px;
	padding: 0 .2em;
	border: 1px solid #888; 
	line-height: 1.8em; 
	color: #fff;
	background-color: #888; 
	text-align:center;
	}

p.entry_navi a:link,p.entry_navi a:visited {
color:#fff;
}

/* エントリー部分の設定ここまで */

/* コメント＆トラックバックここから */
h3 { 
width: 400px;
margin:0px;
padding:0px 0px 0px 5px;
line-height: 1.8; 
color: #fff; 
background-color: #888; 
font-size: 1.1em; 
letter-spacing: 2px;
text-align:left; 
}

/* 表示 */
div.comment_entry dl { 
width: 400px;
margin:0px;
border: 1px solid #d2d2d2; 
}

div.comment_entry dl dt {
margin:0px;
padding:0px 3px 0px 3px;
border-bottom: 1px solid #d2d2d2; 
background-color: #f7f6f5; 
text-align: left;
line-height:1.5; 
font-size: 1.2em;
}

div.comment_entry dl dt span.comment_name { 
margin:0px;
color: #333; 
}

div.comment_entry dl dd { 
padding: 0px 10px;
line-height: 1.8;
color: #333; 
font-size: 1em; 
text-align: right;
}

/* コメントフォーム */
div.comment_form { 
width: 400px;
padding: 2.5em 2.5em 2.5em 1.5em;
margin:15px 0px;
border: 1px solid #d2d2d2; 
background-color: #f7f6f5; 
text-align: left; 
}

input, 
textarea { 
	margin: 1px;
	border: 1px solid #d2d2d2;
	line-height: 1.8;
	color: #333;
	background-color: #fff; 
	font-size: 1.2em;
	letter-spacing: 1px; 
	}
input.comment_input { 
	width: 300px;
	}
div.comment_form textarea { 
	width: 300px;
	}

input.comment_button { 
margin: 15px 5px 5px;	
border: solid 1px #888;
color: #000
background-color: 888; 
font-weight: bold; 
cursor: pointer;
}

/* トラックバックURL */
p.trackback_url { 
margin:5px 0px;
padding:0px 0px 0px 5px;
line-height: 1.8;
font-weight: bold;
font-size: 1.1em;
color: #888;
text-align: left; 
}

input.tb_input {
margin: 5px 0px;
height: 20px;
background-color: transparent; 
background-image: none; 
color: #888;
font-weight: bold;
font-size: 1em;
}

/* プロフィール  */
div.profile_entry { 
margin: 0 0 10px;
border: 1px solid #d2d2d2;
text-align: left;
}

p.profile_name { 
	padding: 2px .7em;
	border-bottom: 3px double #d2d2d2; 
	background-color: #f7f6f5; 
	font-size: 1.8em; 
	letter-spacing: 2px; 
	}
div.profile_body { 
	padding: 1.3em;
	color: #333; 
	line-height: 1.8; 
	font-size: 1.2em; 
	}

/* フッターここから */
/* ページナビ */
div.page_navi { 
width: 780px;
padding: 0 2px;
line-height: 1.8; 
color: #fff;
background-color: #888888; 
text-align: center; 
letter-spacing: 2px; 
}

div.page_navi a:link, div.page_navi a:visited {
color: #fff;
font-weight:bold;
}

div.page_navi a:hover {
color :#4169e1;
background-color: #888; 
}

/* 著作権表記 */
div.address { 
width: 780px;
padding: 0 2px;
margin: 5px 0px;
clear: left;
line-height: 1.8; 
color: #fff;
background-color: #888; 
font-style: normal; 
text-align: center; 
}

div.address a:link, div.address a:visited {
color: #fff;
font-weight:bold;
}

div#footer_box { 
	margin: 10px 0;
	}
div#footer_ad { /* 左（広告） */
	float: left;
	clear: left;
	}
div#footer_link { /* フリースペース等 */
	margin-left: 135px;
	}

/* 広告 */
#ad div.linktext {
margin: 0 0 10px;
}

/* フリースペース */
div#footer_link dl { 
	margin: 0 0 10px;
	border: 1px solid #d2d2d2; 
	}
#footer_link dl dt { 
	padding: .2em .7em;
	border-bottom: 1px dashed #d2d2d2; 
	font-weight: bold; 
	}
#footer_link dl dd { 
	padding: .7em;
	}

#footer_link ul {
	padding: 0 0 .3em;
	list-style-type: none;
	}
#footer_link ul li {
	padding: .1em .5em;
	border-bottom: 1px solid #efefef; 
	}
#footer_link p.pagetop {
	padding: .2em .5em .7em;
	text-align: right; 
	}

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