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

ホーム

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

テンプレート名 : Sweet Nostalgia

HTML・CSSをコピーして使う

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={site_encoding}" />
<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}" />
<link rel="alternate" media="handheld" type="application/xhtml+xml" href="{mobile_url}" />

<link rel="shortcut icon" href="http://img-cdn.jg.jugem.jp/92c/2303021/20111217_1719043.png">

<script type="text/javascript" src="./template/js/cookie.js"></script>

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-16819271-9']);
  _gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

</head><body onload="javascript:initval();">

<header id="pageHeader">

<hgroup id="titleBlock" class="png_bg">
    
    <h1 id="top">{blog_name}</h1>
    <h2>{blog_description}</h2>
    
  </hgroup>

</header>

<div id="content">

<div id="contentInner" class="clearfix">
    
    <div id="main">
      
      <article class="entry">
        <header class="entryHeader">
          <h1>{entry_title_link}</h1>
          <p class="day">{entry_date}&nbsp;{category_name}</p>
        </header>

<span class="entryContent">
          <div class="entryBody">{entry_description}</div>
          <div class="entryMore">{entry_sequel}</div>
        </span>

<footer class="entryfooter">
          <ul class="state clearfix">
            <li>{facebook_button}</li>
            <li>{mixi_check1}</li>
            <li>{tweet_button_none_en}</li>
            <li>{hatena_bookmark_standard}</li>
          </ul>

<ul class="state clearfix">
             <li>{trackback_num}</li>
             <li>{comment_num}</li>
            <li>{love}</li>
            <li>{logpi_link}</li>
            <li>{pookmark_link}</li>
           </ul>
        </footer>
      </article>

<section id="comment">
        <h1 id="comments">コメント</h1>
        
        <article class="commentContent">
          <ul>
            <li>{comment_description}</li>
            <li class="commentEx">{comment_name} | {comment_time}</li>
          </ul>
        </article>

<h2>コメントする</h2>
        <form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
        <input type="hidden" name="entry_id" value="{entry_id}" class="input" />

<label for="description">Comments:</label><br />
        <textarea tabindex="4" id="description" name="description" rows="5"></textarea><br />

<input tabindex="5" type="image" id="comSubmit" src="http://img-cdn.jg.jugem.jp/92c/2303021/20111216_1714451.gif" value="コメント送信" onclick="javascript:setval();" /><br />
        <input type="checkbox" name="set_cookie" value="1" id="set_cookie"><label for="set_cookie">入力情報を登録しますか？</label>
         </form>
       </section>

<section id="trackbackArea">
         <h1 id="trackback">この記事のトラックバックURL</h1>
         <input type="text" value="{trackback_url}" id="trackbackInput" class="input" />

<article class="commentContent">
           <ul>
             <li>{trackback_title}</li>
             <li>{trackback_excerpt}</li>
             <li class="commentEx">{trackback_blog_name} | {trackback_time}</li>
           </ul>
         </article>
         
       </section>

<article class="entry">
       <header class="entryHeader">
         <h1 class="ie6Head">Profile</h1>
         <p class="day">HN：{profile_name}</p>
       </header>
       <span class="entryContent">{profile_description}</span>
     </article>

</div>

<div id="side">

<nav class="sideCont">
      <h1>Recent entries</h1>
      {selected_entry_list}
      </nav>

<nav class="sideCont">
        <h1>Categories</h1>
        {category_list}
      </nav>

<nav class="sideCont">
        <h1>Archives</h1>
        {archives_list}
      </nav>

<nav class="sideCont">
        <h1>Calendar</h1>
        {calendar2}
      </nav>

<article class="sideCont">
        <h1>{freespace_title1}</h1>
        <p>{freespace_contents1}</p>
      </article>

<article class="sideCont">
        <h1>{freespace_title2}</h1>
        <p>{freespace_contents2}</p>
      </article>

<nav class="sideCont">
        <h1>Recent Comment</h1>
        {recent_comment_list}
      </nav>

<nav class="sideCont">
        <h1>Recent Trackback</h1>
        {recent_trackback_list}
      </nav>

<article class="sideCont">
        <h1>{freespace_title3}</h1>
        <p>{freespace_contents3}</p>
      </article>

<article class="sideCont">
        <h1>{freespace_title4}</h1>
        <p>{freespace_contents4}</p>
      </article>

<article class="sideCont">
       <h1>{freespace_title5}</h1>
       <p>{freespace_contents5}</p>
      </article>

<aside class="sideCont">
        <h1>Recommend</h1>
        
        {amazon_item}

<div id="add">{ad}</div>
        
      </aside>

<section class="sideCont">
        <h1>Search</h1>
        <form method="get" action="./">
          <input id="search" name="search" size="20" style="width:165px" class="search" />
          <input type="submit" value="検　索" />
        </form>
      </section>

<section class="sideCont">
        <h1>Links</h1>
        {link_list}
      </section>

</div>

</div>

<div id="pager">

<nav class="pageNav">
      <ul>
        <li>{prev_entry}</li>
        <li class="pageNavcenter">|<a href="./">main</a>|</li>
        <li>{next_entry}</li>
      </ul>
    </nav>

<nav id="fullPagelink">{full_pager_link}</nav>
    
    <nav id="moveNav"><a href="#top">ページの先頭へ▲</a></nav>

</div>

<div id="topMenu">
    <ul>
       <li><a href="./">HOME</a></li>
       
       
       <li><a href="./?pid={user_item_id}">Profile</a></li>
       
       
       <li><a href="./?mode=rss">RSS</a></li>
       <li><a href="./?mode=atom">ATOM</a></li>
       <li><a href="./manage/">Login</a></li>
    </ul>
  </div>

</div>

<footer id="pageFooter">
  <div id="footerInner">
      <p><small>{copyright} Design By <a href="http://cre.main.jp">maeda</a></small></p>
  </div>
</footer>

</body></html>

CSS

/****************************************
font-size
-----------------------------------------
10px 	62.5%
11px 	68.75%
12px 	75%
13px 	8.125%
14px 	87.5%
15px 	93.75%
16px 	100%
17px 	106.25%
18px 	112.5%
19px 	118.75%
20px 	125%
21px 	131.25%
22px 	137.5%
23px 	143.75%
24px 	150%
25px 	156.25%
26px 	162.5%
30px 	187.5%  
****************************************/

/****************************************
set html5
****************************************/
[hidden], menu[type=context], rp, source,  track { display: none; }
article, aside, figure, figcaption, footer, header,
hgroup, nav, section, summary { display: block; }
colgroup[hidden], col[hidden], thead[hidden], tbody[hidden],
tfoot[hidden], tr[hidden], td[hidden], th[hidden] { visibility: collapse; }
ruby { display: ruby; }
rt { display: ruby-text; }

/****************************************
1.Setting
*****************************************/
html, body, div, span, applet, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, figure {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  }

html {
  overflow-y: scroll;
  height: 100%;
  }

body {
  font-family: Arial,Verdana,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'ＭＳ Ｐゴシック',sans-serif;
  height: 100%;
  line-height: 1;
  color: #393939;
  background-color: #0f0f0f;
  -webkit-text-size-adjust: none; /* iPhone */
  }

h1,h2,h3,h4,h5,h5,h6 {
  font-family: 'helvetica neue',helvetica,Arial,Verdana,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'ＭＳ Ｐゴシック',sans-serif;
  }

a,a:visited {
  color: #d65b6f;
  text-decoration: none;
  }

a:hover,a:active{
  color: #d65b6f;
  text-decoration: underline;
  }

a:active,a:focus { outline:0 none; }

/* chrome form outline */
input[type="text"],input[type="password"],textarea,select {
  outline:none;
  }

table {
  border-collapse: collapse;
  border-spacing: 0;
  }

/*  clearfix */
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
  }

* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

ul li {
  list-style: none;
  list-style-position: outside;
  margin: 0;
  padding: 0;
  }

br {
  letter-spacing: 0;
  }

small {
  font-size: 75%;
  }

strong { font-weight: bold !important; }

/****************************************
2. Layout
*****************************************/
#pageHeader {
  width: 100%;
  min-width: 950px;
  height: 200px;
  margin-top: 32px;
  color: #1e1e1e;
  background-image: url("http://img-cdn.jg.jugem.jp/92c/2303021/20111214_1709428.jpg");
  }

#content {
  width: 100%;
  min-width: 950px;
  padding: 30px 0;
  background-color: #d2d7a1;
  background-image: url("http://img-cdn.jg.jugem.jp/92c/2303021/20111214_1710614.jpg");
  background-repeat: repeat-x;
  }

#main {
  width: 565px;
  margin-left: 40px;
  _margin-left: 20px;
  background-color: #ffffff;
  float: left;
  }

#side {
  font-size: 93.75%;
  width: 250px;
  margin-top: 76px;
  margin-right: 40px;
  _margin-right: 20px; 
  float: right;
  line-height: 1.4;
  }

#pageFooter {
  width: 100%;
  background-image: url("http://img-cdn.jg.jugem.jp/92c/2303021/20111215_1712227.png");
  }

/****************************************
3. header
*****************************************/
#titleBlock {
  width: 950px;
  height: 150px;
  margin: 0 auto;
  padding-top: 50px;
  background-image: url("http://img-cdn.jg.jugem.jp/92c/2303021/20111214_1709401.png");
  background-position: 95% 75%;
  background-repeat: no-repeat;
  }

#titleBlock h1 a {
  font-weight: bold;
  font-size: 162.5%;
  color: #1e1e1e;
  text-decoration: none;
  }

#titleBlock h2 {
  padding-top: 20px;
  font-weight: bold;
  font-size: 93.75%;
  line-height: 1.6;
  }

/****************************************
4. content
*****************************************/
#contentInner {
  width: 950px;
  background-color: #ffffff;
  margin: 0 auto;
  padiing-top: 40px;
  border-style: solid;
  border-color: #969971;
  border-width: 1px 1px 0;
  border-radius: 6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0;
  -webkit-border-radius: 6px 6px 0 0;
  -o-border-radius: 6px 6px 0 0;
  -ms-border-radius: 6px 6px 0 0; 
  }

/****************************************
4-1. entryHeader
*****************************************/
.entry {
  margin-bottom: 80px;
  }

.entryHeader {
  margin-top: 30px;
  margin-bottom: 15px;
  padding: 22px 0 8px 35px;
  _height: 46px;
  _padding: 0 0 0 35px;
  position: relative;
  border-bottom: 3px solid #c0c0c0;
  background-image: url("http://img-cdn.jg.jugem.jp/92c/2303021/20111214_1710971.gif");
  background-repeat: no-repeat;
  }

.entryHeader h1 a {
  font-size: 100%;
  font-weight: bold;
  _padding-top: 22px;
  text-decoration: none;
  color: #393939;
  display: block;
  }

/* プロフィールページのヘッダのIE6向けのハック（padding-top） */
.entryHeader h1.ie6Head {
  font-size: 100%;
  font-weight: bold;
  text-decoration: none;
  color: #393939;
  display: block;
  _padding-top: 22px;
  }

/* IE6 */
.entryHeader h1 a:active,
.entryHeader h1 a:visited,
.entryHeader h1 a:hover,
.entryHeader h1 a:focus {
  text-decoration: none;
  color: #393939;
  }

.entryHeader p.day {
  font-size: 87.5%;
  position: absolute;
  top: 0;
  }

/****************************************
4-2. entryBody
*****************************************/
.entryContent {
  font-size: 93.75%;
  line-height: 1.8;
  letter-spacing: 2px;
  }

.entryMore {
  margin: 1em 0;
  }

/****************************************
4-2. entryfooter
*****************************************/
.entryfooter {
  margin-top: 45px;
  }

ul.state {
  margin-top: 1em;
  font-size: 87.5%;
  display: block;
  }

ul.state li {
  float: right;
  padding-left: 1em;
  }

/****************************************
5 comment & trackback
*****************************************/
#comment,#trackbackArea {
  font-size: 93.75%;
  line-height: 1.8;
  margin-top: 100px;
  margin-bottom: 40px;
  }

#comment h1 ,#comment h2, #trackbackArea h1, #trackbackArea h2 {
  font-weight: bold;
  border-left: 5px solid #d65b6f;
  padding-left: 10px;
  margin-bottom: 10px;
  }

#comment h2 {
  margin-top: 70px;
  }

.commentContent {
  border: 1px solid #cccccc;
  margin-bottom: 35px;
  padding: 10px 20px;
  }

.commentEx {
  margin-top: 1em;
  text-align: right;
  }

#name, #url,#trackbackInput {
  margin-top: 5px;
  margin-bottom: 1em;
  padding: 3px 5px;
  width: 250px;
  }

#description {
  width: 450px;
  height: 150px;
  padding: 3px 5px;
  }

#comSubmit {
  margin: 0.5em 0;
  }

/****************************************
6. Pager
*****************************************/
#pager {
  width: 950px;
  margin: 0 auto;
  padding: 30px 0 30px;
  background-color: #ffffff;
  text-align: center;
  border-style: solid;
  border-color: #969971;
  border-width: 0 1px 1px;
  border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  -webkit-border-radius: 0 0 6px 6px;
  -o-border-radius: 0 0 6px 6px;
  -ms-border-radius: 0 0 6px 6px;
  }

.pageNav li {
  display: inline;
  }

.pageNavcenter {
  margin: 0 10px;
  }

.pageNavcenter a {
  padding: 0 5px;
  }

#pager span { margin:0 3px; }

#pager span.current {
  background-color: #1e1e1e;
  padding: 4px 7px;
  color: #ffffff;
  font-weight: bold;
  }

#pager span a {
  background-color: #e4e4e4;
  color: #565656;
  padding: 4px 7px;
  text-decoration: none;
  }

#pager span a:hover,#pager span a:active {
  background-color: #333;
  color: #ffffff;
  text-decoration: none;
  }

#moveNav {
  text-align: right;
  padding-right: 20px;
  margin-top: 20px;
  }

/****************************************
7. topMenu
*****************************************/
#topMenu {
  position: absolute;
  top:0;
  }

#topMenu {
  width: 100%;
  min-width: 950px;
  background-color: #4d4d4d;
  font-size: 75%;
  position: absolute;
  top: 0;
  }

#topMenu a {
  color: #ffffff;
  font-weight: bold;
  }

#topMenu ul {
  width: 950px;
  padding: 10px 0;
  margin: 0 auto;
  text-align: right;
  }

#topMenu ul li {
  display: inline;
  padding-left: 10px;
  }

/****************************************
8-1. side
*****************************************/
.sideCont {
  margin-bottom: 55px;
  }

#side h1 {
  color: #f2e2bf;
  font-weight: bold;
  padding: 6px 1em;
  margin-bottom: 5px;
  background-image: url("http://img-cdn.jg.jugem.jp/92c/2303021/20111217_1719202.png");
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  -ms-border-radius: 2px; 
  }

#search {
  margin-top: 10px;
  }

/* {ad}タグ */
#add {
  width: 120px;
  margin: 0 auto;
  }

/****************************************
8-2. amazon-rakuten
*****************************************/
.amazon {
  margin-bottom: 2em;
  }

.amazon_pict {
  display: block;
  margin: 0 auto;
  }

.amazon_monocolle {
  display: none;
  }

.amazon_text {
  font-size: 12px;
  text-align: center;
  }

/****************************************
8-3. Calendar
*****************************************/
.calendar {
  margin: 0 auto;
  }

.calendar td {
  padding: 0 3px;
  }

td.calendar_month {
  text-align: center;
  padding-bottom: 10px;
  }

.cell {
  text-align: center;
  }

/****************************************
9. footer
*****************************************/
#footerInner {
  color: #ffffff;
  text-align: center;
  padding: 20px 0;
  }

/****************************************
10. other
*****************************************/
#google_flash_embed,#gEntryAdContainer,#google_flash_inline_div {
  display: block;
  }

.pict {
  display: block;
  border: solid 1px #cccccc;
  padding: 5px;
  }

blockquote {
  padding: 1em 2em;
  background-color: #ebf5ff;
  }

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