無料ブログをかんたん作成
無料ブログ作成ならJUGEM(ジュゲム)
ホーム
ブログ作成
ブログを書く
ブログを見る
無料ブログ作成
JUGEM PLUS お申し込み
サービス紹介
JUGEM(無料ブログ)
JUGEM PLUS(有料プラン)
ブログ機能一覧表
デザイン
公式ブログデザイン
PC版
スマートフォン版
ユーザー作成
ユーザー作成
JUGEM を楽しむ
投稿する・みんなとつながる
ブログテーマ
ブログのお題
その他のコンテンツ
芸能人・有名人のブログ
スペシャルインタビュー
JUGEM を楽しむ 一覧
サポート
管理者ページ・マニュアル
FAQ
お知らせ
新着情報
メンテナンス情報
障害情報
おすすめブログ紹介
このページでは JavaScript を使用しています。JavaScript を有効にしてください。
ホーム
>
ブログデザイン一覧
>
ユーザー作成テンプレート「utf」
>
テンプレートHTML・CSSについて
公開されているテンプレートのHTMLに{ad}タグがないものありますので、エラーが表示された場合は{ad}タグを追加してご利用ください。
テンプレートの利用について
弊社が著作権を所有する画像等以外のテンプレートに関する著作権は制作者にあります。弊社提供以外のブログサービスで利用した場合は、その都度制作者の方にご確認ください。
テンプレート名 :
heart
テンプレートイメージ表示ページへ戻る
HTML・CSSをコピーして使う
HTML
<?xml version="1.0" encoding="euc-jp"?> <!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" 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" type="text/css" href="{site_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> </head> <body> <!-- header --> <div id="head"> <!-- BEGIN title --> <h1 id="pagetop" name="pagetop">{blog_name}</h1> <h2>{blog_description}</h2> <!-- END title --> </div> <!-- /header/ --> <!-- main --> <div id="main"> <!-- content --> <div id="content"> <!-- BEGIN entry --> <h3><span>{entry_month}.{entry_day}#</span><span class="title">{entry_title}</span></h3> <div class="body">{entry_description} <p class="more">{entry_sequel}</p> <ul class="foot"><li>{category_name} /</li><li>{comment_num} /</li><li>{trackback_num}</li></ul> </div> <!-- END entry --> <!-- BEGIN sequel --> <ul class="navi"><li>{prev_entry} /</li><li><a href="./">home</a> /</li><li>{next_entry}</li></ul> <!-- END sequel --> <!-- BEGIN comment_area --> <h3 id="comments"><span>comment</span></h3> <!-- BEGIN comment --> <div class="body">{comment_description} <ul class="foot"><li>{comment_time}</li><li>by {comment_name}</li></ul> </div> <!-- END comment --> <h3><span>post a comment</span></h3> <div class="body"> <form action="./?mode=comment" method="post"> <input type="hidden" name="entry_id" value="{entry_id}" /> <dl class="comment"> <dt><label for="name">name:</label></dt><dd><input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" style="width: 50%;" /></dd> <dt><label for="email">email:</label></dt><dd><input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" style="width: 50%;" /></dd> <dt><label for="url">url:</label></dt><dd><input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" style="width: 50%;" /></dd> <dt><label for="description">comments:</label></dt> <dd><textarea tabindex="4" id="description" name="description" style="width: 75%;height: 120px;"></textarea></dd> <dt><label for="set_cookie">cookie: </label><input type="checkbox" name="set_cookie" value="1" id="set_cookie" /></dt> </dl> <input type="submit" value="submit" /> </form> </div> <!-- END comment_area --> <!-- BEGIN trackback_area --> <h3 id="trackback"><span>trackback url</span></h3> <div class="body"> <input type="text" value="{trackback_url}" style="width: 98%;" /> </div> <h3><span>trackback</span></h3> <!-- BEGIN trackback --> <div class="body">{trackback_title}<br /> {trackback_excerpt} <ul class="foot"><li>{trackback_time}</li><li>by {trackback_blog_name}</li></ul> </div> <!-- END trackback --> <!-- END trackback_area --> <!-- BEGIN profile_area --> <h3><span>profile</span></h3> <div class="body">name: {profile_name} <p class="more">{profile_description}</p> </div> <!-- END profile_area --> <!-- BEGIN page --> <ul class="navi"><li>{prev_page_link}</li><li>{page_now}/{page_num}pages</li><li>{next_page_link}</li></ul> <!-- END page --> <p class="top"><a href="#pagetop">↑pagetop</a></p> <div id="footer">{copyright}</div> </div> <!-- /content/ --> <!-- side --> <div id="rightcolumn"> <!-- BEGIN calendar --> <h3><span>calendar</span></h3> <div class="body" style="text-align: center;"> {calendar2} </div> <!-- END calendar --> <!-- BEGIN freespace1 --> <h3><span class="title">{freespace_title1}</span></h3> <div class="body">{freespace_contents1}</div> <!-- END freespace1 --> <!-- BEGIN freespace2 --> <h3><span class="title">{freespace_title2}</span></h3> <div class="body">{freespace_contents2}</div> <!-- END freespace2 --> <!-- BEGIN freespace3 --> <h3><span class="title">{freespace_title3}</span></h3> <div class="body">{freespace_contents3}</div> <!-- END freespace3 --> <!-- BEGIN freespace4 --> <h3><span class="title">{freespace_title4}</span></h3> <div class="body">{freespace_contents4}</div> <!-- END freespace4 --> <!-- BEGIN freespace5 --> <h3><span class="title">{freespace_title5}</span></h3> <div class="body">{freespace_contents5}</div> <!-- END freespace5 --> <!-- BEGIN selected_entry --> <h3><span>recent entries</span></h3> <div class="body">{selected_entry_list}</div> <!-- END selected_entry --> <!-- BEGIN category --> <h3><span>category</span></h3> <div class="body">{category_list}</div> <!-- END category --> <!-- BEGIN archives --> <h3><span>archives</span></h3> <div class="body">{archives_list}</div> <!-- END archives --> <!-- BEGIN recent_comment --> <h3><span>recent comment</span></h3> <div class="body">{recent_comment_list}</div> <!-- END recent_comment --> <!-- BEGIN recent_trackback --> <h3><span>recent trackback</span></h3> <div class="body">{recent_trackback_list}</div> <!-- END recent_trackback --> <!-- BEGIN link --> <h3><span>link</span></h3> <div class="body">{link_list}</div> <!-- END link --> <!-- BEGIN profile --> <h3><span>profile</span></h3> <div class="body">{user_list}</div> <!-- END profile --> <!-- BEGIN amazon --> <h3><span>recommend</span></h3> <div class="body">{amazon_item}</div> <!-- END amazon --> <h3><span>others</span></h3> <!-- search --> <div class="body"> <form method="get" action="./"> <input id="search" name="search" style="width:110px" /> <input type="submit" value="Search" /> </form> </div> <!-- /search/ --> <div class="body"> <ul><li><a href="./admin/">Admin</a></li><li><a href="./?mode=rss">RSS1.0</a></li><li><a href="./?mode=atom">Atom0.3</a></li><li><a href="http://template.hapiriti.com/" title="ホームページ・ブログの無料テンプレート屋さん[happy*10]" target="_blank">Template by happy*10</a><!--著作権表示の削除禁止--></li></ul> </div> <!-- /side/ --> <div class="body2"> <div class="foot"> <!-- moblie --> {site_qrcode} <!-- //moblie --> <!-- BEGIN jugem_ad --> <br /><br />{ad} <!-- END jugem_ad --> </div></div></div> <br class="clear" /> </div> <!-- /main/ --> </body> </html>
CSS
/** ページ全体の装飾**/ * { margin: 0;padding: 0; font: 100%/1.8 'Osaka','Verdana',sans-serif; border: none;letter-spacing: 0.2em; scrollbar-face-color:#A89C86; scrollbar-highlight-color:#A89C86;scrollbar-shadow-color:#A89C86; scrollbar-3dlight-color:#A89C86; scrollbar-arrow-color:white;scrollbar-track-color:#d6cfc7; scrollbar-darkshadow-color:#A89C86; } /** フォント・背景画像指定**/ body { color: #5f5647; background-image: url("http://img-cdn.jg.jugem.jp/3cc/954392/20080731_4748.jpg"); } /** フォーム 装飾**/ input,textarea,select { padding: 1px;color: #6B5649; border: 1px solid #a69a84;background-color: #d6cfc7; } /** リンク 装飾**/ a { color: #4f473b;text-decoration: none;border-bottom: 1px dotted #858585; } a:hover { color: #6f6453;text-decoration: none;border-bottom: 1px dotted #645044; } /** 改行**/ br {letter-spacing: normal;} /** ヘッダ**/ div#head { width: auto;height: auto;padding: 80px 0px 0px 50px; background: url("http://img-cdn.jg.jugem.jp/3cc/954392/20080731_4747.jpg") repeat-x; } /** タイトル**/ h1 { width: 650px;height: auto;padding: 40px 0px 0px 70px; color: #41342C;font-size: 110%; background: url("http://img-cdn.jg.jugem.jp/3cc/954392/20080731_4742.jpg") no-repeat left center; } h1 a {font-family:'Georgia';border-bottom: none;} h1 a:hover {font-family:'Georgia';border-bottom: none;} /** サブタイトル**/ h2 { width: 650px;height: auto;padding: 0px 0px 0px 70px;font-weight:normal; color: #645044;font-size: 59.4%; } /** 段落**/ p {margin: 0px;padding: 5px;} /** 引用**/ blockquote {padding: 5px;background-color: #c2bbad;border: 1px dotted #41342C;} /** 罫線**/ hr {border: 1px dotted white;} /** 全体囲み**/ div#main { width: 720px;margin: 40px 0px 0px 50px; } /** メインカラム**/ div#content { margin-right: 30px;width: 450px;float:left; background-image: url("http://img-cdn.jg.jugem.jp/3cc/954392/20080731_4749.jpg"); } /** 右サイドカラム**/ div#rightcolumn { width: 240px;float:left; } /** エントリー タイトル**/ #content h3 { padding: 30px 0px 10px 10px; font-size: 65%;color: #4f4b45;font-weight: bold; background: url("http://img-cdn.jg.jugem.jp/3cc/954392/20080731_4744.jpg") repeat-x left top; } #content h3 span { padding-left: 20px;font-family:'Georgia'; background: url("http://img-cdn.jg.jugem.jp/3cc/954392/20080731_4743.jpg") no-repeat left center; } #content span.title {padding: 0;font-family:'Osaka','Verdana';background: none;} /** エントリー 記事**/ #content div.body { padding: 10px 18px 0;font-size: 59.4%; background-image: url("http://img-cdn.jg.jugem.jp/3cc/954392/20080731_4749.jpg"); } /** エントリー 追記**/ #content p.more { margin: 5px 0 0;padding: 0;color: #6B5649; } /** エントリー フッター**/ #content ul.foot { padding: 10px 0 5px;text-align: right; } #content ul.foot li { padding: 0 8px 0 0;display: inline; font-size: 95%;font-family:'Georgia'; } #content ul.foot a {color: #6f6961;border: none;font-family:'Georgia';} #content ul.foot a:hover {color: #8f8b86;font-family:'Georgia';} /** サイドメニュー タイトル**/ #rightcolumn h3 { padding: 30px 0 10px 10px; font-size: 59.4%;color: #4f4b45;font-weight: bold; background: url("http://img-cdn.jg.jugem.jp/3cc/954392/20080731_4744.jpg") repeat-x; } #rightcolumn h3 span { font-family:'Georgia';padding-left: 20px; background: url("http://img-cdn.jg.jugem.jp/3cc/954392/20080731_4743.jpg") no-repeat left center; } #rightcolumn span.title {font-family:'Osaka','Verdana';} /** サイドメニュー 記事**/ #rightcolumn .body { padding: 10px 10px;font-size: 59.4%; background-image: url("http://img-cdn.jg.jugem.jp/3cc/954392/20080731_4749.jpg"); } #rightcolumn .body2 { font-size: 59.4%; background-image: url("http://img-cdn.jg.jugem.jp/3cc/954392/20080731_4749.jpg"); } /** サイドメニュー リスト**/ #rightcolumn ul { padding: 0 0 0 20px; list-style-image: url(http://img-cdn.jg.jugem.jp/3cc/954392/20080731_5176.gif); } /** サイドメニュー フッター**/ #rightcolumn .foot { padding: 5px 10px 100px 10px;text-align: right; background: url("http://img-cdn.jg.jugem.jp/3cc/954392/20080731_4745.jpg") no-repeat left bottom; } /** コメント欄**/ .comment dd {padding-left: 7px;} .comment label {font-family:'Georgia';} /** カレンダー**/ .calendar { margin: 0 auto;text-align:center; border-collapse: separate;border-spacing: 0; } .calendar .calendar_month {font-family:'Georgia';} .calendar .weekday { padding: 2px;text-align:center;color: #6F6961;font-family:'Georgia'; border-bottom: 1px dotted #858585;border-top: 1px dotted #858585; } .calendar .cell { padding: 2px;text-align:center;font-family:'Georgia'; } .calendar .cell a {display: block;background-color: #bfb5a7;font-family:'Georgia';} .calendar .cell a:hover {display: block;background-color: #bfb5a7;font-family:'Georgia';} /** ページナビ**/ ul.navi { padding: 40px 20px 0; text-align: center;font-size: 55%; background-image: url("http://img-cdn.jg.jugem.jp/3cc/954392/20080731_4749.jpg"); } ul.navi li {padding: 0 8px 0 0;display: inline;font-family:'Georgia';} ul.navi a {font-family:'Osaka','Verdana';} ul.navi a:hover {font-family:'Osaka','Verdana';} /** トップリンク**/ p.top { padding: 10px 20px; text-align: right;font-size: 55%; background-image: url("http://img-cdn.jg.jugem.jp/3cc/954392/20080731_4749.jpg"); } p.top a {font-family:'Georgia';} /** フッター**/ div#footer { padding: 30px 20px 70px;text-align: center; font-size: 59.4%;font-family:'Georgia'; background-image: url("http://img-cdn.jg.jugem.jp/3cc/954392/20080731_4749.jpg");} /** 回り込み解除**/ .clear {width: 0.1em;height: 0.1em;clear: both;}
高品質デザイン選び放題で、あなた好みのブログに。今すぐブログ作成!
今すぐ
無料ブログ
をはじめよう! ≫
ブログ作成
利用規約
|
プライバシーポリシー
|
推奨環境
|
会社概要
|
サイトマップ
Copyright © 2003-2021 株式会社メディアーノ All Rights Reserved.
ページの先頭へ↑