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

ホーム

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

テンプレート名 : Clean HTML5 - 1 Right Column

HTML・CSSをコピーして使う

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-JP">
<meta name="description" content="{blog_description}">
<title>{site_title}</title>
<link rel="stylesheet" href="{site_css}" type="text/css">

<link type="text/css" href="{gmo_header_css}" rel="stylesheet" media="screen,print">
<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 id="{index}{eid_num}{page_id_num}{cid_num}{month_yyyymm}{day_yyyymmdd}{search}{pid_num}" class="{eid}{page}{cid}{month}{day}{pid}" onload="javascript:initval();">
{gmo_header_src}

<a id="top"></a>

<div id="upperarea" class="outer">

<header role="banner" class="inner">
	<h1 id="blogtitle" class="title">{blog_name}</h1>
	<p id="desc">{blog_description}</p>

</header>
</div>

<div id="midarea" class="outer">

<div id="container" class="inner">

<div id="calendar">
			{calendar_horizontal}
		</div>

<div id="main">
			
			<div id="entry-nav">
			<a href="{prev_permalink}" title="前のエントリーへ">&#9668;&#9668;</a>  | <a href="./" title="ホームへ">△</a> | <a href="{next_permalink}" title="次のエントリーへ">&#9658;&#9658;</a>
			</div>

<article role="main" id="entry-{entryarea_id}" class="entry">
				<h2 id="entry-title-{entryarea_id}" class="entry-title title">{entry_title_link}</h2>
				<div id="entry-meta-{entryarea_id}" class="entry-meta">
					<ul id="entry-metalist-{entryarea_id}" class="entry-metalist metalist">
						<li class="the-time">{entry_eng_week_short}, {entry_year}/{entry_month}/{entry_day} at {entry_time_only}</li>
						<li class="the-category">Category: {category_name}</li>
						<li class="the-author">Posted by {user_name}</li>
					</ul>
				</div>
				<div id="entry-body-{entryarea_id}" class="entry-body">
					{entry_description}
					
                    <nav id="morelink-{entryarea_id}" class="morelink">
					<a href="./?eid={entry_sequel_id}#sequel" title="続きを読む">Read On &raquo;</a>
                    </nav>
					
                    
                    {entry_sequel_text}
                    
				</div>
				<aside id="entry-compliment-{entryarea_id}" class="entry-compliment">

					<div class="clearfix"></div>

<ul id="entry-status-{entryarea_id}" class="entry-status">
						<li>Comments: {comment_num}</li>
						<li>Trackbacks: {trackback_num}</li>
					</ul>
				</aside>
			</article>

{trackback_auto_discovery}

<a id="comments"></a>

<div id="comment-{comment_id}" class="comment">
					<div class="comment-body">{comment_description}</div>
					<ul id="comment-metalist-{comment_id}" class="comment-metalist metalist">
						<li>From: {comment_name}</li>
						<li>{comment_time}</li>
					</ul>
				</div>
				
    
				<h3 id="comment-form-title">コメントする</h3>
				<div id="comment-form-{entry_id}" class="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">

<p id="comment-form-url"><label for="url">Website:</label><br>
					<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="input"></p>

<p id="comment-form-comment"><label for="description">Comment:</label><br>
					<textarea tabindex="4" id="description" name="description" rows="5"></textarea></p>
					<p id="comment-form-cookie"><input tabindex="7" type="checkbox" name="set_cookie" value="1" id="set_cookie">&nbsp;<label for="set_cookie">入力情報を登録しますか？</label></p>
					<p id="comment-form-submit"><input tabindex="6" type="submit" value="投稿"  id="comment-submit" onclick="javascript:setval();"></p>

</form>
				</div>

</article>

<a id="trackback"></a>

<article role="complimentary" id="trackback-part" class="part">
                <h3 class="trackbacks-title title">トラックバック</h3>
                <div id="trackback-url" class="trackback-url"><p>このエントリーへのトラックバックURL<br><span>{trackback_url}</span><p></div>
                
                <div id="trackback-{trackback_id}" class="trackback number-{trackback_number_cycle}">
					<div class="trackback-name">{trackback_title}</div>
					<div class="trackback-body">{trackback_excerpt}</div>

<ul id="trackback-metalist-{trackback_id}" class="metalist">
						<li>{trackback_blog_name}</li>
						<li>{trackback_time_24}</li>
					</ul>

</div>
                
            </article>

<div id="profile" class="entry">
                <h2 id="entry-title-profile" class="entry-title title">About {profile_name}</h2>
                <div id="entry-body-profile" class="entry-body">{profile_description}</div>
            </div>

<div id="pager">
            {prev_page_link} | {page_now}/{page_num} | {next_page_link}
            </div>

</div>

<nav role="navigation" id="side">

<section id="widget-ad" class="widget">
				<h2 class="widget-title title">PR</h2>
				{ad}
            </section>

<section id="freespace-1" class="widget">
				<h2 class="widget-title title">{freespace_title1}</h2>
				{freespace_contents1}
            </section>

<section id="freespace-2" class="widget">
				<h2 class="widget-title title">{freespace_title2}</h2>
				{freespace_contents2}
            </section>

<section id="freespace-3" class="widget">
				<h2 class="widget-title title">{freespace_title3}</h2>
				{freespace_contents3}
            </section>

<section id="freespace-4" class="widget">
				<h2 class="widget-title title">{freespace_title4}</h2>
				{freespace_contents4}
            </section>

<section id="freespace-5" class="widget">
				<h2 class="widget-title title">{freespace_title5}</h2>
				{freespace_contents5}
            </section>

<section id="widget-profile" class="widget">
				<h2 class="widget-title title">Author</h2>
				<ul id="author-list">
					
					<li id="author-{user_item_id}" class="author"><a href="./?pid={user_item_id}">{user_item_name}</a></li>
					
				</ul>
            </section>

<section id="widget-latest" class="widget">
				<h2 class="widget-title title">Latest Entries</h2>
				<ul id="latest-entry-list">
					
					<li id="latest-entry-{latest_entry_item_id}" class="latest-entry"><a href="./?eid={latest_entry_item_id}">{latest_entry_item_title}</a><ul class="children"><li class="list-secondary">{latest_entry_item_year}/{latest_entry_item_month}/{latest_entry_item_day}</li></ul></li>
         	   
				</ul>
			</section>

<section id="widget-category" class="widget">
				<h2 class="widget-title title">Categories</h2>
				{category_list}
            </section>

<section id="widget-archive" class="widget">
				<h2 class="widget-title title">Archives</h2>
				{archives_list}
            </section>

<section id="widget-amazon" class="widget">
				<h2 class="widget-title title">Recommend</h2>
				{amazon_item}
            </section>

<section id="widget-comment" class="widget">
				<h2 class="widget-title title">Recent Comments</h2>
				<ul id="recent-comment-list">
					
					<li id="recent-comment-{recent_comment_item_comment_id}" class="recent-comment"><a href="./?eid={recent_comment_item_entry_id}#comments">{recent_comment_item_name}</a><ul class="children"><li class="list-secondary">"{recent_comment_item_title}"</li><li class="list-secondary">{recent_comment_item_year}/{recent_comment_item_month}/{recent_comment_item_day}</li></ul></li>
					
				</ul>
            </section>

<section id="widget-trackbacks" class="widget">
				<h2 class="widget-title title">Recent Trackbacks</h2>
				<ul id="recent-trackback-list">
					
					<li id="recent-trackback-{recent_trackback_item_trackback_id}" class="recent-trackback"><a href="./?eid={recent_trackback_item_entry_id}#trackback/">{recent_trackback_item_blog_name}</a><ul class="children"><li class="list-secondary">"{recent_comment_item_title}"</li><li class="list-secondary"> {recent_trackback_item_year}/{recent_trackback_item_month}/{recent_trackback_item_day}</li></ul></li>
					
				</ul>
            </section>

<section id="widget-links" class="widget">
				<h2 class="widget-title title">Links</h2>
				{link_list}
            </section>

<section id="widget-search" class="widget">
				<h2 class="widget-title title">Search</h2>
				<form method="get" action="./">
				<p id="form-search-label"><label for="search">Search for:</label></p>
				<p id="form-search-words"><input type="text" id="search" name="search" class="search"></p>
				<p id="form-search-submit"><input type="submit" value="Search"></p>
				</form>
            </section>

<section id="widget-mobile" class="widget">
				<h2 class="widget-title title">mobile</h2>
				{site_qrcode}
            </section>

<section id="widget-admin" class="widget">
				<h2 class="widget-title title">Administration</h2>
				<ul>
					<li><a href="./manage/">管理ページ</a></li>
					<li><a href="./?mode=rss">RSS1.0</a></li>
					<li><a href="./?mode=atom">Atom0.3</a></li>
				</ul>
            </section>
        </nav>

</div>
</div>

<div id="bottomarea" class="outer">

<footer role="contentinfo" class="inner">
	    <p id="credit"><small>{copyright}</small></p>
 	   <p id="powered">{powered}</p>
	</footer>

</div>

</body>
</html>

CSS

@charset "EUC-JP";
/**************************************************
*
* 作成日:2012.04.15
* テンプレート名: Clean HTML5 - 1 Right Column
* by krista (http://krista.jugem.jp)
* Instructions: see http://krista.jugem.jp/?eid=22
* Version: 1.0
* Last Modified Date: Mon, 2012/04/16
*
*
**************************************************/

/* =========== Reset =========== */

/**************************************************
*
*Thanks to HTML 5 Boilerplate (see: http://html5boilerplate.com/ )
*
**************************************************/
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{ display: block; }audio,canvas,video{ display: inline-block; *display: inline; *zoom: 1; }audio:not([controls]){ display: none; }[hidden]{ display: none; }html{ font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }html,button,input,select,textarea{ font-family: sans-serif; color: #222; }body{ margin: 0; font-size: 1em; line-height: 1.4; }::-moz-selection{ background: #fe57a1; color: #fff; text-shadow: none; }::selection{ background: #fe57a1; color: #fff; text-shadow: none; }a{ color: #00e; }
a:visited{ color: #551a8b; }a:hover{ color: #06e; }a:focus{ outline: thin dotted; }a:hover,a:active{ outline: 0; }abbr[title]{ border-bottom: 1px dotted; }b,strong{ font-weight: bold; }blockquote{ margin: 1em 40px; }dfn{ font-style: italic; }hr{ display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }ins{ background: #ff9; color: #000; text-decoration: none; }mark{ background: #ff0; color: #000; font-style: italic; font-weight: bold; }pre,code,kbd,samp{ font-family: monospace,serif; _font-family: 'courier new',monospace; font-size: 1em; }pre{ white-space: pre; white-space: pre-wrap; word-wrap: break-word; }q{ quotes: none; }q:before,q:after{ content: ""; content: none; }small{ font-size: 85%; }sub,sup{ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }sup{ top: -0.5em; }sub{ bottom: -0.25em; }ul,ol{ margin: 1em 0; padding: 0 0 0 40px; }dd{ margin: 0 0 0 40px; }nav ul,nav ol{ list-style: none; list-style-image: none; margin: 0; padding: 0; }img{ border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }svg:not(:root){ overflow: hidden; }figure{ margin: 0; }form{ margin: 0; }fieldset{ border: 0; margin: 0; padding: 0; }label{ cursor: pointer; }legend{ border: 0; *margin-left: -7px; padding: 0; white-space: normal; }button,input,select,textarea{ font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }button,input{ line-height: normal; }button,input[type="button"],input[type="reset"],input[type="submit"]{ cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled],input[disabled]{ cursor: default; }input[type="checkbox"],input[type="radio"]{ box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }input[type="search"]{ -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none; }button::-moz-focus-inner,input::-moz-focus-inner{ border: 0; padding: 0; }textarea{ overflow: auto; vertical-align: top; resize: vertical; }input:valid,textarea:valid{  }input:invalid,textarea:invalid{ background-color: #f0dddd; }table{ border-collapse: collapse; border-spacing: 0; }td{ vertical-align: top; }.chromeframe{ margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }@media only screen and (min-width: 35em){}.ir{ display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }.ir br{ display: none; }.hidden{ display: none !important; visibility: hidden; }.visuallyhidden{ border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{ clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }.invisible{ visibility: hidden; }.clearfix:before,.clearfix:after{ content: ""; display: table; }.clearfix:after{ clear: both; }.clearfix{ *zoom: 1; }@media print{*{ background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }a,a:visited{ text-decoration: underline; }a[href]:after{ content: " (" attr(href) ")"; }abbr[title]:after{ content: " (" attr(title) ")"; }.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{ content: ""; }pre,blockquote{ border: 1px solid #999; page-break-inside: avoid; }thead{ display: table-header-group; }tr,img{ page-break-inside: avoid; }img{ max-width: 100% !important; }@page{ margin: 0.5cm; }p,h2,h3{ orphans: 3; widows: 3; }h2,h3{ page-break-after: avoid; }}

/* /Boilerplate */
.clearfix:before, .clearfix:after {content:"\0020";display:block;height:0;visibility: hidden;} 
.clearfix:after {clear:both;}
.clearfix {zoom:1;}
p,dd,ul,ol {margin:0;padding:0;}
/* =========== /Reset =========== */

/* =========== テンプレート CSS ***カスタマイズはここから*** =========== */

/**************************************************
*
* 共通
*
**************************************************/
/* 全体 */
body {
	width:100%;
	font-size:12px;
	font-family: 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS P Gothic', 'Osaka', 'Helvetica', 'Arial', 'Gothic', sans-serif;
	line-height:1.4;
	background-color: #EEE;
	color:#036;
	margin:0;
	padding:0;
}

/* リンク */
a,
a:link,
a:visited {color:#09F;text-decoration:none;}
a:hover,
a:active {color:#666;text-decoration:none;}

/* 画像 */
img {max-width:98%;height:auto;border:0;}

/* フォント */
h1,h2,h3,h4,h5,h6 {font-weight:bold;font-size:100%;line-height:1.6em;margin-bottom:0.5em;}
small {font-size: 85%;}

/* フォーム */
input[type="text"] {clear:both;padding:0.25em 0.75em;margin:0.25em 0;border:inset #CCC;-webkit-border-radius: 15px;-moz-border-radius:15px;border-radius:15px;background:#FFF;}
input[type="text"]:hover,
input[type="text"]:focus {border-color:#999;}
input[type="submit"] {margin:0.25em;padding:0.25em;border:none;border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;font-weight:bold;background:#CCC;color:#FFF;cursor:hand;cursor:pointer; }
input[type="submit"]:hover,
input[type="submit"]:focus {background:#999;color:#FFF;}
textarea {width:90%;padding:0.5em;border:inset #CCC;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;background:#FFF;}
textarea:hover,
textarea:focus { border-color: #999; }

/**************************************************
*
* ページレイアウト
*
**************************************************/

.outer {width:100%;padding:0;clear:both;}
.inner {width:96%;max-width:800px;margin:0 auto;padding:1em;clear:both;}
#midarea {background:#FFF; padding: 1em 0;}
#container.inner {padding:0}

/* 2 カラム　右サイドバー */
#main {width:68%;float:left;padding:1em;}
#side {width:24%;float:right;padding:1em;}

/**************************************************
*
* ヘッダー
*
**************************************************/

/**************************************************
*
* サイドバー
*
**************************************************/

.widget {margin-bottom:2em;}
.widget li.list-secondary {text-align:right;}
.widget ul{list-style:disc outside;margin-left:1.5em;}
.widget ul.children{list-style-type:none;margin:0;padding:0;}

/* プロフィール */
ul#author-list {list-style-type:none;margin-left:0;}

/* 検索 */
input#search {width:80%;}
p#form-search-words,
p#form-search-submit {text-align:right;}

/**************************************************
*
* フッター
*
**************************************************/

footer {text-align:center;}
p#credit {margin:1em 0;}

/**************************************************
*
* メイン
*
**************************************************/

/*+++++  エントリー(アーカイブ表示) +++++*/
.entry {margin-bottom:5em;clear:both;border:solid thin #999;padding:1em;}
h2.entry-title {font-size:140%;}
.entry-meta {margin-bottom:1em;}
ul.metalist {list-style-type:none;text-align:right;}

/* 続きを読む */
.morelink {margin:2em 0;text-align:right;}

/* エントリー付随部分 (コメント・トラックバック数・ソーシャルボタン)*/
ul.entry-status {list-style-type:none;}
ul.social-buttons {margin-bottom:1em;padding:0;list-style-type:none;}
ul.social-buttons li {display:block;float:right;margin:0;padding-left:0.5em;}

/* ページャー */
#pager {text-align:center;}

/* カレンダー */
#calendar {text-align:center;}

/*+++++ エントリー(個別投稿表示) +++++*/
.eid .entry h2.entry-title a,
.eid .entry h2.entry-title a:link,
.eid .entry h2.entry-title a:visited,
.eid .entry h2.entry-title a:hover,
.eid .entry h2.entry-title a:active {color:#036;text-decoration:none;}

/* 前の記事・次の記事 */
#entry-nav {text-align:right;}

/* コメント送信フォーム */
input#name {width:30%;}
input#email {width:60%;}
input#url {width:60%;}
p#comment-form-submit {text-align:center;}

/*+++++ 装飾 +++++*/
h2.title {border-bottom:solid medium #999;}
h2.title:before{content:'*';font-size:200%;color:#09F;font-family:'Trebuchet MS',sans-serif;}
.entry-compliment {border-top:dotted thin #999;padding:0.5em;}

/**************************************************
*
* エントリー本文のスタイリング
*
**************************************************/
.entry-body p {margin-bottom:1em;}
.entry-body h1{font-size:180%;}
.entry-body h2{font-size:160%;}
.entry-body h3{font-size:140%;}
.entry-body h4{font-size:120%;}
.entry-body h5{font-size:100%;}
.entry-body h6{font-size:100%;}

.entry-body ul{list-style-type:disc;margin-left:1.5em;}
.entry-body ul ul,
.entry-body ul ul ul ul,
.entry-body ul ul ul ul ul ul {list-style-type:circle; margin-left:1.5em;}
.entry-body ul ul ul,
.entry-body ul ul ul ul ul {list-style-type:disc; margin-left:1.5em;}
.entry-body ol {list-style-type:decimal;margin-left:1.5em;}
.entry-body ol ol {list-style-type:upper-roman;margin-left:1.5em;}
.entry-body ol ol ol {list-style-type:upper-alpha;margin-left:1em;}
.entry-body ol ol ol ol {list-style-type:decimal-leading-zero;margin-left:.51em;}
.entry-body ol ol ol ol ol {list-style-type:lower-roman;margin-left:1.5em;}
.entry-body ol ol ol ol ol ol {list-style-type:lower-alpha;margin-left:1.5em;}

.entry-body dt{font-weight:bold;}
.entry-body dd{font-weight:normal;padding-left:1.5em;}

.entry-body blockquote {margin:1em;border-left:solid medium #999;padding-left:1em;}
.entry-body blockquote footer {text-align:right;}
.entry-body blockquote cite{/*font-style:italic;*/font-weight:bold;color:#999;}

/* インライン要素 */
.entry-body b,strong {font-weight:bold;}
.entry-body ins {background-color:#99FFFF;}
.entry-body del,
.entry-body s{text-decoration:line-through;}
.entry-body em,
.entry-body i {/*font-style:italic;*/font-weight:bold;color:#999;}

/* =========== /テンプレート CSS =========== */

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