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

ホーム

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

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

HTML・CSSをコピーして使う

HTML

<?xml version="1.0" encoding="{site_encoding}"?>
<!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-Script-Type" content="text/javascript" />
<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>

<!--　左メニューのリストです。
　
　・プロフィールページなどにリンクさせたい場合は
　　<li><a href="プロフィールページのURL">リンク名</a></li>
　という行を付け足します。

・リンク項目を画像にしたい場合は
　{freescape_title★}やNEW ENTRIESの部分をimg srcタグにしてください

・項目を削除したい場合は
　<li>から</li>まで削除してください　-->

<ul>
<li class="linktitle"><a href=".">Top</a></li>
<li class="linktitle"><a href="javascript:GetMenu('newentrys');">NEW ENTRIES</a></li>
<li class="linktitle"><a href="javascript:GetMenu('ctgs');">CATEGORIES</a></li>
<li class="linktitle"><a href="javascript:GetMenu('cmts');">COMMENTS</a></li>
<li class="linktitle"><a href="javascript:GetMenu('tbks');">TRACKBACKS</a></li>
<li class="linktitle"><a href="javascript:GetMenu('logs');">ARCHIVES</a></li>
<li class="linktitle"><a href="javascript:GetMenu('prof');">PROFILE</a></li>
<li class="linktitle"><a href="javascript:GetMenu('lnks');">LINKS</a></li>
<li class="linktitle"><a href="javascript:GetMenu('contents_etc');">RECOMMEND</a></li>
<li class="linktitle"><a href="javascript:GetMenu('sh_box');">SEARCH BOX</a></li>
<li class="linktitle"><a href="javascript:GetMenu('free1');">
{freespace_title1}</a></li>
<li class="linktitle"><a href="javascript:GetMenu('free2');">
{freespace_title2}</a></li>
<li class="linktitle"><a href="javascript:GetMenu('free3');">
{freespace_title3}</a></li>
<li class="linktitle"><a href="javascript:GetMenu('free4');">
{freespace_title4}</a></li>
<li class="linktitle"><a href="javascript:GetMenu('free5');">
{freespace_title5}</a></li>
</ul>

</div>

<div class="getlist" id="newentrys">
<div class="linktitle">NEW ENTRIES</div>
<div class="linktext">
{latest_entry_list}
</div>
</div>

<div class="getlist" id="ctgs">
<div class="linktitle">CATEGORIES</div>
<div class="linktext">
{category_list}
</div>
</div>

<div class="getlist" id="cmts">
<div class="linktitle">COMMENTS</div>
<div class="linktext">
{recent_comment_list}
</div>
</div>

<div class="getlist" id="tbks">
<div class="linktitle">TRACBACKS</div>
<div class="linktext">
{recent_trackback_list}
</div>
</div>

<div class="getlist" id="logs">
<div class="linktitle">ARCHIVES</div>
<div class="linktext">
{archives_list}
</div>
</div>

<div class="getlist" id="prof">
<div class="linktitle">PROFILE</div>
<div class="linktext">
{user_list}
</div>
</div>

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

<div class="linktitle">BLOG DATA</div>
<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 class="linktitle">MOBILE</div>
	<div class="linktext">{site_qrcode}</div>

</div>

<div class="linktitle">SEARCH BOX</div>
<div class="linktext" align="center">

<div id="searcharea">
<form method="get" action="">
<input type="text" id="search" name="search" size="20" style="width:130px" style="width:130px;" class="form_color" /><br />
<input type="submit" value="Search" class="button" style="width:135px;" />
</form>
</div>

</div>
</div>

{amazon_item}

</div>

<div class="getlist" id='free1'>
{freespace_contents1}
</div>

<div class="getlist" id='free2'>
{freespace_contents2}</div>

<div class="getlist" id='free3'>
{freespace_contents3}</div>

<div class="getlist" id='free4'>
{freespace_contents4}</div>

<div class="getlist" id='free5'>
{freespace_contents5}</div>

<p class="entry_navi">
 {prev_entry} + <a href="./">main</a> + {next_entry} 
</p>

<div class="entry">

<h2 class="entry_title">{entry_title}</h2>
<p class="entry_author">{entry_date} | author : {user_name} </p>

<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="6" cols="50" style="width:260px;" 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">Trackback URL</h3>
<p class="entry_body">{trackback_url}</p>
<h4 class="trackback-title">Trackback</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>

<p class="page">{prev_page_link}  + {page_now}/{page_num}PAGES +  {next_page_link}</p>

</div>

</div>
<br class="clear" />
</div>

<div id="ads">
<a href="http://jugem.jp/" target="_blank">JUGEM</a>|<a href="./admin">admin</a>

{ad}
</div>

</body>
</html>

CSS

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

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;
}

.clear {
clear: both;
font: 0px/0px sans-serif ;
}

a img {
border:none;
}

/*-------------------------------------------------
layoutについて
#layoutはヘッダー・メニュー・記事をあわせた部分の設定です。

・横幅を変えたい
→width:500px;　の500の数値を変更してください。
　ここはheader(タイトル部分）と同じ幅にし、更に
　side1(メニュー部分）とcontents(記事部分）の
　width(横幅）を足した数字以上にしてください。

・中央寄せをやめたい
→margin:0 auto;のautoを削除。
　右寄せにしたい場合はfloat:right;を代わりにいれるか
　margin:0 をmargin-left:左からの余白px;としてください。

・背景を敷きたい
→background関連項目をいれてください。
　基本はbody部分と一緒ですが、fixedはIEでは効きません。
　またheight:●●pxで背景画像以上の高さを指定してください

・上からの隙間をもっと開けたい。
→margin: 0px auto;の
　0pxを増やしてください。減らせば上にずれます。

・文章を中央寄せ・右寄せにしたい。
→text-align:left;のleftをcenterやrightに変えてください。

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

#layout {
width:500px;
margin: 0px auto;
text-align: left;
}

/*-------------------------------------------------
headerについて
#headerはブログのタイトル部分の設定になります。
タイトルを画像にする方が多いので
デフォルトでは文字のブログタイトルが
出ないようにしてあります。
文字のブログタイトルを出したい方はhtmlを編集してください。

・タイトル画像を張りたい。
→background-image:url(); の()にURLを記入してください。
　またwidth:500pxの500をタイトル画像の横幅より大きく、
　height:100px; の100をタイトル画像の高さより
　大きくしてください。

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

#header {
background-image:url(); 
background-repeat:no-repeat;
background-position:0 0;
width:500px;
height:100px;
}

/*----------------------------------------------
contentsについて
#contentsは記事部分の設定になります。

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

#contents {
float:right;
}

/*-----------------------------------------------
side1について
#side1は左のメニュー部分のデザイン設定になります。

メニュー項目を画像にしたり項目を変更したいときは
html側を編集してください。

・横幅を変えたい
→width:150px;の150の数字を変えてください。

・そもそも表示させたくないとき
→display:none;　を書き込んでください。
------------------------------------------------*/

#side1 {
float:left;
width:140px;
padding-top:10px;
}

/*-----------------------------------------------
mainとpadについて
#mainと #main .padはエントリ部分の設定になります。

・背景をつけたい
→background関連指定をいれてください。基本はbodyと
　一緒ですが、fixedはききません。
　スクロールバーを背景内にいれたい場合は
　#mainに背景指定をして、背景の高さ分
　height:○○px;指定をいれてください。
　また同時に.padにそれよりちょっと少ない数字で
　height指定をしてください。

スクロールバーを背景外に出したい時は
　#main.padに背景指定してください。

・横幅を変えたい。
→width:300pxの300を変えてください。

・小窓スクロール部分の高さを変えたい。
→.padのheight:300px;の300を変えてください。

・小窓スクロールしないようにしたい。
→.padのoverflow:auto;を削除してください。

・背景からもう一回り中身を小さくしたい
→.padのmargin:0px とpadding:10pxを増やして
　調節してください。

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

#contents #main {
clear:both;
width: 100%;
}

#contents #main .pad {
margin: 0px;
padding: 10px;
width:300px;
height:300px;
overflow:auto;
}

/*--------------------------------------------------
ulはリスト全般の指定をします。

・リスト前を画像にしたい。
→list-style-type:none;を削除し、
list-style-image:url(ここに画像アドレス);　を追加してください。

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

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

div, td {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";
}

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

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

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

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

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

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

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

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

a { color: #999966; text-decoration: underline; }
a:link		{ color: #336666; text-decoration: underline; }
a:visited	{ color: #999999; text-decoration: underline; }
a:active	{ color: #999999; text-decoration: none; }
a:hover		{ color: #999999; text-decoration: none; }

/*-------------------------------------------------------
.site_titleはブログのタイトルです。
デフォルトでは非表示です。
非表示を解除されたい場合はhtml側を編集ください。
.site_title aは色、
フォントや大きさ、太字の設定は.site_titleで行います。
.descriptionはブログの説明です。
---------------------------------------------------------*/

.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-size: 24px;
color: #000000;
margin: 20px 0px 10px 0px;
padding: 0px;
}

.description {
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;
}

.entry {
margin: 0px;
padding: 0px;
}

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

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

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

・題名の前にアイコンをつけたい。
→background-imageでアイコンのURLを指定し
　background-repeatでno-repeatに
　height:○○px;で画像の高さ分高さをとり、
　最後にpadding-left:○px;でアイコンの横幅よりちょっと大きく
　右にエントリタイトルをずらしてください。
　エントリタイトルを下にずらしたい場合は
  padding-topを指定してください。

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

.entry_title {
font-size: 14px;
font-weight: bolder;
color: #666666;
margin: 15px 0px 15px 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-size: 12px;
line-height: 170%;
color: #666666;
margin: 15px 1em 15px 0px;
}

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

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

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

.entry_author {
font-size: 10px;
color: #999999;
margin: 5px 1em 5px 0px;
text-align: right;
}

/*------------------------------------------------
.entry_moreは追記部分です。
設定の仕方はentry_bodyと一緒です

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

.entry_more {
font-size: 11px;
line-height: 170%;
color: #333333;
margin: 15px 1em 15px 0px;
}

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

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

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

.entry_state {
width:95%;
font-size: 11px;
color: #666666;
margin: 15px 1em 30px 0px;
padding-bottom:3px;
text-align:right;
}

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

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

blockquote {
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-size: 14px;
font-weight: bolder;
color: #666666;
margin: 10px 0px 10px 0px;
padding-bottom: 3px;
border-bottom: 1px dotted #CCCCCC;
}

.trackback-title {
font-size: 14px;
font-weight: bolder;
color: #666666;
margin: 10px 0px 10px 0px;
padding-bottom: 3px;
border-bottom: 1px dotted #CCCCCC;
}

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

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

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

.pict {
border-width: 1px;
border-style: solid;
border-color: #999;
}

/*------------------------------------------------
.pageはページ下部にある全体が何ページあって
次のページへのリンクが貼ってある部分の指定です。
文字の大きさや色を調節できます。

・中央寄せをやめたい
→text-align: center;をleftやrightにしてください。

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

.page {
font-size: 12px;
color: #666666;
padding: 10px 0px 0px 0px;
text-align: center;
}

/*-----------------------------------------------
.getlist_viewと.getlistは
メニューのクリックで開く部分になります。
widthで横幅の調整
heightで縦幅の調整が出き、
overflow:autoの削除でスクロールバーがなくなります。
.getlistを1つだけ.getlist_viewに
html側を書き換えることにより
最初からその項目を開いた状態にすることができます。
------------------------------------------------*/

.getlist_view {
font-family: "Verdana", "ＭＳ ゴシック", "Osaka";
margin:10px;
}

.getlist {
font-family: "Verdana", "ＭＳ ゴシック", "Osaka";
display: none; 
margin:10px;
}

/*------------------------------------------------
linktitleは上部下部メニュー共通の
項目名です。フォントや文字の大きさが指定できます。
基本はentry_titleと同じ変更ができます。
リンクになっているので色はここではなく
a項目の色に依存します。

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

.linktitle {
font-family: "Verdana";
font-size: 12px;
font-weight: normal;
color: #666666;
line-height: 170%;
margin: 0px;
}

/*----------------------------------------------
linktextは下のメニューのクリックで開かれる部分になります。
文字の大きさや色、行間や余白はここで指定できます。
-----------------------------------------------*/

.linktext {
font-size: 11px;
color: #999999;
line-height: 170%;
margin: 5px 0px 25px 2px;
}

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

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

.button {
border:1px solid #fff;
background:#eee;
color:#333;
	margin: 5px 0 0 0;
}

/*----------------------------------------------
copyrightは最下部のJUGEMへのcopyrightリンクになります。
文字サイズや色、上の点線をここで調節できます。

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

.copyright {
font-size: 10px;
color: #333333;
line-height: 170%;
border-top: 1px dotted #CCCCCC;
margin: 30px 0px 0px 0px;
padding-top: 10px;
}

/*----------------------------------------------
これはJUGEMの広告の位置指定になります。
これを小窓内にいれたり消したりするのは
規約違反でブログが削除されます

色などの設定は管理画面＞テンプレートの編集
＞広告設定から行います。
--------------------------------------------------*/

#ads {
width:90%;
text-align:center;
margin-top:30px;
}

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