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

ホーム

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

テンプレート名 : gradation square

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}" />

<div id="wrapper">
<table border="0" cellpadding="0" cellspacing="0" width="350px" align="center">
<tr>
<td class="back">

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

</td>
</tr>
<tr>
<td align="right">
<div class="swich">
<a href="javascript:menuSwich('cal');" title="calendar">
<Font Color="#eeeeee" Font Size="4">■</Font></a>
<a href="javascript:menuSwich('ama');" title="recommend">
<Font Color="#dddddd" Font Size="4">■</Font></a>
<a href="javascript:menuSwich('ent');" title="new entries">
<Font Color="#cccccc" Font Size="4">■</Font></a>
<a href="javascript:menuSwich('com');" title="recent comments">
<Font Color="#bbbbbb" Font Size="4">■</Font></a>
<a href="javascript:menuSwich('tra');" title="recent trackback">
<Font Color="#aaaaaa" Font Size="4">■</Font></a>
<a href="javascript:menuSwich('cat');" title="categories">
<Font Color="#999999" Font Size="4">■</Font></a> 
<a href="javascript:menuSwich('arc');" title="archives">
<Font Color="#888888" Font Size="4">■</Font></a>
<a href="javascript:menuSwich('lnk');" title="links">
<Font Color="#777777" Font Size="4">■</Font></a>
<a href="javascript:menuSwich('pro');" title="profile">
<Font Color="#666666" Font Size="4">■</Font></a>
<a href="javascript:menuSwich('log');" title="admin">
<Font Color="#555555" Font Size="4">■</Font></a>
<a href="javascript:menuSwich('f1');" title="freespace1">
<Font Color="#444444" Font Size="4">■</Font></a>
<a href="javascript:menuSwich('f2');" title="freespace2">
<Font Color="#333333" Font Size="4">■</Font></a>
<a href="javascript:menuSwich('f3');" title="freespace3">
<Font Color="#222222" Font Size="4">■</Font></a>
</div>
</td>
</tr>
<tr>
<td>
<div class="list" id="cal">
<div class="list_title">
calendar<a href="javascript:hideAll()" title="close">
×
</a>
</div>

<div class="calendar">
{calendar2}
</div>
</div>

<div class="list" id="ama">
<div class="list_title">
recommend<a href="javascript:hideAll()" title="close">
×
</a>
</div>
<div class="list_text">
<a href="{amazon_url}" target="_blank" title="{amazon_ProductName} / {amazon_Creator}"><img src="{amazon_ImageUrlSmall}" border="0" alt="{amazon_ProductName}" class="amazon_pict" /></a>
</div>
</div>



<div class="list" id="ent">
<div class="list_title">
new entries<a href="javascript:hideAll()" title="close">
×
</a>
</div>
<div class="list_text">
{latest_entry_list}
</div>
</div>


<div class="list" id="com">
<div class="list_title">
recent comments<a href="javascript:hideAll()" title="close">
×
</a>
</div>
<div class="list_text">
{recent_comment_list}
</div>
</div>


<div class="list" id="tra">
<div class="list_title">
recent trackback<a href="javascript:hideAll()" title="close">
×
</a>
</div>
<div class="list_text">
{recent_trackback_list}
</div>
</div>


<div class="list" id="cat">
<div class="list_title">
categories<a href="javascript:hideAll()" title="close">
×
</a>
</div>
<div class="list_text">
{category_list}
</div>
</div>


<div class="list" id="arc">
<div class="list_title">
archives<a href="javascript:hideAll()" title="close">
×
</a>
</div>
<div class="list_text">
{archives_list}
</div>
</div>


<div class="list" id="lnk">
<div class="list_title">
links<a href="javascript:hideAll()" title="close">
×
</a>
</div>
<div class="list_text">
{link_list}
</div>
</div>


<div class="list" id="pro">
<div class="list_title">
profile<a href="javascript:hideAll()" title="close">
×
</a>
</div>
<div class="list_text">
{user_list}
</div>
</div>
<div class="list" id="log">
<div class="list_title">
admin<a href="javascript:hideAll()" title="close">
×
</a>
</div>
<div class="list_text">
<a href="./admin/">admin</a>
</div>
</div>

<div class="list" id="f1">
<div class="list_title">
freespace1<a href="javascript:hideAll()" title="close">
×
</a>
</div>
<div class="list_text">
{freespace_contents1}
</div>
</div>

<div class="list" id="f2">
<div class="list_title">
freespace2<a href="javascript:hideAll()" title="close">
×
</a>
</div>
<div class="list_text">
{freespace_contents2}
</div>
</div>

<div class="list" id="f3">
<div class="list_title">
freespace3<a href="javascript:hideAll()" title="close">
×
</a>
</div>
<div class="list_text">
{freespace_contents3}
</div>
</div>

</td>
</tr>

<tr>
<td>

<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_author">
{entry_date} {entry_time} by{user_name}
</div>
<div class="entry_body">
{entry_description}
</div>
<a name="sequel"></a>
<div class="entry_more">
{entry_sequel}
</div>
<a name="sequel"></a>
<div class="entry_state">
{category_name} | {comment_num} | {trackback_num} 
</div>
</div>
{trackback_auto_discovery}

	

<a name="comments"></a>
<div class="comment">
<div class="com_title">comment</div>

<div class="com_dscp">
{comment_description}
</div>
<div class="com_state">
{comment_time}　　by {comment_name} 
</div>

<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
<div class="com_body">
<input type="hidden" name="entry_id" value="{entry_id}" />
<label for="name"> name</label><br/>
<input type="text" tabindex="1" size="20" name="name" id="name" value="{cookie_name}" class="form" /><br />
<label for="email"> email</label><br />
<input type="text" tabindex="2" size="20" name="email" id="email" value="{cookie_email}" class="form" /><br />
<label for="url"> url</label><br />
<input type="text" tabindex="3" size="20" name="url" id="url" value="{cookie_url}" class="form" /><br />
<label for="description"> comments</label><br />
<textarea tabindex="6" id="description" name="description" rows="10" cols="10" class="form"></textarea><br />
<br />
<input type="checkbox" name="set_cookie" value="1" id="set_cookie" />
<label for="set_cookie">Cookieに登録</label>
<br /><br />
<input tabindex="6" type="submit" value="submit" onclick="javascript:setval();" />
</div>
</form>
</div>


<a name="trackback"></a>
<div class="trackback">
<form>
<div class="tra_title">trackback url</div>
<input type="text" size="20" value="{trackback_url}" class="form" />
</form>

<div class="tra_e_title">{trackback_title}</div>
<div class="tra_e_body">{trackback_excerpt}</div>
<div class="tra_e_state">
 | {trackback_blog_name} | {trackback_time} | 
</div>

</div>


<div class="profile">
<div class="pro_title">profile</div>
<div class="pro_name">{profile_name}</div>
<div class="pro_body">{profile_description}</div>
</div>

</td>
</tr>
<tr>
<td align="center">
<div class="pagenavi">

<script type="text/javascript">
		//<![CDATA[
		//前の記事・次の記事リンクの作成
			function seq_pagelink(){
				var nexturl="{next_permalink}";//次の記事へ使う記号
				var prevurl="{prev_permalink}";//前の記事へ使う記号
				var nextmark = "←";
				var prevmark="→";
				var strUrl=location.pathname;
				
				//個別のページで無い場合は処理をしない。
				if(!strUrl.match("eid="))return;
				if(nexturl)nextmark = "<a href=\"" + nexturl + "\">" + nextmark + "</a>";
				if(prevurl)prevmark = "<a href=\"" + prevurl + "\">" + prevmark + "</a>";
				document.writeln(nextmark);
				document.writeln("<a href=\"{entry_permalink}\">★</a>");
				document.writeln(prevmark);
			}seq_pagelink();
		//]]>
		</script>
	

<ul class="navi">
<li>{prev_page_link}</li>
<li>{page_now}/{page_num}PAGES</li>
<li>{next_page_link}</li>
</ul>

<div class="top"><a href="#top">△ top</a></div>
</div>

</div>

<table id="footer" border="0">
<Tbody>
<tr>
<td rowspan="2"><br /><br />{ad}</TD>
<td>
<div align="left">
<br /><br />
<a href="./?mode=rss" onClick="window.open('./?mode=rss','rss','width=300,height=400,scrollbars=yes,status=yes,resizable=yes');return false;">RSS1.0</a><br />
<a href="./?mode=rss" onClick="window.open('./?mode=atom','atom','width=300,height=400,scrollbars=yes,status=yes,resizable=yes');return false;">Atom0.3</a><br />
<br />
{site_qrcode}
</div>
</td>
</tr>
<tr>
<td>
<div align="left">
<a href="http://paperboy.co.jp/" target="_blank" title="paperboy&amp;co."><img src="../template/banner/paperboy_orange01.gif" width="128" height="22" alt="paperboy&amp;co." border="0" /></a>
<br />
{powered}
<br /><br />
template by<br />
<a href="http://mistybluerose.jugem.jp/" target="_blank">moon in the noon</a>
</div>
<br /><br /><br />
</td>
</tr>
</Tbody>
</table>

</body>
</html>

CSS

* {
margin:0px;
padding:0px;
}

body{
background-color:#ffffff;
font-family:"Verdana","ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3",;
}

#wrapper {
width: 350px;
margin: 0 auto;
border: 1px solid #222222;
}

#footer {
width: 350px;
background-color:#222222;
color: #cccccc;
font-size: 11px;
padding:15px 10px 20px 10px;
}

#footer a:link {
color: #cccccc;
text-decoration:none;
}
#footer a:visited {
color: #cccccc;
text-decoration:none;
}
#footer a:hover {
color: #cccccc;
text-decoration:none;
}
#footer a:active {
color: #cccccc;
text-decoration:none;
}

ul {
list-style: none;
}

.swich {
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3",;
padding: 10px 5px 0px 5px;
}

/*全体のリンクに関する設定*/
a:link {
color: #777777;
text-decoration:none;
}
a:visited {
color: #777777;
text-decoration:none;
}
a:hover {
color: #777777;
text-decoration:none;
}
a:active {
color: #cccccc;
text-decoration:none;
}

/*フォーム部の設定*/

.form {
font-size: 12px;
width: 250px;
}

/*タイトル部の設定*/
/*タイトル部の背景*/
.back {
background-color: #222222;
margin-bottom: 10px;
}

/*タイトル文字*/
.site_title {
font-size: 15px;
font-weight: bold;
text-align: right;
padding: 60px 5px 5px 5px;
}
/*タイトル文字のリンク設定*/
.site_title a:link {
color: #ffffff;
text-decoration:none;
}
.site_title a:visited {
color: #ffffff;
text-decoration:none;
}
.site_title a:hover {
color: #ffffff;
text-decoration:none;
}
.site_title a:active {
color: #ffffff;
text-decoration:none;
}

/*サイトの概要部*/
.description {
font-size: 11px;
text-align:right;
color: #ffffff;
padding:0px 5px 10px 5px;
}

/*コンテンツ部の設定*/
/*各コンテンツの枠設定*/
.entry,.comment,.trackback,.profile{
font-size:11px;
padding: 5px;
margin-bottom: 5px;
}
/*エントリーナビ*/
.entry_navi{
font-size:11px;
text-align:center;
margin:5px 0 0 0;
}
/*エントリー日時*/
.entry_author {
font-size: 11px;
text-align: right;
color: #777777;
background-color: #ffffff;
padding: 5px 5px 5px 0px;
}
/*エントリーのタイトル*/
.entry_title {
font-size: 12px;
font-weight: bold;
color: #ffffff;
background-color: #333333;
padding:5px 0px 5px 10px;
}
/*エントリーのタイトル文字のリンク設定*/
.entry_title a:link {
font-weight: bold;
color: #ffffff;
text-decoration:none;
}
.entry_title a:visited {
font-weight: bold;
color: #ffffff;
text-decoration:none;
}
.entry_title a:hover {
font-weight: bold;
color: #ffffff;
text-decoration:none;
}
.entry_title a:active {
font-weight: bold;
color: #cccccc;
text-decoration:none;
}

/*エントリーの概要*/
.entry_body {
font-size: 11px;
color: #777777;
line-height:170%;
margin-top:10px;
margin-bottom:5px;
padding:0px 15px 5px 15px;
}
/*エントリーの詳細*/
.entry_more {
font-size: 11px;
color: #777777;
line-height:170%;
}

/*エントリーのステータス*/
.entry_state {
font-size: 10px;
color: #cccccc;
padding: 5px 5px 0px 0px;
text-align:right;
}

/*コメントのタイトル*/
.com_title{
font-size: 12px;
font-weight: bold;
color: #333333;
padding: 10px 10px 5px 10px;
border-bottom: 1px solid #222222;
}
/*コメントの内容*/
.com_dscp {
font-size: 11px;
color: #777777;
line-height:170%;
padding: 5px 10px 5px 10px;
}
/*コメントのステータス*/
.com_state{
font-size: 11px;
color: #777777;
border-bottom: 1px dashed #222222;
padding: 5px 10px 5px 10px;
}

/*コメント入力欄*/
.com_body{
font-size: 12px;
color: #777777;
padding: 10px 10px 10px 10px;
}
/*各フォームオブジェクト*/
input,textarea,submit{
font-size: 12px;
color: #777777;
border: 1px solid #222222;
}
/*コメント欄とURL欄*/
#description,#url{
width:250px;
}

/*トラックバックのタイトル*/
.tra_title {
font-size: 12px;
font-weight: bold;
color: #333333;
padding: 10px 10px 5px 10px;
border-bottom: 1px solid #222222;
}

/*トラックバック先URL*/
.tra_url_body {
	font-size: 12px;
	color: #777777;
	background-color:#ffffff;
	margin: 5px 10px 5px 10px;
}
/*トラックバックされたエントリーのタイトル*/
.tra_e_title{
	font-size: 11px;
	font-weight: bold;
	color: #333333;
padding: 5px 10px 5px 10px;
}
/*トラックバックされたエントリーの概要*/
.tra_e_body{
	font-size: 11px;
	color: #777777;
	line-height:170%;
padding: 5px 10px 5px 10px;
}
/*トラックバックされたエントリーのステータス*/
.tra_e_state{
	font-size: 11px;
	color: #777777;
	border-bottom: 1px dashed #222222;
padding: 5px 10px 5px 10px;
}

/*プロフィールのタイトル*/
.pro_title{
	font-size: 12px;
	font-weight: bold;
	color: #777777;
	border-bottom: 1px solid #222222;
padding: 5px 10px 5px 10px;
}
/*プロフィールの名前*/
.pro_name{
	font-size: 11px;
	font-weight: bold;
	color: #777777;
padding: 5px 10px 5px 10px;
}
/*プロフィール欄*/
.pro_body{
	font-size: 11px;
	color: #777777;
padding: 5px 10px 5px 10px;
}
/*RSS欄とページリンク欄*/
.rss,.pagenavi{
	font-size: 11px;
	color: #777777;
	padding-bottom:5px;
	margin-bottom:5px;
}
/*引用部*/
blockquote{
	padding: 5px 10px 5px 10px;
	border-left: 3px solid #cccccc;
}

/*================================-
各リストの設定
================================-*/
.list{
	display:none;
}
.list_title{
	font-size: 12px;
	text-align:right;
	font-weight: bold;
	color:#ffffff;
	background-color:#cccccc;
	padding: 8px 20px 8px 10px;
}
.list_text{
	font-size: 11px;
	color: #777777;
	text-align:left;
	padding: 5px 10px 5px 10px;
}

/*================================-
カレンダー
================================-*/

.calendar{
	text-align:right;
	padding: 5px 10px 5px 10px;
}

.calendar_month{
	font-size: 11px;
	text-align:center;
}

.weekday{
	font-size: 11px;
	text-align:center;
	padding: 2px;
}

.cell{
	font-size: 11px;
	text-align:center;
	padding: 2px;
}

/*================================-
ad
================================-*/

.links{
}
.linktext{
text-align:center;
	color: #777777;
	font-size: 11px;
}

.jugem{

margin: 10px 1px 10px 1px;
}

.pict {
background-color: #ffffff;
border-width: 1px;
margin: 5px 0px 4px 0px;
padding: 4px 4px 4px 4px;
border-style: solid;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
}

ul.navi {
font-size: 10px;
list-style: none;
margin: 5px 0px 0px 0px;
text-align: center;
}

ul.navi  li{
display:inline;
margin:0px 2px;
}

.top {
font-size: 11px;
margin: 0px 20px 5px 0px;
text-align: right;
}

html{
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
scrollbar-arrow-color: #777777;
scrollbar-track-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
}

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