無料ブログ作成なら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>
<script src="./template/analogue/menu.js" type="text/javascript"></script>
</head>

<h1 class="site_title"><a href="."><img src="http://img-cdn.jg.jugem.jp/767/427653/20070822_325641.jpg" alt="site_title" /></a></h1>

</div>

<!-- 公式テンプレanalogueのメニューを使用してあります。
メニューを削除したい場合はcssの.linkmenu項目を参照。

プロフィールページなど子ユーザーで作ったページにリンクしたい場合は
<a href="./?pid=1">メニュー</a>のように書き加えてください。
 -->
<div class="linkmenu">| 
		<a href="" onclick="return buttonClick(event, 'MENU1');">CALENDAR</a> | 
		<a href="" onclick="return buttonClick(event, 'MENU2');">RECOMMEND</a> | 
		<a href="" onclick="return buttonClick(event, 'MENU3');">ENTRY</a> | 
		<a href="" onclick="return buttonClick(event, 'MENU4');">COMMENT</a> | 
		<a href="" onclick="return buttonClick(event, 'MENU5');">TRACKBACK</a> | 
		<a href="" onclick="return buttonClick(event, 'MENU6');">CATEGORY</a> | 
		<a href="" onclick="return buttonClick(event, 'MENU7');">ARCHIVE</a> | 
		<a href="" onclick="return buttonClick(event, 'MENU8');">LINK</a> | 
		<a href="" onclick="return buttonClick(event, 'MENU9');">PROFILE</a> | 
		<a href="" onclick="return buttonClick(event, 'MENU10');">OTHERS</a>
	</div>

<div id="MENU1" class="MENU">
		<div class="calendar" align="center">
			<table border="0" cellspacing="1" cellpadding="0">
			<tr>
			<td class="weekday">S</td>
			<td class="weekday">M</td>
			<td class="weekday">T</td>
			<td class="weekday">W</td>
			<td class="weekday">T</td>
			<td class="weekday">F</td>
			<td class="weekday">S</td>
			</tr>
			</table>
			{calendar}
		</div>
		<div class="list_title">CALENDAR</div>

</div>

<div id="MENU2" class="MENU">
		
		<div class="list_text">
		{amazon_item}
		</div>
		
		<div class="list_title">RECOMMEND</div>
	</div>

<div id="MENU3" class="MENU">
		<div class="list_text">
		{latest_entry_list}
		</div>
		<div class="list_title">LATEST ENTRY</div>
	</div>

<div id="MENU4" class="MENU">
		<div class="list_text">
		{recent_comment_list}
		</div>
		<div class="list_title">RECENT COMMENT</div>
	</div>

<div id="MENU5" class="MENU">
		<div class="list_text">
		{recent_trackback_list}
		</div>
		<div class="list_title">RECENT TRACKBACK</div>
	</div>

<div id="MENU6" class="MENU">
		<div class="list_text">
		{category_list}
		</div>
		<div class="list_title">CATEGORY</div>
	</div>

<div id="MENU7" class="MENU">
		<div class="list_text">
		{archives_list}
		</div>
		<div class="list_title">ARCHIVE</div>
	</div>

<div id="MENU8" class="MENU">
		<div class="list_text">
		{link_list}
		</div>
		<div class="list_title">LINK</div>
	</div>

<div id="MENU9" class="MENU">
		<div class="list_text">
			{user_list}
		</div>
		<div class="list_title">PROFILE</div>
	</div>

<div class="f_t">{freespace_title1}</div>
			<div class="f_c">{freespace_contents1}</div>

<div class="f_t">{freespace_title2}</div>
			<div class="f_c">{freespace_contents2}</div>

<div class="f_t">{freespace_title3}</div>
			<div class="f_c">{freespace_contents3}</div>

<div class="f_t">{freespace_title4}</div>
			<div class="f_c">{freespace_contents4}</div>

<div class="f_t">{freespace_title5}</div>
			<div class="f_c">{freespace_contents5}</div>

<div class="f_t">MOBILE</div>
			{site_qrcode}
		</div>
		<div class="list_title">OTHERS</div>
	</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="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">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 class="copyright" align="center">{copyright}<br />
<a href="./admin">admin</a></div>
</div>

</div>

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

<div id="ad">

{ad}

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

CSS

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

タイトル画はhtml側の上の方に差し替え箇所を書いてあるので
そちらで確認なさってください。

両脇の背景画像（もこもこ）とカラム部分の横幅はcssの#layoutで変更可能です。

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の数値を変更してください。

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

・横の模様を変えたい。
→widthにあわせた横幅の背景画像を用意し
　backgroundのURL部分を入れ替えてください。

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

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

#layout {
width:500px;
margin: 0px auto;
text-align: left;
background:url(http://img-cdn.jg.jugem.jp/767/427653/20070822_325640.jpg) center repeat-y;
background-color: #ffffff;
}

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

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

#header {
text-align:center;
}

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

・縁取り背景と本文が重なっちゃう
→margin:0 15px;の15を増やしてください。

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

#contents {
margin:0 15px;
}

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

・本文を小窓スクロールを作って収納したい。
→#contents #main .pad内に
height:●●px;
overflow:auto;
padding:10px;
　の記述を入れてください。窓の高さはheightで調整です。

ただこれをやってメニューの中身が長い場合
下に空白ができちゃうことがあるので
その場合はどちらかというと
カスタマイズ用５の使用をお勧めします。
--------------------------------------------------*/

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

#contents #main .pad {
margin: 10px;
}

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

・リスト前の・を無くしたい
→list-style-type:none;と追加してください。

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

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

ul {
margin: 0px 0px 0px 15px;
padding: 0px;
}

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

/*----------------------------------------------------
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はブログのタイトルです。
デフォルトでは文字非表示です。
文字を表示されたい場合は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: 0px 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 15px;
}

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

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

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

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

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

.entry_title {
font-size: 12px;
font-weight: normal;
color: #666666;
margin: 15px 0px 15px 0px;
padding-bottom:3px;
border-bottom:1px dotted #F3C0CB;
}

/*----------------------------------------------------
.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: 12px;
font-weight: normal;
color: #666666;
margin: 10px 0px 10px 0px;
padding-bottom: 3px;
border-bottom: 1px dotted #CCCCCC;
}

.trackback-title {
font-size: 12px;
font-weight: normal;
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;
}

/*------------------------------
.linkmenuは上のクリックするメニュー部分の
設定になります。
文字の大きさや色はここで指定してください。
|の色はここで変えますが、文字色は
リンク指定のaで指定した色に準じます。

左右背景と重なる場合はmarginの2番目と
4番目の数字を調整してください。

・メニューがいらない場合
→display:none;
を書き込んでください。
--------------------------------*/

.linkmenu {
font-size:11px;
color:#999;
text-align:center;
margin : 1px 30px 20px 30px;
}

/*------------------------------
.MENUはクリックで開くメニュー部分の設定です。
背景色や枠線はここで指定してください。
それ以外の場所はあまり触らない方がいいです。
--------------------------------*/

.MENU {
visibility: hidden;
z-index: 999;
position: absolute;
width:180px;
margin-top:5px;
padding-top:5px;
background: #FFF;
border: 1px #B2B2B2 solid;
}

/*------------------------------------------------
list_titleは開いて出てくるメニューの項目名です。
フォントや文字の大きさや色が指定できます。

list_textはメニュー本文です。
やはりフォントが調整できます。
------------------------------------------------*/

.list_title {
font-family: "Verdana";
font-size: 12px;
font-weight: normal;
color: #666666;
line-height: 170%;
text-align:center;
}

.list_text{
font-size: 11px;
padding:5px 10px;
color: #666;
text-align:left;}

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

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

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

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

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

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

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

色などの設定は管理画面＞テンプレートの編集
＞広告設定から行います。
--------------------------------------------------*/
#ad {
width:100%;
text-align:center;
}

.links {
margin:0 auto;
padding-bottom:20px;
}

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