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

ホーム

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

テンプレート名 : butterfly_race_tiara

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}" />
<script type="text/javascript" src="./template/js/cookie.js"></script>
</head>

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

</div>

<form method="get" action="">
<div  class="search">
Search this site.
</div>
<div class="search_box">
<input id="search" name="search" size="20" style="width:140px" style="filter:Alpha(opacity=50);border:1px solid #ff3399; background:#ffccff;" /><br />
<input type="submit" value="Search" style="filter:Alpha(opacity=50);border:1px solid #ff3399; color: #ff3399; background:#ffccff;" />
</div>
</form>

<center>
<img src="http://img.blog.kira-tiara.net/20090520_445718.gif" alt="" width="250" height="50" border="0" /><img src="http://img.blog.kira-tiara.net/20090520_445718.gif" alt="" width="250" height="50" border="0" /><br><br>

<div class="link_title" valign="top">Prifile</div>
<div class="link_text">
{user_list}
</div>

<div class="link_title">Category</div>
<div class="link_text">{category_list}</div>

<div class="link_title">Entry</div>
<div class="link_text" id="newentrylist">{latest_entry_list}</div>

<div class="link_title">Archives</div>
<div class="link_text">{archives_list}</div>

<div class="link_title">Comment List</div>
<div class="link_text" id="commentlist">{recent_comment_list}</div>

<div class="link_title">Trackback List</div>
<div class="link_text"><div id="tblist">{recent_trackback_list}</div>

<div class="amazon">
<div class="link_title">Recomend</div>

<a href="{amazon_url}" target="_blank" >
<img border="0" src="{amazon_ImageUrlSmall}" alt="{amazon_ProductName} {amazon_comment} " />
</a>
</div>

<div class="link_title">Links</div>
<div class="link_text"><div id="linklist">{link_list}</div>

</td>
<td valign="top" align="center" width="500">

<div class="a_title"><div class="entry_navi">
{prev_entry}  <a href="./">main</a>  {next_entry}
<http://img-cdn.jg.jugem.jp/dc9/376107/20071126_256428.gif">
</div></div>

<div class="entry">
<Table Border="0" Cellspacing="0" Cellpadding="0">
<Tr>
<Td Width="400" style="border-style:dotted;border-width:3px;border-color:#ff3399;" >
<center>

<div class="entry_title"><a href="{entry_permalink}">{entry_title}</a></div>
<img src="http://img.blog.kira-tiara.net/20090520_445770.gif" alt="" width="300" height="40">
<div class="entry_date"> {entry_date} {entry_time} </div>
<div class="entry_body">{entry_description}</div>
<a name="sequel"></a>
<div class="entry_more">
{entry_sequel}
</div>
<div class="entry_state">
{category_name} /  {comment_num} / {trackback_num}</div>
<div class="entry_author" style="text-align:right;">Posted by : {user_name} </div>
{trackback_auto_discovery}
</center></Td></tr>
</Table>
</div>

<a name="comments"></a>
<div class="coment">
<div class="com_title"> Comments </div>
<img src="http://img.blog.kira-tiara.net/20090520_445770.gif" alt="" width="300" height="40">

<div class="com_body">{comment_description}</div>
<div class="com_state"> {comment_name} <br>
 {comment_time} </div>

</div>

<div class="com">
<div class="com_title">CommentForm</div>
<img src="http://img.blog.kira-tiara.net/20090520_445770.gif" alt="" width="300" height="40"><br>
公序良俗に反するコメントや記事に関係のないコメントは<br>
絶対禁止です！管理者承認機能適用中！<br>
<div class="com_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}" style="width:250px;filter:Alpha(opacity=50);" /><br />
<label for="email">MAIL</label><br />
<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" style="width:250px;" /><br />
<label for="url">URL</label><br />
<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" style="width:250px;filter:Alpha(opacity=50);"/><br />
<label for="description">Comments</label><br />
<textarea tabindex="4" id="description" name="description" rows="7" cols="20" style="width:370px;"></textarea>
<br />
<br />
<input tabindex="5" type="submit" value=" Push! " onclick="javascript:setval(); " style="border:1px solid #ff3399; color: #ff3399;background:#ffffff;" />
<input type="checkbox" name="set_cookie" value="1" id="set_cookie">
<label for="set_cookie">Cookie</label>
</form>
</div>
<br>
</div>

<a name="trackback"></a>
<div class="tb">
<div class="com_title">TrackbackURL</div>
<img src="http://img.blog.kira-tiara.net/20090520_445770.gif" alt="" width="300" height="40">
<div class="tb_url">{trackback_url}</div>
　公序良俗に反するトラバは絶対禁止です！
</div>

<div class="tb">
<div class="com_title">Trackbacks</div>
<img src="http://img.blog.kira-tiara.net/20090520_445770.gif" alt="" width="300" height="40">

<div class="tb_title">{trackback_title}</div>
<div class="tb_body">{trackback_excerpt}</div>
<div class="tb_state"> {trackback_blog_name} <br>
 {trackback_time} </div>

</div>

<Table Border="0" Cellspacing="0" Cellpadding="0">
<Tr>
<Td Width="400" style="border-style:dotted;border-color:#ff3399;border-width:3px;">
<center>
<div class="pro_title"><b>Profile</b></div>
<img src="http://img.blog.kira-tiara.net/20090520_445770.gif" alt="" width="300" height="40">
<div class="pro_body">{profile_description}</div>
</center></Td>
</Tr>
</Table>

<div class="page">{prev_page_link}  {page_now}/{page_num}Pages  {next_page_link}</div>

<a href="http://blog.kira-tiara.net/" target="_blank">Template by eternal</a><br>
<a href="http://kira-tiara.net" target="_blank">material by kirakira tiara</a>
<div class="copyright">{copyright}<br />
<div align="right"><a href="#top">↑Page Top</a><br /></div>
</div><br>

</div>

</td>
<td valign="top" align="center" width="190">

<div class="r_link-title">CALENDAR</div>
<div class="calendar">
<table border="0" cellspacing="2" cellpadding="3" width="156">
<tr>
<td class="weekday"><font color=#ff00d4>S</font></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="r_link-title"valign="top" >{freespace_title1}</div>
<div class="r_link-text">{freespace_contents1}</div>

<div class="r_link-title" valign="top">{freespace_title2}</div>
<div class="r_link-text">{freespace_contents2}</div>

<div class="r_link-title"valign="top" >{freespace_title3}</div>
<div class="r_link-text">{freespace_contents3}</div>

<div class="r_link-title" valign="top">{freespace_title4}</div>
<div class="r_link-text">{freespace_contents4}</div>

<div class="r_link-title"valign="top" >{freespace_title5}</div>
<div class="r_link-text">{freespace_contents5}</div>

<div class="r_link-title">Other</div>
<div class="r_link-text">
<a href="./admin/" target="_blank">Admin</a><br>
<a href="./?mode=rss">RSS1.0</a><br>
<a href="./?mode=atom">ATOM0.3</a><br>
template by <a href="http://blog.kira-tiara.net/">ETERNAL</a><br>
material by <a href="http://kira-tiara.net/">kirakira tiara</a><br><br>
<a href="http://jugem.jp/" target="_blank"><img src="../template/banner/powered_04b.gif" width="128" height="22" alt="みんなのブログポータル JUGEM" border="0" /></a><br><br>
{site_qrcode}
</div>

</td>
</tr>
</tbody>
</table>
</div>

<script type="text/javascript">

</script>
</body>
</html>

CSS

* {
	margin: 0;
	padding: 0;
}

ul {
margin: 0px 0px 0px 10px;
padding: 5px;
list-style: disc;
}

/* スクロールバー */
html {
scrollbar-3dlight-color:#ffffff;
scrollbar-arrow-color:#ff3399;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ff3399;
scrollbar-shadow-color:#ff3399;
scrollbar-track-color:#ffffff;
}

/* ボディ */
body {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
color: #ff3399;
line-height: 150%;
background-color : #ffffff; 
}

BR{letter-spacing:normal;}

input, textarea {
font-family: Verdana, "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", Osaka‐等幅;
font-size: 10px;
color : #ff3399;
border : solid 1px #ff3399;
filter:Alpha(opacity=50);
}

form {
font-family: Verdana, "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", Osaka‐等幅;
font-size: 10px;
color : #ff3399;
padding: 0px;
margin: 0px;
filter:Alpha(opacity=50);
}

blockquote {
font-size: 10px;
font-family: Verdana, "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", Osaka‐等幅;
padding: 5px;
margin: 5px;
border: 1px solid #ff3399;
}

.a_title{
width: 400px;
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
color: #ff3399;
margin: 5px 0px 5px 5px;
padding: 0px;
font-weight : bold;
}

.pict {
padding: 4px;
margin : 2px 2px 2px 2px;
border: 1px solid #ff3399;
}

/* リンク */
a:{color:#cc00ff; text-decoration:none;}
a:link {color:#cc00ff; text-decoration:none;}
a:visited {color:#cc00ff; text-decoration:none;}
a:active {color:#cc00ff; text-decoration:none;}
a:hover {color:#cc00ff; text-decoration:none;
position:relative;top:2px;left:2px;
}

/* タイトル画 */
#wrapper {
background-image : url(http://img.blog.kira-tiara.net/20090525_446957.jpg);
background-attachment : fixed;
background-repeat : no-repeat;
background-position : 50% 0;
width :100%;
height : 200px;
margin-top : 20px;
text-align: center;
border : 1;
}

/* メイン画 */
#main {
background-color : #ffffff;
text-align: center;
}

/* サイトタイトル */

h1 {
font-family: Verdana, "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", Osaka‐等幅;
font-size: 18px;
margin-top: 30px;
}

.site_title {
margin: 20px 0px 0px 0px;
padding-top : 20px;
padding-bottom : 20px;
text-align :center;
}

.site_title a,
.site_title a:link,
.site_title a:visited,
.site_title a:active,
.site_title a:hover {
font-weight: bold;
color: #cc00ff;
font-family: Verdana, "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", Osaka‐等幅;
text-decoration: none;
}

.description {
font-weight: normal;
color: #ffffff;
font-family: Verdana, "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", Osaka‐等幅;
letter-spacing : 1px;
text-align : center;
margin: 0px 0px 0px 0px;
padding: 10px 0px 20px 0px;
}

/* サーチ */
.search {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
color: #ff3399;
line-height: 170%;
text-align : right;
margin: 0px 10px 5px 20px;
}

.search_box {
text-align : right;
margin: 0px 10px 5px 20px;
}

/* カレンダー */

.calendar {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";"Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
color: #ff00d4;
line-height: 135%;
background: #ffffff;
margin: 0px 0px 5px 10px;
padding: 3px 0px 10px 0px;
}

.cell {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
margin: 0px 0px 5px 10px;
width: 19px;
height: 12px;
padding: 1px;
letter-spacing : 1pt;
color: #ff00d4; 
font-size: 9px;
text-align: center; 
background: #ffffff;
}

.cell a { text-decoration: none; display: block; }
.cell a:link { color: #ffccff; }
.cell a:visited { color: #ffccff; }
.cell a:active { color: #ffccff; }
.cell a:hover { color: #ffccff; }

.weekday {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
text-align: center;
width: 19px;
height: 12px;
padding: 1px;
}

/* サイド左 */
.link_title{
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 12px;
font-weight : bold;
text-align: left; 
color: #ff3399;
background-image : url(http://img.blog.kira-tiara.net/20090520_445729.gif);
background-attachment : fixed;
background-repeat : no-repeat;
height : 0px;
padding-top : 0px;
padding-left : 24px;
margin-bottom : 10px;
}

.link_text{
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
text-align: left; 
color: #ff3399;
margin-top : 10px;
margin-bottom : 10px;
}

li{
list-style-type: none;
background-image: url(http://img.blog.kira-tiara.net/20090520_445781.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding: 1px 0px 1px 10px;
margin: 0px 0px 0px 0px;
}

ul{
list-style-type: none;
margin:0px 0px 0px 0px;
padding-left : 0px;
}

/* アマゾン */
.amazon{
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size:10px;
padding: 10px 0px;
margin-top : 10px;
margin-bottom : 10px;
text-align: center;
}

/* ナビゲーション */
.entry_navi {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
margin: 0px 0px 0px 0px;
padding: 0px;
text-align:center;
color: #ff3399;
}

/* エントリー */
.entry {
width: 500px;
margin: 20px 0px 20px 0px;
}

.entry_title {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 12px;
margin: 0px 10px 0px 0px;
padding: 0px 0px 0px 25px;
text-align: left;
line-height: 160%;
font-weight : bold;
}

.entry_title a,
.entry_title a:link,
.entry_title a:visited,
.entry_title a:active {
color: #ff3399;
}
.entry_title a:hover {
color: #ff3399;
}

.entry_date {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
text-align: right;
margin: 0px 0px 0px 0px;
padding: 5px 25px 5px 5px;
}

.entry_body {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
line-height: 160%;
margin: 5px 5px 10px 10px;
padding-left : 25px;
padding-right : 25px;
text-align : left;
}

.entry_more {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
line-height: 160%;
margin: 5px 5px 10px 10px;
}

.entry_body a:link,
.entry_body a:visited { text-decoration: none; color: #ff3399; }
.entry_body a:hover{color: #cc99ff;}
.entry_body a:active{color: #ff3399;}

.entry_more a:link {
text-decoration: none;
color: #ff3399;
font-weight: bold; font-size: 10px;
}
.entry_more a:visited {
text-decoration: none;
color: #ff3399;
font-weight: bold;
font-size: 10px;
}
.entry_more a:hover
{
color: #ff3399;
font-weight: bold;
font-size: 10px;
}
.entry_more a:active
{
text-decoration: none;
color: #ff3399;
font-weight: bold;
font-size: 10px;
}

.entry_state {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
text-align: right;
margin: 0px 0px 10px 0px;
padding: 5px 25px 5px 5px;
color: #CC00FF;
}

.entry_author {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
color: #ff3399;
margin: 5px 25px 5px 5px;
}

/* コメント */
.coment {
width: 400px;
margin: 5px 0px 20px 20px;
padding: 11px;
}

.com_title{
width: 400px;
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 11px;
color: #ff3399;
margin: 5px 0px 5px 5px;
padding: 0px;
font-weight : bold;
}

.com_form {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
line-height: 150%;
margin: 5px 0px 10px 10px;
padding: 0px;
}

.com_body {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
line-height: 160%;
margin: 5px 5px 5px 5px;
padding: 5px 5px 0px 10px;
text-align : left;
}

.com_state {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
text-align: right;
margin: 0px 0px 10px 0px;
padding: 5px 0px 0px 0px;
color: #ff3399;
}

/* トラックバック */
.tb_url {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
margin: 5px 0px 10px 10px;
padding: 0px;
}

.tb {
width: 400px;
margin: 5px 0px 20px 20px;
padding: 10px;
}

.tb_title {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
font-weight: bold;
margin: 5px 5px 5px 5px;
padding: 5px 5px 0px 10px;
}

.tb_body {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
color : #ff3399;
line-height: 160%;
margin: 5px 5px 5px 5px;
padding: 5px 5px 0px 10px;
text-align : left;
}

.tb_state {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
text-align: right;
margin: 0px 0px 10px 0px;
padding: 5px 0px 0px 0px;
color: #ff3399;
}

/* プロフィール */
.pro_title {
font-family: Verdana, "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", Osaka‐等幅;
color: #ff3399;
font-size: 11px;
font-weight:bolder;
margin: 0px 0px 10px 10px;
text-align : center;
}

.pro_body {
font-size: 10px;
line-height: 150%;
font-family: Verdana, "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", Osaka‐等幅;
margin: 0px 5px 5px 15px;
padding: 0px 5px 5px 25px;
text-align : left;
}

/* サイド右 */
.r_link-title{
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 12px;
font-weight : bold;
text-align: left; 
color: #ff3399;
background-image : url(http://img.blog.kira-tiara.net/20090520_445729.gif);
background-attachment : fixed;
background-repeat : no-repeat;
height : 15px;
padding-top : 0px;
padding-left : 24px;
margin-bottom : 10px;
}

.r_link-text{
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
text-align: center; 
color: #ff3399;
margin-top : 10px;
margin-bottom : 10px;
}

/* ページ */
.page {
font-size: 10px;
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
color: #ff3399;
padding: 11px;
margin: 0px 0px 10px 10px;
text-align: center;
}

.copyright {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size :10px;
color : #ff3399;
margin: 0px 0px 0px 0px;
padding: 10px 20px 0px 0px;
text-align:center;
width: 80%;
}

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