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

ホーム

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

テンプレート名 : シンプルW

HTML・CSSをコピーして使う

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>:: {site_title} :: {entry_title}</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK rel="stylesheet" href="{site_css}" type="text/css">
<LINK rel="alternate" type="application/rss+xml" title="RSS" href="{site_rss}">
<LINK rel="alternate" type="application/atom+xml" href="{site_atom}">
</HEAD>
<BODY>
<DIV id="header">
<H1 id="site_title">
<A href="ここにトップへのURL">

<IMG src="http://images1.jugem.jp/image.php?host=lance.jugem.cc&image=54" width="300" height="50" border="0" alt="タイトル画像"></A></H1>
<DIV class="description">{blog_description}</DIV>

<FORM method="get" action="">
<DIV class="search"><INPUT id="search" name="search" size="20" style="width:130px" class="form"> <INPUT type="submit" value="Search" class="button"></DIV>
</FORM>
</DIV>

<DIV id="calendar" title="カレンダー">
<DIV class="calendar_table">{calendar_horizontal}</DIV>
</DIV>

<DIV id="main">
<DIV id="contents">
<DIV class="entry_navi">{prev_entry} | <A href="./">メイン</A> | {next_entry}</DIV>

<DIV class="entry">
<H2 class="entry_title">{entry_title}</H2>
<DIV class="entry_date">{entry_date}</DIV>
<DIV class="entry_body">{entry_description}</DIV>
<A name="sequel"></A>
<DIV class="entry_more">{entry_sequel}</DIV>
<DIV class="entry_state">{user_name} * {category_name} * {entry_time} * {comment_num} * {trackback_num}<BR>
{trackback_auto_discovery}</DIV>
</DIV>
<A name="comments"></A>
<DIV class="entry">
<H2 class="entry_title">コメント</H2>

<DIV class="entry_body">{comment_description}</DIV>
<DIV class="entry_state">Comment by {comment_name} @ {comment_time}</DIV>

<DIV class="entry_body">コメントする<BR>
<FORM action="./?mode=comment" method="post"><INPUT type="hidden" name="entry_id" value="{entry_id}" class="write"><LABEL for="name">name:</LABEL><BR>
<INPUT type="text" tabindex="1" name="name" id="name" value="{cookie_name}" class="write"><BR>
<LABEL for="email">email:</LABEL><BR>
<INPUT type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="write"><BR>
<LABEL for="url">url:</LABEL><BR>
<INPUT type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="write"><BR>
<LABEL for="description">comments:</LABEL><BR>
<TEXTAREA tabindex="4" id="description" name="description" rows="10" cols="50" style="width:400px;"></TEXTAREA><BR>
<BR>
<INPUT type="submit" value="コメント送信" class="button"> <INPUT type="checkbox" name="set_cookie" value="1" id="set_cookie"> <LABEL for="set_cookie">Cookieに登録</LABEL></FORM>
</DIV>
</DIV>
<A name="trackback"></A>
<DIV class="entry">
<H2 class="entry_title">トラックバック</H2>
<DIV class="entry_date">この記事のトラックバックURL:<BR>
{trackback_url}</DIV>

<H3 class="entry_title">{trackback_title}</H3>
<DIV class="entry_body">{trackback_excerpt}</DIV>
<DIV class="entry_state">From {trackback_blog_name} @ {trackback_time}</DIV>
</DIV>

<DIV class="entry">
<H2 class="entry_title">プロフィール</H2>
<H3 class="entry_title">{profile_name}</H3>
<DIV class="entry_body">{profile_description}</DIV>
</DIV>
</DIV>

<DIV id="menu">
<DIV class="linktitle" title="オススメ">RECOMMEND</DIV>
<DIV class="linktext">{amazon_item}</DIV>

<DIV class="linktitle" title="最新エントリー">New Entries</DIV>
<DIV class="linktext">{selected_entry_list}</DIV>

<DIV class="linktitle" title="最新コメント">Recent Comments</DIV>
<DIV class="linktext" id="comments">{recent_comment_list}</DIV>

<DIV class="linktitle" title="最新トラックバック">Recent Trackbacks</DIV>
<DIV class="linktext" id="trackbacks">{recent_trackback_list}</DIV>

<DIV class="linktitle" title="カテゴリー">Categories</DIV>
<DIV class="linktext" id="categories">{category_list}</DIV>

<DIV class="linktitle" title="月別アーカイブ">Archives</DIV>
<DIV class="linktext" id="archives">{archives_list}</DIV>

<DIV class="linktitle" title="リンク">Links</DIV>
<DIV class="linktext" id="links">{link_list}</DIV>

<HR>

<DIV class="linktext">
<UL>
  <LI><A href="./admin/">管理者のページ</A>
  <LI><A href="./?mode=rss">RSS1.0</A>
  <LI><A href="./?mode=atom">Atom0.3</A>
  <LI><A href="https://jugem.jp/" title="ブログのレンタルならJUGEM（じゅげむ）">Powered by &quot;JUGEM&quot;</A>
  <LI><a href="http://www.pagerank.net/" title="PageRank" target="_blank"><img src="http://www.pagerank.net/pagerank.gif" alt="PageRank" style="border: 0;"></a>

</UL>
</DIV>
{ad}</DIV>
<A href="#header"><IMG src="http://images1.jugem.jp/image.php?host=lance.jugem.jp&image=31" width="73" height="12" class="totop" alt="このページの先頭へ"></A> <BR class="clear">
</DIV>

<DIV id="copyright">{copyright}</DIV>
</BODY>
</HTML>

CSS

/*-- 全体的なルール --*/
BODY {
	margin: 0; padding: 0;
	
	font-family: Verdana, "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅", sans-serif;
	background-repeat : no-repeat;
	text-align: center;

}

div, span, form, h1, h2, h3, h4 {
	margin: 0;
	padding: 0
	;}

A { text-decoration : underline;}
A:LINK { color:#915a47; 
text-decoration : none;
}
A:VISITED {  
text-decoration : underline;
}
A:ACTIVE { color:#262626; 
cursor : pointer;
}
A:HOVER { color:#262626; 
cursor : crosshair;
}

hr { 
	border-top: 1px dashed #999;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	color: #D8EAF0;
	margin: 0 5px;
}

/*-- レイアウト--*/
#header {
	text-align: left;
	width: 800px;
	height: 150px;
	background : url() no-repeat center bottom;
	
	margin: 0 auto;
}

H1#site_title {
	text-align: left;
	font-size : 150%;
	font-weight : bolder;
	
	margin: 0; padding: 45px 0 0 40px;
	text-align: left;
	font-family: palatino, georgia, "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅", sans-serif;

}

.description {
	text-align: left;
	font-size: 75%;
	font-weight: bold;
	color: #666;
	margin: 0; padding: 0 0 20px 40px;
	font-family: palatino, georgia, "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅", sans-serif;
}

#site_title A,
#site_title A:LINK,
#site_title A:VISITED,
#site_title A:ACTIVE,
#site_title A:HOVER {
	
	text-decoration:none;
font-weight : bold;
color : black;
}

#main {
	text-align: left;
	margin: 0 auto; width: 750px;

}

#contents { 
	float: left;
	width: 550px;
}

#menu { margin: 0;
	padding: 0;
	float: none;
	width: 200px;
	float: right;
	text-align: left;
}
/*-- コンテンツ部分 --*/
.entry_navi {
	width: 550px;
	text-align:center;
	font-size: 75%;
	margin: 15px 0 0 0;
}

.entry {
	width: 550px;
}

H2.entry_title {
	font-size: 90%;
	font-weight: bold;
	color: #006d73;
	margin: 15px 30px 0 30px;
	border-bottom : 1px ridge #e6e6e6;
	padding-bottom: 3px;
}

h3.entry_title {
	font-size: 75%;
	font-weight: bold;
	color: #666;
	margin: 15px 30px 0 30px;
	text-align: left;
	padding: 0;
}

.entry_date {
	font-family: Verdana, sans-serif;
	font-size: 70%;
	color: #666;
	margin: 2px 30px 10px 30px;
}

.entry_body {
	font-size: 75%;
	line-height: 1.7;
	color: #333;
	margin: 10px 30px 10px 30px;
	}

.entry_more {
	font-size: 75%;
	line-height: 1.7;
	color: #333;
	margin: 20px 30px 10px 30px;
}

.entry_state {
	font-size: 65%;
	color: #666;
	margin: 10px 30px 0 30px;
	text-align: left;
	clear: left;
	background : url(http://images1.jugem.jp/image.php?host=lance.jugem.jp&image=33) no-repeat center bottom;
	padding: 0 0 12px 0;
}

blockquote {
	font-size: 100%;
	margin: 20px 10px 0 20px;
	padding: 6px;
	border-top: #E3E3E3 solid 2px;
	border-right-width: 0;
	border-bottom: #E3E3E3 solid 2px;
	border-left-width: 0;
	background-color: #E6F1F5; 
}

ul,ol {
	margin: 0;
	padding: 0;
	}

UL LI { 
	list-style-image : url(http://images1.jugem.jp/image.php?host=lance.jugem.jp&image=30);
	margin: 0 10px 0 25px; padding: 0;
	line-height: 1.5;
}

ol li { 
	margin: 0 10px 0 35px; padding: 0;
	line-height: 1.5;
}

.pict { 
	border: 5px double #D8EAED;
	float: left;
	margin: 0 8px 5px 0;
	padding: 0; 
}

IMG.totop { 
	border-width: 0;
	margin: 0 0 0 460px;
	padding: 0;

}

.clear {
	clear: both;
	height: 1px;
}

/*-- フォーム --*/
#main input.write, #main textarea { 
	border: 1px solid #E6E6E6; 
	padding: 1px;
	color: #333;
}

.button {
	background-color: #E6E6E6;
	background-repeat: no-repeat;
	border-top : 1px ridge #ffffff;
	border-right : 1px ridge #ffffff; 
	border-bottom : 1px ridge #ffffff;
	border-left : 1px ridge #ffffff;
	font-family : Georgia,sans-serif,"Comic Sans MS";
	color: #666;
}

/*-- 検索 -- */
.search {
	font-size: 60%;
	color: #666;
	padding: 0 0 1px 570px;
}

/*-- メニュー --*/
#menu ul {
	margin: 0;
	padding: 0;
	}

#menu ul li { 
	border-bottom: 1px dashed #AFD2DE;
	list-style-image : url(http://images1.jugem.jp/image.php?host=lance.jugem.jp&image=30);
	margin: 0 10px 0 25px;
	padding: 2px;
	line-height: 1.35;
}

.linktext {
	font-size: 65%;
	color: #666;
	margin: 0 0 5px 0;
}

.linktitle {
	background : url(http://images1.jugem.jp/image.php?host=lance.jugem.jp&image=48) no-repeat;
	font-size: 65%;
	font-weight: bold;
	text-align: center;
	width: 200px;
	height: 20px;
	margin: 0 0 0 0px;
	padding: 3px 0px 0px 0px;
}

.linktext .amazon {
	margin: 10px;
	text-align:center;
}

/*-- フッター --*/
#copyright {
	font-size: 70%;
	line-height: 1.3;
	text-align: center;
	padding: 5px 0;
	margin: 5px auto 0 auto;   
	clear: both;
	color: #FFF;
	background-color: #969696;
	width: 752px;
}

#copyright a:link, #copyright a:visited, #copyright a:active { 
	color:#FFF; 
	text-decoration:none; 
	font-weight: bold;
}

#copyright a:hover { color:#EFEFEF;
	text-decoration: underline;
}

/*-- 時計 --*/
.clock {
	margin: 0px 0px 0px 1px;
}

/*-- カレンダー --*/
#calendar {
	width : 780px;
	margin: 0 auto;
	background-color : white;
	color: #333;
	padding: 4px 0;
}

#calendar A, .calendar_month { 
	font-weight: bold; 
	text-decoration: none; 
}

.calendar_table {
	text-align: center;
	font-size: 11px;
	color: #333; margin: 0; padding: 0;
}

.cell, .today, .calendar_month { 
	font-size: 11px;
	font-family: Verdana, sans-serif;
}

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