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

ホーム

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

テンプレート名 : のんびり

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"  xml:lang="ja">
<head>

<title>{site_title}</title>
  
  <meta name="description" content="" />
  <meta name="keywords" content="" />

</head>

<body>

<h1>{blog_name}</h1>
    <p>{blog_description}</p>
    
    
  </div></div>

<p class="navi">{prev_entry} | <a href="../.">main</a> | {next_entry} </p>
      
      
      
      <p class="navi">{prev_page_link} | {page_now}/{page_num}ページ | {next_page_link}</p>
      
      
      
      <div class="entry">

<div class="title">
          <p class="day">{entry_date}</p>  
          <h2><a href="{entry_permalink}">{entry_title}</a></h2>
        </div>
          
        <div class="entry_body">{entry_description}</div>
                  
        <a name="sequel" id="sequel"></a>
                  
        <p class="entry_more">{entry_sequel}</p>
            
        <div class="entry_state">{trackback_auto_discovery}</div>
              
        <p class="entry_link">{category_name} | {entry_time} | {comment_num} | {trackback_num}</p>
      
        <p class="pagetop1"><a href="#" onclick="top(); return false">▲</a></p>
  
      </div>
      
          
      
      <a name="comments" id="comments"></a>
                
      
      <div class="comment">{comment_description}</div>
      <div class="commentLink"> {comment_name} | {comment_time} </div>

<div class="form1">
        <form action="./?mode=comment" method="post">
          <input type="hidden" name="entry_id" value="{entry_id}" />
          <p class="font1">name</p>
          <p class="input1"><input type="text" tabindex="1" name="name" value="{cookie_name}" /></p>
          <p class="font1">e-mail</p>
          <p class="input2"><input type="text" tabindex="2" name="email" value="{cookie_email}" /></p>
          <p class="font1">url</p>
          <p class="input2"><input type="text" tabindex="3" name="url" value="{cookie_url}" /></p>
          <p class="font1">comments</p>
          <p id="text"><textarea tabindex="4" name="description"></textarea></p>
          <p id="submit"><input type="image" value="submit" src="http://www.ai-mana.com/img/blog/submit.gif" width="54" height="22" alt="送信" /></p>
          <p id="cookie"><input type="checkbox" name="set_cookie" value="1" id="set_cookie"><label for="set_cookie" class="f1">cookie</label></p>
        </form>
      </div>
      
              
      
      <a name="trackback" id="trackback"></a>
          
      <p class="font1">trackback url</p>
      <p class="input3"><input name="text" type="text" value="{trackback_url}" /></p>
      <p class="pagetop1"><a href="#" onclick="top(); return false">▲</a></p>

<p class="font1">trackback</p>
      <p class="trackback_title">{trackback_title}</p>
      <div class="entry_body">{trackback_excerpt}</div>
      <p class="trackbackLink">{trackback_blog_name} | {trackback_time} </p>
      
          
      
      
      <p class="font1">profile</p>
      <p class="trackback_title">{profile_name}</p>
      <div class="entry_body">{profile_description}</div>

</div></div>
    
    <div id="left"><div id="m1">

<p class="h"><img src="http://www.ai-mana.com/img/blog/m1_calendar.gif" alt="カレンダー" width="76" height="16" /></p>
      
      <div id="calendar">
        
        <table border="0" cellspacing="1" cellpadding="0" id="calendarT">
         <tr>
           <td class="cell_sun">S</td>
           <td>M</td>
           <td>T</td>
           <td>W</td>
           <td>T</td>
           <td>F</td>
           <td class="cell_sat">S</td>
         </tr>
        </table>
{calendar}
        
      </div>

<p class="h"><img src="http://www.ai-mana.com/img/blog/m1_entry.gif" alt="最新記事" width="60" height="20" /></p>
      <div class="list1">{latest_entry_list}</div>

<p class="h"><img src="http://www.ai-mana.com/img/blog/m1_category.gif" alt="カテゴリ" width="74" height="18" /></p>
      <div class="list1">{category_list}</div>
      
  
      
      <p class="h"><img src="http://www.ai-mana.com/img/blog/m1_archive.gif" alt="月別" width="67" height="16" /></p>
      <div class="list1">{archives_list}</div>
      
      
      
      <p class="h"><img src="http://www.ai-mana.com/img/blog/m1_comment.gif" alt="コメント" width="77" height="16" /></p>
      <div class="list1" id="commentlist">{recent_comment_list}</div>

<p class="h"><img src="http://www.ai-mana.com/img/blog/m1_trackback.gif" alt="トラックバック" width="85" height="16" /></p>
      <div class="list1">{recent_trackback_list}</div>
      
      
      
      <p class="h"><img src="http://www.ai-mana.com/img/blog/m1_link.gif" alt="リンク" width="55" height="16" /></p>
      <div class="list1">{link_list}
      
      <ul><li><a href="http://mozneko.boo.jp/" target="_blank">&copy; mozneko</a></li></ul>
      </div>
      
      
      
      <p class="h"><img src="http://www.ai-mana.com/img/blog/m1_profile.gif" alt="プロフィール" width="64" height="18" /></p>
      <div class="list1">{user_list}</div>

<p class="h"><img src="http://www.ai-mana.com/img/blog/m1_mobile.gif" alt="携帯" width="63" height="16" /></p>
      <div class="list1">{site_qrcode}</div>

<p class="h"><img src="http://www.ai-mana.com/img/blog/m1_search.gif" alt="検索" width="62" height="16" /></p>
      <form method="get" action="">
      <div class="list1">
        <p id="search"><input name="search" /></p>
        <p><input type="image" src="http://www.ai-mana.com/img/blog/search.gif" width="52" height="22" alt="検索" value="検索" /></p>
      </div>
      </form>

<p class="h"><img src="http://www.ai-mana.com/img/blog/m1_sponsor.gif" alt="スポンサー" width="71" height="18" /></p>
      <div class="list1">{ad}</div>

</div></div>
    
    <p class="pagetop2"><a href="#" onclick="top(); return false"><img src="http://www.ai-mana.com/img/blog/pagetop1.gif"  class="pagetop"alt="上へ" width="53" height="38" /></a></p>
  
  </div>

<div id="footer">
  
    <p>Copyright &copy; <a href="http://www.ai-mana.com/" target="_blank">ai mana</a> All Rights Reserved.</p>
  
  </div>

</div>

</body>
</html>

CSS

@charset "EUC-JP";

/* 初期化
------------------------------------------------------------ */

/* ブラウザスタイルの初期化 */

*{
  margin:0;
  padding:0;
  color:#98824C;
  font-size:100%;
  font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}

/* (IE6など一部ブラウザ向け) */

th,td,form,ul,li{
  margin:0;
  padding:0;
  color:#98824C;
  font-size:100%;
  font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}

/* 初期設定
------------------------------------------------------------ */

/* font
------------------------------ */

p,ul li,ol li,td,th,dt,dd,h6{
  font-size:70%;
  font-weight:normal;
  line-height:160%;
  letter-spacing:0.2em;
}

/* link
------------------------------ */

/* 文字の色 */
a{ 
  color:#739960;
  text-decoration:underline;
  /*HideMacIE\*/
  overflow:hidden;
  /**/
}

/* 訪問済み */
a:visited{ 
  color:#996666;
  text-decoration:underline;
}

/* オンマウス時 */
a:hover{
  color:#999900;
  text-decoration:underline;
}

/* クリック時 */
a:active{
  color:#739960;
  text-decoration:underline;
}

/* 画像
------------------------------ */

img{
  border:0;
  border: none;
  vertical-align:middle;
}

/* scroll bar
------------------------------ */

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

/* line
------------------------------ */

hr{
  clear:both;
  visibility:hidden;
  height:0;
}

/* list
------------------------------ */

ul{
  list-style-type:none;
}

/* frame
------------------------------------------------------------ */

body{
  background:url(http://www.ai-mana.com/img/blog/background.jpg) fixed 0 0;
}

#frame{
  width:850px;
  margin:0 auto;
  background-color:#FFFFFF;
}

/* header
------------------------------------------------------------ */

#header{
  background:url(http://www.ai-mana.com/img/blog/header.gif) no-repeat 0 20px;
  height:170px;
}

#header h1{
  margin:0 0 10px 0;
}

#header h1 a{
  text-decoration:none;
  color:#000000;
  letter-spacing:0.2em;
  font-size:84%;
}

#header p{
  color:#866358;
}

/* cats
------------------------------------------------------------ */

#cats{
  letter-spacing:0;
  line-height:0;
  font-size:1px;
  text-align:center;
  margin:0 0 20px 0;
}

/* contents
------------------------------------------------------------ */

.pagetop1{
  text-align:right;
  margin:0 0 20px 0;
}

.pagetop1 a{
  text-decoration:none;
  color:#990000;
}

.pagetop1 a:hover{
  color:#000000;
}

.pagetop2{
  letter-spacing:0;
  line-height:0;
  font-size:1px;
  text-align:right;
  margin:0 30px 20px 0;
  clear:both;
}

#left,
#right{
  float:right;
  margin:0 0 20px 0;
}

.list1{
  margin:0 0 20px 0;
}

.list1 ul{
  margin:0 0 0 20px;
  list-style-type:disc;
}

.list1 ul li{
  line-height:180%;
}

/* left
------------------------------------------------------------ */

#left{
  width:310px;
}

.h{
  letter-spacing:0;
  line-height:0;
  font-size:1px;
  margin:0 0 10px 0;
}

#search{
  background:url(http://www.ai-mana.com/img/blog/form4.gif) no-repeat 0 0;
  margin:0 0 5px 0;
}

#search input{
  width:150px;
  border:none;
  letter-spacing:0.2em;
  color:#54291B;
  margin:5px;
  background:none;
}

/* ハック */
*html #search{
  background-attachment:fixed;
}

/* calendar
------------------------------------------------------------ */

#calendarT tr{
  text-align:center;
}

#calendarT tr td{
  font-weight:bold;
}

#calendarT tr td.cell_sun{
  color:#CB2A21;
}

#calendarT tr td.cell_sat{
  color:#004C86;
}

#calendar{
  margin:0 0 20px 0;
}

#calendar table{
  width:100%;
}

#calendar table tr td a{
  padding:2px;
}

/* right
------------------------------------------------------------ */

#right{
  width:540px;
}

/* navi
------------------------------------------------------------ */

.navi{
  margin:0 0 20px 0;
}

/* entry
------------------------------------------------------------ */

.entry_body,
.entry_state{
  font-size:64%;
  letter-spacing:0.2em;
  line-height:250%;
  margin:0 0 20px 0;
}

.entry_body a{
  font-weight:bold;
}

.entry_body img{
  padding:0 0 5px 0;
}

.title{
  background:url(http://www.ai-mana.com/img/blog/line1.gif) no-repeat 0 0;
  padding:17px 0 20px 60px;
}

.title h2{
  font-size:74%;
  letter-spacing:0.2em;
}

.day{
  color:#666666;
}

.title h2 a{
  text-decoration:none;
  color:#000000;
}

.title h2 a:hover{
  color:#000000;
  text-decoration:none;
}

.title h2 a:visited{
  color:#000000;
  text-decoration:none;
}

.entry_more,
.entry_link{
  margin:0 0 20px 0;
  text-align:right;
}

/* comment
------------------------------------------------------------ */

.comment{
  background:url(http://www.ai-mana.com/img/blog/book.gif) no-repeat 0 0;
  padding:25px 0 0 50px;
  font-size:64%;
  letter-spacing:0.2em;
  line-height:250%;
  margin:0 0 10px 0;
}

.commentLink{
  font-size:64%;
  letter-spacing:0.2em;
  line-height:250%;
  margin:0 0 20px 0;
  text-align:right;
}

.trackbackLink{
  font-size:64%;
  letter-spacing:0.2em;
  line-height:250%;
  margin:0 0 20px 0;
  text-align:right;
}

.title1{
  margin:0 0 20px 0;
}

.font1{
  font-weight:bold;
  color:#54291B;
  margin:0 0 0 2px;
}

.input1,
.input2{
  margin:0 0 10px 0;
  background:url(http://www.ai-mana.com/img/blog/form1.gif) no-repeat 0 0;
}

.input3{
  margin:0 0 10px 0;
  background:url(http://www.ai-mana.com/img/blog/form3.gif) no-repeat 0 0;
}

.input1 input,
.input2 input{
  width:250px;
  height:20px;
  border:none;
  letter-spacing:0.2em;
  color:#54291B;
  margin:5px;
  background:none;
}

.input3 input{
  width:345px;
  height:20px;
  border:none;
  letter-spacing:0.2em;
  color:#54291B;
  margin:5px;
  background:none;
}

/* ハック */
*html .input1,
*html .input2,
*html .input3{
  background-attachment:fixed;
}

#text{
  margin:0 0 20px 0;
  background:url(http://www.ai-mana.com/img/blog/form2.gif) no-repeat 0 0;
  width:352px;
  height:152px;
}

#text textarea{
  width:340px;
  height:140px;
  margin:5px;
  letter-spacing:0.2em;
  border:none;
  background:none;
  color:#54291B;
}

*html #text textarea{
  background-attachment:fixed;
}

#submit{
  margin:0 0 20px 298px;
}

#cookie{
  margin:0 0 20px 0;
}

#cookie input{
  margin:0 5px 0 0;
}

#cookie label{
  color:#54291B;
  font-weight:bold;
}

/* footer
------------------------------------------------------------ */

#footer{
  padding:95px 10px 20px 0;
  background:url(http://www.ai-mana.com/img/blog/cat.gif) no-repeat right top;
}

#footer p{
  text-align:right;
  color:#999999;
}

#footer p a{
  color:#999999;
  text-decoration:none;
}

#footer p a:hover{
  color:#CC3333;
  text-decoration:underline;
}

/* padding
------------------------------------------------------------ */

#p1{
  padding:70px 120px 0 230px;
}

/* padding
------------------------------------------------------------ */

#m1{
  margin:0 30px;
}

#m2{
  margin:0 30px 0 0;
}

/* 2011.7.26 修正
------------------------------------------------------------ */

.entry_body .jgm_entry_desc_mark p{
  font-size:100%;
}

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