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

ホーム

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

テンプレート名 : カスタマイズ用plain

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}" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<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>

</div>

<div class="entry_navi">
 {prev_entry} | <a href="./">main</a> | {next_entry} 
</div>

<div class="entry">
<div class="etitle">
<h2 class="entry_title">{entry_title}</h2> 
<span class="entry_date">{entry_date}</span> 
<br class="clear" />
</div>
<div class="entry_author">author : {user_name} </div> 
<div class="entry_body">{entry_description}</div> 
<a name="sequel"></a>

<div class="entry_more">

<a href="./?eid={entry_sequel_id}#sequel">read more...</a>


{entry_sequel_text}

</div>

<p class="entry_state">| {category_name} | {entry_time} | <a href="{entry_permalink}#comments">こめんと {comment_num_only}</a>
 | {trackback_num} |</p>
</div>
{trackback_auto_discovery}

<a name="comments"></a>
<div class="entry">
<h3 class="comment-title">Comment</h3>

<div class="entry_body">{comment_description}</div>
<p class="entry_state">| {comment_name} | {comment_time} |</p>

<h4 class="comment-title">Submit Comment</h4>

<div class="entry_body">
							<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
								<input type="hidden" name="entry_id" value="{entry_id}" style="width:200px;" class="form_color" />
								<label for="name">name:</label><br />
								<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" style="width:200px;" class="form_color" /><br />
								<label for="email">email:</label><br />
								<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" style="width:200px;" class="form_color" /><br />
								<label for="url">url:</label><br />
								<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" style="width:200px;" class="form_color" /><br />
								<label for="description">comments:</label><br />
								<textarea tabindex="4" id="description" name="description" rows="10" cols="50" style="width:300px;" class="form_color"></textarea><br />

<input tabindex="5" type="submit" value="Submit" onclick="javascript:setval();" class="button" />
								<input type="checkbox" name="set_cookie" value="1" id="set_cookie">
								<label for="set_cookie">Cookie</label>
							</form>
						</div>
					</div>

<a name="trackback"></a>
<div class="entry">
<h3 class="trackback-title">この記事のトラックバックURL</h3>
<div class="entry_body">{trackback_url}</div>
<h4 class="trackback-title">トラックバック</h4>

<h5 class="entry_title">{trackback_title}</h5>
<div class="entry_body">{trackback_excerpt}</div>
<p class="entry_state"> | {trackback_blog_name} | {trackback_time} | </p>

</div>

<div class="entry">
<h2 class="entry_title">{profile_name}</h2>
<div class="entry_body">{profile_description}</div>
</div>

<ul class="navi">
	<li class="prev">{prev_page_link}&nbsp;</li>
	<li class="num">{page_now}/{page_num}PAGES</li>
	<li class="next">&nbsp;{next_page_link}</li>
</ul>

<div class="copyright">

{copyright}

<div class="linktext"><a href="https://jugem.jp/" target="_blank">Powered by "JUGEM"</a></div>
<div class="linktext"><a href="#top">▲TOP</a></div>

{ad}

</div>

</div>
<div id="side">

<div id="sidemenu">

<h3 class="linktitle">CALENDAR</h3>
<div class="calendar">
<table border="0" cellpadding="0" cellspacing="1">
<tr align="center">
<td class="cell" style="color:#CC0000">S</td>
<td class="cell" style="color:#000000;">M</td>
<td class="cell" style="color:#000000;">T</td>
<td class="cell" style="color:#000000;">W</td>
<td class="cell" style="color:#000000;">T</td>
<td class="cell" style="color:#000000;">F</td>
<td class="cell" style="color:#0066CC">S</td>
</tr>
</table>
{calendar}
</div>

<h3 class="linktitle">
RECOMMEND
</h3>
<div class="linktext">
{amazon_item}
</div>

<h3 class="linktitle">SELECTED ENTRIES</h3>
<div class="linktext">
{selected_entry_list}
</div>

<h3 class="linktitle">CATEGORIES</h3>
<div class="linktext">
{category_list}
</div>

<h3 class="linktitle">ARCHIVES</h3>
<div class="linktext">
{archives_list}
</div>

<h3 class="linktitle">RECENT COMMENT</h3>
<div class="linktext">
{recent_comment_list}
</div>

<h3 class="linktitle">RECENT TRACKBACK</h3>
<div class="linktext">
{recent_trackback_list}
</div>

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

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

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

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

<h3 class="linktitle">{freespace_title5}</h3>
<div class="linktext">{freespace_contents5}</div>

<h3 class="linktitle">Mobile</h3>
<div class="linktext">{site_qrcode}</div>

<h3 class="linktitle">LINKS</h3>
<div class="linktext">
{link_list}
</div>

<h3 class="linktitle">PROFILE</h3>
<div class="linktext">
{user_list}
</div>

<form method="get" action="">
<div class="search">Search this site.<br />
<input id="search" name="search" size="15" style="width:120px" class="form_color" /><input type="submit" value="Search" class="button" />
</div>
</form>

<div class="linktext">
<ul>
<li><a href="./admin/">管理者ページ</a></li>
<li><a href="./?mode=rss">RSS1.0</a></li>
<li><a href="./?mode=atom">Atom0.3</a></li>
</ul>
</div>

</div>

</div>

</body>
</html>

CSS

/*------------------------------------------------
このテンプレートの著作権はtkに帰属します。
再配布とこのクレジットの削除はご遠慮ください。
またこのテンプレートを元にしてUTFでの配布テンプレを作ることを禁じます。
カスタマイズ方法については各項目の
前に書かれている設定方法をご参照ください。

タイトル画はhtml側の上の方に差し替え箇所を書いてあるので
そちらで確認なさってください。
タイトル画を記事部分とメニュー部分、両方の上にわたって広げたい場合も
htmlを見てください。

もこもこ画像は
記事部分は#main
サイドバー部分は#layoutで設定です。

左右のカラムを逆にしたい場合は
#layoutのbackground-positionのrightをleftに
#mainのfloatをleftからrightに
#sideのfloatをrightからleftに
書き換えれば変更できます。

css内に<STYLE>とか書いちゃだめですよ！！！！

http://nous.jugem.jp/
-------------------------------------------------*/

/*-------------------------------------------------
スクロールバーの色は以下で変更します。
項目が多いので適当に変えてみてください。
#666が灰色、#ffffffは白です。
また対応はIEのみとなります。
---------------------------------------------------*/

* {
margin: 0;
padding: 0;
scrollbar-arrow-color: #666; 
scrollbar-base-color: #FFFFFF; 
scrollbar-face-color: #FFFFFF; 
scrollbar-highlight-color: #666; 
scrollbar-3d-light-color: #FFFFFF;
scrollbar-shadow-color: #666; 
scrollbar-track-color: #FFFFFF; 
scrollbar-darkshadow-color: #FFFFFF; 
}

/*-------------------------------------------------
bodyについて
全体の背景と構造はbody以下で設定します。

・中央寄せをやめたい
→text-align:center;を削除

・背景画像を使いたい
→background-image:url();の()に画像のURLを記入

・背景画像がない場所の色を背景色を指定したい
→background-color:#fff;　のカラーコードを変更

・背景画像の繰り返しを指定
→background-repeat:no-repeat;　繰り返さない場合
　background-repeat:repeat-x;　横方向にのみ繰り返す
　background-repeat:repeat-y;　縦方向にのみ繰り返す
　background-repeat:repeat; 敷き詰める

・背景画像を固定する
→background-attachment:fixed;　そのまま。
　　　　　　　　　　　　　　　　固定しない場合は削除

・背景画像の位置を指定する。
→background-position:0 0;　左上固定
　background-position:100% 100%;　右下固定
　background-position:0 100%;　左下固定
  background-position:100% 0; 右上固定

・行間を変えたい。
→line-height:1.7の1.7の数字を変えてください。

・全体の文字色を変えたい
→color:#666の666を変えてください。

----------------------------------------------------*/

body {
margin: 0px auto;
padding: 0px;
text-align: center; 
font-size:12px;
background-image:url();
background-color:#fff;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
line-height:1.7;
color:#666;
}

/*-----------------------------------------
　#mainや#sideの数字を増やした時はここのwidthも増やしてください。
　本文とサイドの間の隙間を空けたい時も、widthを増やせば空きます。
----------------------------------------------*/

#wrapper {
margin:0 auto;
width: 720px;
text-align:left;
}

/*------------------------------------------------
　サイドバーのもこもこは以下のURLを書き換えてください。
----------------------------------------------------*/

#layout {
float:left;
background-image:url(http://img-cdn.jg.jugem.jp/767/427653/20070909_334419.png); 
background-position:top right;
background-repeat:repeat-y;
}

/*------------------------------------------------
　記事部分の設定
　好きな横幅をwidthにいれ、
　urlの次の()内に同じ横幅のもこもこ背景のURLをいれてください。
-----------------------------------------------*/

#main {
float: left;
width: 460px;
background-image:url(http://img-cdn.jg.jugem.jp/767/427653/20070909_334418.png);
background-repeat:repeat-y;
background-position:center top;
}

/*-----------------------------------------
　記事側のもこもこと中身が重なる場合は以下の15を増やしてください。
　もこもこを中身がはみ出ちゃう時は、逆に減らしたり
　タイトル画や記事内の画像が大きすぎないかチェックしてください。
--------------------------------------------*/

.entry,
.copyright {
margin: 0px;
padding: 0px 15px;
}

/*------------------------------------------------
　サイドバーの横幅設定
　好きな横幅をwidthに書き込んで下さい。
　もこもこ画像は↑のlayoutにて設定です。
-----------------------------------------------*/

#side {
float: right;
width: 240px;
}

/*------------------------------------------
　サイドバーのもこもこと中身が重なる時は、以下の20を増やしてください。
　もこもこを中身がはみ出ちゃう時は、逆に減らしたり
　中の画像などが大きすぎないかチェックしてください。
----------------------------------------------*/

#sidemenu {
padding:0 15px;
}

/*-------------------------------------------------
headerについて
#headerはブログのタイトル部分の設定になります。
タイトルはデフォルトではテスト画像です。
htmlでご自分のタイトル画に入れ替えてご使用下さい。

---------------------------------------------------*/

#header {
text-align:center;
}

a img {
border:none;
}

.clear {
clear:both;
}

h1 {
margin: 0px;
padding: 0px;
}

ul {
margin: 0px 0px 0px 15px;
padding: 0px;
list-style-type:none;
}

/*----------------------------------------------------
form_colorについて
.form_colorは検索入力窓や
コメントの入力部分のデザイン設定です。

・枠線の色や太さを変えたい。
→border部分を変更してください。
　1pxが太さ、 solidが直線　#000が色です。

・文字色を変えたい
　colorのカラーコードをかえてください。

・背景色を変えたい
→backgroundのカラーコードをかえてください。

-----------------------------------------------------*/

.form_color {
border:1px solid #D83056;
color:#000;
background: #ECECEC;
}

/*-----------------------------------------------------
aについて
aはリンク色です。
colorは色、text-decorationは下線のあるなしを指定してますので
カラーコードを変えたりunderlineとnoneを使い分けて下さい。
a:hoverはマウスオン時の挙動です。

-----------------------------------------------------*/

a { color: #E36F86; text-decoration: none; }
a:link		{ color: #E36F86; text-decoration: none; }
a:visited	{ color: #EA93A4; text-decoration: none; }
a:active	{ color: #EA93A4; text-decoration: none; }
a:hover		{ color: #999999; text-decoration: none; }

.site_title a {color: #666666;text-decoration: none;}
.site_title a:link {color: #666666;text-decoration: none;}
.site_title a:visited {color: #666666;text-decoration: none;}
.site_title a:active {color: #666666;text-decoration: none;}
.site_title a:hover {color: #666666;text-decoration: none;}

.site_title {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 24px;
color: #000000;
margin: 20px 0px 10px 0px;
padding: 0px;
}

.description {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 14px;
color: #666666;
margin: 0px 0px 25px 0px;
}

/*--------------------------------------------------
.entry_naviは個別ページ上部の
前のエントリと次のエントリに飛ぶリンクです。
文字の大きさや色はここで変えられます。
----------------------------------------------------*/

.entry_navi{
font-size: 12px;
color: #666666;
margin: 15px 0px 15px 0px;
text-align:center;
}

/*------------------------------------------
　記事タイトル下の点線の色は以下で調整できます。
------------------------------------------*/
.etitle {
margin-top:1em;
padding-bottom:2px;
border-bottom:1px dotted #F3C0CB;
}

/*------------------------------------------------------
.entry_dateは
エントリの日付部分です。
文字の大きさや色はここで変えられます。

--------------------------------------------------------*/

.entry_date {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 11px;
font-weight: normal;
margin: 0px 0px 0px 0px;
padding-bottom: 3px;
float:right;
}

/*--------------------------------------------------
.entry_titleはエントリタイトルです。
文字の大きさや色はここで変えられます。

・太字じゃなくしたい
→font-weightをbolderからnormalに。

・背景を表示したい
→backgroundタグをいれてください。
　背景の高さ分のheightを指定するのも忘れずに。

・題名の左にアイコンをつけたい時
　backgroundの行の()にアイコンのURLを入れ
　padding-left:の0pxをアイコンの横幅+3くらいの数字にしてください。

アイコン画像が上下切れてしまう時は
　height:○○px(アイコン画像の縦の高さ）の行を挿入。

アイコンと文字の高さをそろえたい時は
　padding-top:を3pxなどにして、この数字を調節して整えてください。

・下線いらない。
→border-bottom:1px dotted #F3C0CB;を削除してください。
--------------------------------------------------*/

.entry_title {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 12px;
font-weight: normal;
color: #666666;
margin: 0px 0px 0px 0px;
float:left;
background:url() no-repeat left bottom;
padding-left:0px;
}

/*----------------------------------------------------
.entry_bodyはエントリ本文です。
文字の大きさや色はここで指定できます。

・行間を調整したい
→line-height:170%;の170をいじってください。

・背景をつけたい
→background系指定を以下略。

・枠線をつけたい
→border指定をいれてください。
　border:1px solid #000;で４辺にでます。
  border-right,border-left,border-top,border-bottomで
　１辺ずつ指定できます。

・外側から余白をとりたい
→padding:○px;を指定してください。

--------------------------------------------------------*/

.entry_body {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 12px;
line-height: 170%;
color: #666666;
margin: 15px 5px 15px 5px;
}

/*------------------------------------------------------
.entry_authorは
エントリの作者名の部分です。
文字の大きさや色はここで変えられます。

・右寄せを解除したい。
→text-align: right;をleftやcenterにしてください

・作者名いらない。
→display:none;をかきこむ。

--------------------------------------------------------*/

.entry_author {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
color: #999999;
margin: 5px 0px 5px 0px;
text-align: right;
}

/*------------------------------------------------
.entry_moreは追記部分です。
設定の仕方はentry_bodyと一緒です
-------------------------------------------------*/
.entry_more {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 12px;
line-height: 170%;
color: #666666;
margin: 15px 0px 15px 0px;
}

/*-------------------------------------------------
.entry_stateはエントリのカテゴリや時間などの説明です。
基本はentry_authorと一緒の指定の仕方です。

・エントリとエントリの間に線を引きたい
→border-bottom:1px solid #000;と追加。
　色や太さは調節してください。

・左によせたい
→text-align:right;を削除
-------------------------------------------------*/

.entry_state {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 11px;
color: #666666;
margin: 15px 0px 30px 0px;
text-align:right;
}

/*-----------------------------------------------
blockquoteは引用部分の指定です。
文字の大きさや色、左のボーダーの指定がいじれます。
背景色を変えたい場合はbackgroun系指定をいれてください

-------------------------------------------------*/

blockquote {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 11px;
color: #666666;
margin: 20px 10px 20px 10px;
padding: 10px;
border-left: 3px solid #CCCCCC;
}

/*------------------------------------------
.comment-titleと.trackback-titleは
それぞれCommentやTrackbackなどの題字の指定です。
文字の大きさや色、下に引かれている点線などを
ここで調節できます。
entry_titleと基本は同じです。
-------------------------------------------*/

.comment-title {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 11px;
font-weight: normal;
color: #666666;
margin: 10px 0px 10px 0px;
padding-bottom: 3px;
border-bottom: 1px dotted #E36F86;
}

.trackback-title {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 11px;
font-weight: normal;
color: #666666;
margin: 10px 0px 10px 0px;
padding-bottom: 3px;
border-bottom: 1px dotted #E36F86;
}

/*---------------------------------------
.pictはJUGEMでアップロードした写真や画像の指定です。
枠線の色や太さなどが指定できます。

・枠線を無くしたい
→3行全部消して、border:none;と書いてください

---------------------------------------------*/
.pict {
border:none;
}

/*------------------------------------
 サイドバーの題名部分の設定です。
　文字の大きさや、色、下の点線の色などは
　ここで調節できます

サイドバータイトルの左にアイコンをつけたい時
　backgroundの行の()にアイコンのURLを入れ
　padding-left:の0pxをアイコンの横幅+3くらいの数字にしてください。

アイコン画像が上下切れてしまう時は
　height:○○px(アイコン画像の縦の高さ）の行を挿入。

アイコンと文字の高さをそろえたい時は
　padding-top:を3pxなどにして、この数字を調節して整えてください。
------------------------------------*/

.linktitle {
font-family: "Verdana";
font-size: 12px;
font-weight: bolder;
color: #999999;
line-height: 100%;
margin: 10px 10px 0px 0px;
border-bottom: 1px dotted #FFD2C1;
background:url() no-repeat left bottom;
padding-left:0px;
padding-top:0px;
padding-bottom:2px;
}

/*---------------------------------------
 サイドバーの中身部分の設定です。
　文字の大きさや色はここで変更できます
---------------------------------------*/

.linktext {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 11px;
color: #999999;
line-height: 170%;
margin: 5px 0px 15px 0px;
}

/*----------------------------------------------
 .searchは検索部分の設定になります。
　Search this site.の文字の大きさや色はここで指定できます。
　検索窓は.form_color searchボタンは.buttonで設定です。
------------------------------------------------*/

.search {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
color: #333333;
line-height: 170%;
margin: 20px 0px 5px 0px;
}

/*----------------------------------------------
buttonは検索やコメント送信のボタン部分になります。
基本的にはform_colorを同じようなデザイン設定ができます。

----------------------------------------------*/

.button {
border:1px solid #D83056;
background:#fff;
color:#333;
font-size:11px;
margin: 5px 0 0 5px;
}

/*----------------------------------------------
copyrightは最下部のJUGEMへのcopyrightリンクになります。
文字サイズや色をここで調節できます。
ブログのどこか1箇所からJUGEMにリンクすることは規約で決められています。
--------------------------------------------------*/

.copyright {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
font-size: 10px;
color: #333333;
line-height: 170%;
margin: 30px 15px 0px 15px;
padding-top: 10px;
text-align:center;
}

.calendar {
font-family: "Verdana";
font-size: 10px;
color: #666666;
margin: 5px 0 20px 0;
text-align:center;
}

.calendar table {
margin:0 auto;
}

.calendar_month {
font-family: "Verdana";
margin-bottom: 10px;
font-size: 10px;
color: #F666666;
}

.cell {
width: 20px;
height: 10px;
padding: 0px;
}

.jugem_bana{
	margin: 20px 1px 10px 0px;
}

/*-------------------------------------------
 エントリ下の次のページへのリンク部分です。
 PAGESなどの文字の大きさや色はここで変更できます。
------------------------------------------*/

ul.navi {
	margin: 40px 0 10px;
	list-style: none;
	text-align:center;
	font-size:11px;
}

ul.navi  li{
	display:inline;
}

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