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

ホーム

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

テンプレート名 : elemental

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" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>{site_title}</title>
<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>
<a name="top"></a>

<div id="title">
<h1 class="site_title"><a href="./">Elemental</a></h1>
<div class="description">Bare-Bone for Customising</div>

</div>

<div id="bar"> 
<div class="calender">{calendar_horizontal}</div>
</div>

<div class="linktitle">AMAZON</div>
<div class="linktext">{amazon_item}</div>

<div class="linktitle">ENTRIES</div>
<div class="linktext">{selected_entry_list}</div>

<div class="linktitle">COMMENTS</div>
<div class="linktext">{recent_comment_list}</div>

<div class="linktitle">TRACKBACKS</div>
<div class="linktext">{recent_trackback_list}</div>

<div class="linktitle">CATEGORIES</div>
<div class="linktext">{category_list}</div>

<div class="linktitle">ARCHIVES</div>
<div class="linktext">{archives_list}</div>

<div class="linktitle">LINKS</div>
<div class="linktext">{link_list}</div>

<div class="linktitle">PROFILE</div>
<div class="linktext">{user_list}</div>

<div class="linktitle">Others</div>
<div class="linktext"><ul>
<li><a href="./admin/">管理者ページ</a></li>
<li><a href="./?mode=rss">RSS1.0</a></li>
<li><a href="./?mode=atom">Atom0.3</a></li>
<li><a href="https://jugem.jp/" title="ブログのレンタルならJUGEM（じゅげむ）">Powered by "JUGEM"</a></li>
</ul></div>

</div>

<div class="linktitle">
NEW　{prev_page_link}page{page_now}/{page_num}{next_page_link}　OLD
</div>

<div class="linktitle">
{prev_entry}<a href="#" OnClick="history.go(-2);return false" title=" 参照履歴を戻る ">-[U]-</a>{next_entry} 
</div>

<div class="entry">
<div class="entry_title">
<div class="entry_date">{entry_date}</div>
{entry_title}</div>
<div class="entry_body">{entry_description}</div>
<div class="entry_more">{entry_sequel}</div>
<div class="entry_state">
{user_name} | {category_name} | {entry_time} | {comment_num} | {trackback_num} </div>
{trackback_auto_discovery}
</div>

<a name="comments"></a>
<div class="cmtb">
<div class="cmtb_title">COMMENT</div>
<div align="center">

<form action="./?mode=comment" method="post">
<input type="hidden" name="entry_id" value="{entry_id}" />
name:<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" size="10"/>
email:<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" size="16"/>
url:<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" size="25"/><br />
<textarea tabindex="4" id="description" name="description" rows="8" cols="40" style="width:400px"></textarea>
<input type="submit" value="Send COMMENT" />
<input type="checkbox" name="set_cookie" value="1" id="set_cookie">
Cookie ON
</form></div>

<div class="cmt"> {comment_name}_{comment_time}</div>
<div class="cmt_txt">{comment_description}</div>

</div>

<a name="trackback"></a>
<div class="cmtb">
<div class="cmtb_title">TRACKBACK</div>
<div class="entry_title">【URL】{trackback_url}</div>

<div class="cmt">
{trackback_title}　({trackback_blog_name} | {trackback_time})
</div>
<div class="cmt_txt">{trackback_excerpt}</div>

</div>

<div class="entry">
<div class="entry_title">{profile_name} のprofile</div>
<div class="entry_body">{profile_description}</div>
</div>

</div><br style="clear:both;"><div style="width:600px">.</div>
</div>
</div>

<div id="low">
<div class="copyright">
Copyright (C) 2004 <a href="http://paperboy.co.jp" target="_blank" title="paperboy&amp;co.">paperboy&amp;co.</a> All Rights Reserved.
　　　　<a href="#top" >Back to TOP ▲</a>
</div></div>

</body></html>

CSS

body {margin: 0px; font-family: "Verdana"; font-size:12px; color:#335;} 
  /*　基本設定　*/

a{text-decoration:none;}   /*　リンク色の設定　*/
a:link {color:#278;}
a:visited {color:#278;}
a:active {color:#d2d; text-decoration:none;}
a:hover {color:#e00; text-decoration:underline;}

form {margin:24px 0px 0px}
h1 {margin: 0px 0px 6px 0px}
ul {list-style-type:none;  margin:0px}

.site_title  { font-weight: bolder;}   /*　タイトル文字　*/
.site_title a:link{color:#267}
.site_title a:visited{color:#267}
.site_title a:active{color:#e00}
.site_title a:hover {color:#c00; text-decoration:none;}
.description {font-size: 12px; font-weight: bolder; color: #000;
	 margin: 0px;}

#title{width:98%; position:absolute; top:24px;text-align:center; }    /*　タイトル領域　*/

#top{ height:100px;  margin:auto;  background:transparent url();}    /*　上部領域　*/

#bar{margin:auto;   padding:3px; 
      font-size:12px;  color:#aaa;  text-align:center;
      border-style:solid none;  border-width:2px;
      border-color:#667;}    /*　横Bar領域（calender収納部）　*/

#mid{ width:99%; margin:auto;  padding:30px 0px;    text-align:center; 
     background:transparent url();}    /*　中央（主要）領域　*/

#low {margin:auto;  padding:9px 0px 5px;
      text-align:center;  border-top:solid 2px #999;
      background:transparent url() ; }    /*　下部領域　*/

#both {width:700px;  text-align:left; margin:auto;}   /*　カラム収納領域　*/
#main {width:490px;  overflow:auto;  }   /*　記事カラム（領域）　*/
#side {width:180px;  margin:0px;  float:right; }   /*　サイドバー領域　*/
.calender{ margin:0px; width:700px; text-align:center;}
.calender a{ font-weight:bolder}
.calender a:hover {color:#eee; background-color:#709;}

.entry { margin:0px 0px 20px;   padding:0px 16px 5px;
         text-align:left;
         border-style:double;  border-color:#bbb; 
         background:transparent url() ;}   /*　記事領域　*/

.entry_date {float:left;}   /*　記事の日付　*/

.entry_title {font-size:14px; font-weight:bolder;  color:#447;
	text-align:center;  margin:9px 0px 9px}   /*　記事タイトル　*/

.entry_body {font-size:14px;line-height: 160%;
	    margin:0px 0px 16px; padding:16px 9px;
             border-top: 1px solid #ccd; }   /*　記事本文　*/

.entry_more {font-size: 14px; line-height: 160%; 
             margin: 16px 0px 30px;}   /*　記事の続き部分　*/

.entry_state {font-size: 10px;  color:#999; text-align:center; 
              font-family: "Verdana";  margin: 9px;}   /*　細部事項　*/

.cmtb { margin:20px 0px; padding:0px 9px 16px;
　　　  text-align:left;  border: solid 1px #449;
        background:transparent url() ;}   /*　コメント,トラックバック領域　*/

.cmtb_title { font-size:14px; font-weight:bolder;
             text-align:center; border-bottom: solid 1px #449;
             padding:4px; margin: 0px 0px 16px}   /*　領域タイトル　*/

.cmt {font-size: 12px; color: #607;  font-weight:bolder; 
      margin:24px 0px 9px 40px }   /*　領域小題　*/

.cmt_txt {line-height:120%; margin:12px 0px 9px 20px }   /*　コメントＴＢ記事　*/

.navi { font-weight:bolder; margin:0px; text-align:center;
         width:440px; padding: 2px;
         margin:0px 0px 12px 0px;     border-style:solid;
         border-width:1px; border-color:#bbb;
         background:#eee url() }   /*　ナビゲーション部分　*/

blockquote {font-size: 12px;  color: #555;  padding: 10px;
	   font-family: "Verdana";   margin:20px 10% 20px 20px;
            border: 1px dotted #bbb;}   /*　引用部分　*/

.pict {	border-width: 0px;}   /*　画像表示用クラス（未使用で可）　*/

.linktitle {font-weight:bolder;  text-align:center;
            padding: 2px;  margin:0px 0px 12px 0px;
            border-style:solid;  border-width:1px;
            border-color:#bbb;
            background:#eee url(); }   /*　サイドバー部小題　*/
.linktext { width:160px;  margin: 0px 0px 20px 20px;   padding:0px
            line-height:120%;  text-align:left;  }   /*　サイドバーリスト　*/

.search { margin:50px 0px; text-align:center; }

.amazon{	padding-left:20px;}

.copyright {font-size:11px;  color:#333;  line-height:170%;}

/*　－－－－－－－－－　各プロパテイの簡単な解説　－－－－－－－－－

margin 領域の外側に確保する空白　　padding 内側に確保される余白
　width 領域の幅　　height 領域の高さ　
　color 　　　　文字の色 
　font-size　　 文字のサイズ
　font-family   フォントの種類
　font-weight　 文字の太さ 
　text-align 　 文字の（左left　中央center　右right揃え）
　line-height　 一行の高さ
　background:★ url(☆)　　(背景色★で　背景画像に☆を使用するの意)
　border-color  領域枠線の色
　border-width  枠線の太さ
　border-style  枠線のスタイル　　
（ＣＳＳに関する詳細は　書籍・関連サイトを御参照下さい）　*/

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