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

ホーム

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

テンプレート名 : ［JUGEM.in］ピンク色のシンプルなテンプレート

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}" />
<title>{site_title}</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<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}" />
<script type="text/javascript" src="./template/js/cookie.js"></script>
<style type="text/css">
#category #{cid_num} a {
background:#fff;
border-bottom:solid 1px #FF307C;
font-weight:bold;
}
#cid #toppage a:link, #cid #toppage a:visited {
background:#FFF8f8;
border-bottom:solid 1px #ddd;
font-weight:normal;
}
</style>
</head>
<body id="{eid}{cid}{index}" onload="javascript:initval();">

<div id="jugemin">
<a href="#" onClick="javascript:window.open('http://jugem.in/')">JUGEM.in</a>
</div>

<div id="top">
<div id="right">
<div id="head">

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

</div>
<div id="article">

<div id="freespace5">
{freespace_contents5}
</div>


<div id="profile">
<h2>{profile_name}のプロフィール</h2>
<div id="profile_content">
{profile_description}
</div>
</div> 


<div class="article_wrap">
<h2><a href="{entry_permalink}">{entry_title}</a></h2>
<p class="byline">
<span class="timestamp">by {user_name}, {entry_year}/{entry_month}/{entry_day} {entry_time_only}</span>
<span>in {category_name}</span>
</p>
<div class="content">
{entry_description}
<div id="sequel"><br />{entry_sequel}</div>
</div>
<ul class="feedback">
<li>{comment_num}</li>
<li>{trackback_num}</li>
</ul>
</div>
{trackback_auto_discovery}

<ul id="entry_navi">
<li id="next_entry">［次の記事］<a href="{next_permalink}">{next_title} </a></li>
<li id="before_entry">［前の記事］<a href="{prev_permalink}">{prev_title}</a> </li>
</ul>



<ul id="page_navi">
<li><a href="{prev_page_url}">≪ 前のページ</a></li>
<li>｜全 [{page_num}] ページ中 [{page_now}] ページを表示しています。｜</li>
<li><a href="{next_page_url}">次のページ ≫</a></li>
</ul>


<div id="comments">
<h3>この記事へのコメント</h3>

<p class="cmtext" id="cm{comment_id}">{comment_description}</p>
<p class="cmfoot">by <a href="{comment_url}" target="_blank">{comment_name_only}</a> {comment_time_24}</p>

<div id="comment_form">
<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
<input type="hidden" name="entry_id" value="{entry_id}" class="input" />
<table cellspacing="1" cellpadding="5" border="0">
<tr>
<th>お名前</th>
<td><input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" class="input" /></td>
</tr>
<tr>
<th>メール<br />アドレス</th>
<td><input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="input" /></td>
</tr>
<tr>
<th>URL</th>
<td><input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="input" /></td>
</tr>
<tr>
<th>コメント</th>
<td><textarea tabindex="4" id="description" name="description" rows="5"></textarea></td>
</tr>
<tr>
<th>&nbsp;</th>
<td class="comment_submit"><input tabindex="5" type="submit" value="投稿する" onclick="javascript:setval();" />　<input type="checkbox" name="set_cookie" value="1" id="set_cookie"><label for="set_cookie">入力情報を登録しますか？</td>
</tr>
</table>
</form>
</div>
</div>


<div id="trackback">
<h3>この記事へのトラックバック</h3>

<h4 class="tbtitle" id="tb{comment_id}">{trackback_title}</h4>
<p class="tbtext">{trackback_excerpt}</p>
<p class="tbfoot">by {trackback_blog_name} {trackback_time_24}</p>

<p id="tburl">この記事へのトラックバックURL　{trackback_url}</p>
</div>

<div id="amazon">
<h3>おすすめの商品</h3>

<div class="amazon">
<table>
<tr>
<td class="image">
<a href="{amazon_url}"><img src="{amazon_ImageUrlMedium}" height="130" /></a>
</td>
<td class="detail">
<div>
<p><a href="{amazon_url}">{amazon_ProductName} </a></p>
<p>{amazon_Creator}<br />価格 {amazon_ListPrice}</p>
<p class="amazon_comment">{amazon_comment} </p>
</div>
</td>
</tr>
</table>
</div>

<p id="pagetop"><a href="#top">▲このページのトップへ</a></p>
</div>
</div>
</div>
<div id="left">

<div id="category">
<ul><li id="toppage"><a href="../">トップページ</a></li><li id="cid{category_item_id}"><a href="./?cid={category_item_id}">{category_item_name}&nbsp;({category_item_num})</a></li></ul>
</div>


<div id="recent_comment">
<h3>最近のコメント</h3>
<ul><li><a href="./?eid={recent_comment_item_entry_id}#cm{recent_comment_item_comment_id}">{recent_comment_item_name}&nbsp;<span>({recent_comment_item_date})</span><div>{recent_comment_item_title}</div></a></li></ul>
</div>


<div class="freespace">
<h3>{freespace_title1}</h3>
<div>
{freespace_contents1}
</div>
</div>


<div class="freespace">
<h3>{freespace_title2}</h3>
<div>
{freespace_contents2}
</div>
</div>


<div id="link">
<h3>おすすめリンク</h3>
{link_list}
</div>


<div class="freespace">
<h3>{freespace_title3}</h3>
<div>
{freespace_contents3}
</div>
</div>


<div class="freespace">
<h3>{freespace_title4}</h3>
<div>
{freespace_contents4}
</div>
</div>

 
<div id="user">
<h3>ブログ運営者のプロフィール</h3>
<ul>
 
<li><a href="./?pid={user_item_id}">{user_item_name}</a></li> 

</ul> 
</div>


<div id="other">
<table>
<tr>
<th><img src="./?mode=qrcode&black_hex=000000&white_hex=FFFFFF&size=1" alt="このブログを携帯から見る場合はQRコードをご活用ください" /></th>
<td>携帯用ＱＲコード</td>
</tr>
<tr>
<th><img src="http://img-cdn.jg.jugem.jp/4ea/968241/20080903_179973.png" alt="RSS1.0・ATOM0.3で最新情報をチェック！" /></th>
<td><a href="./?mode=rss">RSS</a> <a href="./?mode=atom">ATOM</a></td>
</tr>
<tr>
<th><img src="http://img-cdn.jg.jugem.jp/4ea/968241/20080903_180023.png" alt="管理ページへ" /></th>
<td><a href="./admin/">管理者ページ</a></td>
</tr>
</table>
</div>


{ad}

</div>

<div id="foot">
<p>Some Rights Reserved, JUGEM<br />
現在このブログで使用しているデザイン・テンプレートは<a href="http://jugem.in/" title="ユーザーテンプレートファイル（UTF）作成・配布元サイト「JUGEM.in」">JUGEM.in（ジュゲムイン）</a>で作成・配布されています。</p>
</div>

</div>
</body>
</html>

CSS

/*-----------------------------------------------------------------
※テンプレート編集上の注意事項※
・jugeminバナー(#jugemin)とフッター(#foot)のCSSの変更は禁止です。
・HTMLに関しても同様にこの2箇所の編集は禁止とします。
・その他については自由に変更してください。
なにかわからないことがあった場合は「JUGEM.in」の諸記事にコメントをお願いします。
答えられる質問にはできるだけ答える予定です。
Copyright (c) 2008* http://jugem.in/ All rights reserved.
------------------------------------------------------------------*/

html {
overflow-y:scroll
}
body {
margin:0;
padding:0;
background:#fafafa;
color:#333;
font-size:62.5%;
font-family:Verdana,"ＭＳ Ｐゴシック","Osaka";
}
table {
border-collapse:collapse;
}
th {
padding:3px;
background:#eee;
border:1px solid #ccc;
}
td {
padding:3px;
border:1px solid #ccc;
}
a {
color:#FF206C;
}
a:hover {
color:#FFA0C3;
}
/*----- jugeminバナー -----*/
#jugemin {
position:absolute;
left:5px;
top:5px;
}
#jugemin a {
display:block;
padding:2px;
background:#fff;
border:solid 1px #aaa;
text-decoration:none;
}
/*----- 中央寄せをするブロック -----*/
#top {
margin:0 auto;
padding:0 10px;
width:880px;
background:#fafafa url(http://img-cdn.jg.jugem.jp/4ea/968241/20080913_218881.png) repeat-y center center;
}

/*----- 右ブロック -----*/
#right {
float:right;
width:640px;
}
/*----- 上ブロック -----*/
#head {
width:640px;
}
h1 {
margin:0;
padding:20px 20px 0 20px;
font-size:3em;
font-weight:bold;
line-height:1.2;
}
h1 a {
color:#FF4086;
text-decoration:none;
}
#head p {
margin:0;
padding:0 20px;
font-size:1.2em;
}

/*----- 記事部分ブロック -----*/
#article {
width:640px;
}

/*----- フリースペース５ -----*/
#freespace5 {
margin:10px 20px 0 20px;
padding:10px;
border:solid 1px #ddd;
font-size:1.2em;
line-height:1.4;
}
#freespace5 ul {
margin:0 0 0 25px;
padding:0;
}
#freespace5 ul li {
padding:3px 0;
list-style-type:circle;
}
#freespace5 ol {
margin:0 0 0 35px;
padding:0;
}
#freespace5 ol li {
padding:3px 0;
list-style-type:decimal;
}

/*----- 記事ブロック -----*/
.article_wrap {
margin:0 20px;
padding:25px 0 0 0;
}
.article_wrap h2 {
margin:0;
padding:0 0 2px 0;
border-bottom:solid 2px #FFB0CD;
font-size:2em;
line-height:1.2;
}
.article_wrap h2 a {
color:#333;
text-decoration:none;
}
#article .article_wrap .byline {
margin:0;
padding:0;
height:20px;
border-bottom:solid 1px #ddd;
color:#666;
line-height:20px;
}
.byline a {
color:#666;
text-decoration:none;
}
.timestamp {
float:right;
}
.content {
margin:0;
padding:10px 0;
color:#333;
font-size:1.4em;
line-height:1.5;
}
ul.feedback {
margin:0;
padding:0;
list-style:none;
text-align:right;
}
.feedback li {
margin:0;
padding:0 3px;
display:inline;
}
.feedback a {
color:#999;
text-decoration:none;
}

/*----- 記事本文および続き -----*/
.content img.pict {
margin:5px 0;
padding:2px;
border:1px solid #ccc;
}
.content ul {
margin:0 0 0 25px;
padding:0;
}
.content ul li {
padding:3px 0;
list-style-type:circle;
}
.content ol {
margin:0 0 0 35px;
padding:0;
}
.content ol li {
padding:3px 0;
list-style-type:decimal;
}
.content h3 {
margin:0 0 10px 0;
padding:4px 5px;
background:#f5f5f5;
font-size:1em;
}
.content blockquote {
margin:0;
padding:25px 8px 15px;
background:#f7f7f7 url(http://img.jugem.in/20080911_210384.png) left top no-repeat;
}

/*----- 記事内商品紹介 -----*/
.jugem_review {
border:solid 1px #ddd;
margin:1em 0 !important;
padding:10px;
}
.jugem_review td {
border:0;
padding:0;
}
.jugem_review br {
display:none;
}
.jugem_review div br {
display:inline;
}
.review_item_title {
padding:0 0 1px 0;
border-bottom:solid 1px #ddd;
font-weight:bold;
}
.link_monocolle {
padding:2px 0 0 0;
text-align:right;
}
.review_info .review_info, .review_info_area .review_info {
padding:5px 0;
border-bottom:dashed 1px #ddd;
}
.review_detail {
padding:5px 0 0 0 !important;
}
.review_img img {
border:solid 1px #ccc;
}

/*----- ページナビおよび記事ナビ -----*/
#page_navi {
margin:15px 20px;
padding:8px 5px;
background:#fafafa;
border-top:solid 1px #ccc;
border-bottom:solid 1px #ccc;
font-size:1.2em;
list-style:none;
text-align:center;
}
#page_navi li {
display:inline;
}
#page_navi ul li a:visited {
color:#333;
text-decoration:none;
}
#entry_navi {
margin:15px 20px;
padding:0;
background:#fafafa;
border-top:solid 1px #ccc;
border-bottom:solid 1px #ccc;
font-size:1.2em;
list-style:none;
}
#entry_navi li#next_entry {
margin:0;
padding:8px 5px 3px 5px;
}
#entry_navi li#before_entry {
margin:0;
padding:3px 5px 8px 5px;
}

/*----- コメント -----*/
#comments {
margin:0 20px;
}
#comments h3 {
margin:2em 0 0 0;
border-bottom:solid 1px #333;
font-size:1.6em;
}
.cmtext {
margin:0;
padding:1em 3px 1em 3px;
font-size:1.2em;
line-height:1.4;
}
.cmfoot {
margin:0;
padding:0px 3px 2px 3px;
border-bottom:dashed 1px #ddd;
text-align:right;
font-size:1.2em;
}
.cmfoot a {
color:#333;
text-decoration:none;
}
#comment_form {
padding:10px 0;
}
#comment_form table {
border-width:0;
padding:0;
width:500px;
border-collapse:collapse;
}
#comment_form th {
margin:0;
width:60px;
background-color:#EEEEEE;
border:1px solid #DDDDDD;
color:#666666;
font-size:1.2em;
font-weight:normal;
line-height:1.2;
text-align:right;
}
#comment_form input {
width:200px;
padding:5px 3px;
font-size:1.2em;
line-height:1.2
}
#comment_form td {
background-color:#FFFFFF;
border:1px solid #DDDDDD;
padding-top:5px;
text-align:left;
}
#comment_form textarea {
width:380px;
padding:5px 3px;
font-size:1.2em;
}
#comment_form .comment_submit {
font-size:1.2em;
}
#comment_form .comment_submit input {
width:auto;
font-size:1.2em;
}

/*----- トラックバック-----*/
#trackback {
margin:0 20px;
}
#trackback h3 {
margin:2em 0 0 0;
border-bottom:solid 1px #333;
font-size:1.6em;
}
#trackback p#tburl {
margin:10px 0;
padding:5px;
background:#fafafa;
border:solid 1px #ddd;
font-size:1.3em;
}
#trackback h4.tbtitle {
margin:0;
padding:1em 3px 0 3px;
font-size:1.2em;
font-weight:normal;
line-height:1.4;
}
#trackback p.tbtext {
margin:0;
padding:1em 3px 1em 3px;
font-size:1.2em;
line-height:1.4;
}
#trackback p.tbfoot {
margin:0;
padding:0 3px 2px 3px;
border-bottom:1px dashed #DDDDDD;
font-size:1.2em;
text-align:right;
}

/*----- おすすめ商品一覧 -----*/
#amazon {
margin:0 10px 0 20px;
padding:10px 0 0 0;
width:610px;
}
#amazon h3 {
margin:0 10px 10px 0;
padding:0 0 2px 0;
border-bottom:2px solid #ddd;
font-size:1.8em;
font-weight:bold;
}
.amazon {
margin:0 10px 10px 0;
padding:4px;
max-height:180px;
width:285px;
border:solid 1px #FFB0CD;
float:left;
font-size:1.1em;
line-height:1.2;
}
.amazon td {
padding:0;
border:0;
}
.image {
width:110px;
}
.image img {
border:0;
}
.detail {
vertical-align:top;
}
.detail div {
height:150px;
overflow-y:auto;
}
.detail p {
margin:0 0 8px 0;
}
.detail p.amazon_comment {
margin:0;
line-height:1.2;
}

/*----- ▲このページのトップへ -----*/
#pagetop {
clear:both;
margin:0;
padding:0 10px 20px 20px;
font-size:1.2em;
text-align:right;
}

/*----- プロフィール -----*/
#profile {
margin:0 20px;
padding:25px 0 10px 0;
}
#profile h2 {
margin:0 0 20px 0;
padding:0 0 2px 0;
border-bottom:2px solid #AFB0FF;
font-size:2em;
line-height:1.2;
}
#profile_content {
font-size:1.3em;
}

/*----- サイド -----*/
#left {
float:left;
width:239px;
padding:100px 0 0 1px
}

/*----- カテゴリー -----*/
#category {
border-top:solid 1px #ddd;
}
#category ul {
margin:0;
padding:0;
list-style:none;
}
#category li {
margin:0;
padding:0;
background:#FFf8f8;
font-size:1.3em;
}
#category li a {
display:block;
margin:0;
padding:8px 5px 8px 15px;
border-bottom:solid 1px #ddd;
color:#333;
text-decoration:none;
line-height:1.2;
}
#left #category ul li a:hover {
background:#FFf4f4;
border-color:#FF206C;
font-weight:bold;
}
#category ul li#toppage a {
background:#fff;
border-bottom:solid 1px #FF4086;
font-weight:bold;
}

/*----- 最近のコメント -----*/
#recent_comment {
margin:10px;
padding:10px;
background:#fff;
}
#recent_comment h3 {
margin:0;
padding:0 0 8px 0;
color:#333;
font-size:1.4em;
letter-spacing:1px;
}
#recent_comment ul {
margin:0;
padding:0 5px 0 0;
max-height:200px;
overflow-y:auto;
list-style:none;
}
#recent_comment li {
margin:0;
padding:0;
font-size:1.3em;
}
#recent_comment li a {
display:block;
margin:0;
padding:8px 5px 8px 5px;
border-bottom:dashed 1px #ddd;
text-decoration:none;
line-height:1.2;
}
#recent_comment li a:hover {
background:#fafafa;
}
#recent_comment li a span {
color:#333;
}
#recent_comment li a div {
padding:2px 0 0 0;
color:#333;
font-size:84.5%;
}

/*----- おすすめリンク -----*/
#link {
margin:10px;
padding:10px;
background:#fff;
}
#link h3 {
margin:0;
padding:0 0 8px 0;
color:#333;
font-size:1.4em;
letter-spacing:1px;
}
#link ul {
margin:0;
padding:0;
list-style:none;
}
#link li {
margin:0;
padding:0;
font-size:1.3em;
}
#link li a {
display:block;
margin:0;
padding:3px 0 3px 10px;
background:url(http://img-cdn.jg.jugem.jp/4ea/968241/20080903_179732.png) no-repeat left 9px;
text-decoration:none;
line-height:1.2;
}

/*----- 運営者プロフィール -----*/
#user {
margin:10px;
padding:10px;
background:#fff;
}
#user h3 {
margin:0;
padding:0 0 8px 0;
border-bottom:dashed 1px #fff;
color:#333;
font-size:1.4em;
letter-spacing:1px;
}
#user ul {
margin:0;
padding:0;
list-style:none;
}
#user li {
margin:0;
padding:0;
font-size:1.3em;
}
#user li a {
display:block;
margin:0;
padding:3px 0 3px 10px;
background:url(http://img-cdn.jg.jugem.jp/4ea/968241/20080903_179732.png) no-repeat left 9px;
text-decoration:none;
line-height:1.2;
}

/*----- QRコード・RSS/ATOM・管理者ページ -----*/
#other {
margin:10px;
padding:10px 10px 10px 6px;
background:#fff;
}
#other th {
width:38px;
background:#fff;
border:0;
text-align:left;
}
#other td {
border:0;
font-size:1.2em;
}

/*----- フリースペース -----*/
.freespace {
margin:10px;
padding:10px;
background:#fff;
}
.freespace h3 {
margin:0;
padding:0 0 8px 0;
border-bottom:dashed 1px #fff;
color:#333;
font-size:1.4em;
letter-spacing:1px;
}
.freespace div {
color:#333;
font-size:1.3em;
line-height:1.4;
}
.freespace ul {
margin:0 0 0 25px;
padding:0;
}
.freespace ul li {
padding:3px 0;
list-style-type:circle;
}
.freespace ol {
margin:0 0 0 35px;
padding:0;
}
.freespace ol li {
padding:3px 0;
list-style-type:decimal;
}

/*----- JUGEMの広告 -----*/
.links {
margin:10px;
padding:10px 10px 10px 6px;
background:#FFFFFF;
text-align:center;
}

/*----- フッター -----*/
#foot {
padding:0 20px 20px 260px;
clear:both;
}
#foot p {
margin:0;
padding:5px 0 0 0;
border-top:solid 1px #ddd;
padding:10px 0 0 0;
font-size:1.1em;
line-height:2;
text-align:center;
color:#777;
}

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