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

ホーム

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

テンプレート名 : fixed menu

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>
<script type="text/javascript"></script>
</head>

<div id="header">

<div id="side">

<div id="description"></div>

<div class="linkmenu"><a href="javascript:tree2('menu','menu1');">profile</a><br></div>

<div class="menu" id="menu1">

<div class="sideContents">
{freespace_contents1}
</div>

</div>

<div class="linkmenu"><a href="javascript:tree2('menu','menu2');">categories</a><br></div>

<div class="menu" id="menu2">

<div class="sideContents">
{category_list}
</div>

</div>

<div class="linkmenu"><a href="javascript:tree2('menu','menu3');">archives</a><br></div>

<div class="menu" id="menu3">

<div class="sideContents">
{archives_list2ex}
</div>

</div>

</div>

</div>

    

<div id="main">

<div class="entry">
<div class="entry_title">{entry_title}</div>
<div class="entry_date">{entry_date} {entry_time_only}</div>

<div class="entryBody">{entry_description}</div>
<a name="sequel"></a>
			
<div class="entryMore">{entry_sequel}</div>

<ul class="entryState">
<li>{category_name}</li>
<li>{comment_num}</li>
</ul>
			
<br class="clear" />
</div>

 

<a name="comments"></a>
		
<div id="comment">
<div id="commentTitle">コメント</div>

<div class="commentBody">{comment_description}</div>	
<ul class="commentState">
<li>{comment_name}</li>
<li>{comment_time}</li>
</ul>

<div id="commentSendTitle">コメントする</div>
<div class="commentSendForm">
<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
<input type="hidden" name="entry_id" value="{entry_id}" class="input" />

<label for="name">name:</label><br/>
<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" class="input" /><br />
           
<label for="email">email:</label><br>
<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="input" /><br /> 		            
<label for="url">url:</label><br>
<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="input" /><br />

<label for="description">comments:</label><br />
<textarea tabindex="4" id="description" name="description" rows="5"></textarea><br />
 		            
<input tabindex="5" type="submit" value="コメント送信"  onclick="javascript:setval();" />&nbsp;&nbsp;<input type="checkbox" name="set_cookie" value="1" id="set_cookie">&nbsp;<label for="set_cookie">入力情報を登録しますか？</label>
</form>
</div></div>

<div id="profile">
        	<div id="profileTitle">プロフィール</div>
        	<div id="profileName">{profile_name}</div>
        	<div id="profileBody">{profile_description}</div>
        </div>

<div id="entryNavi">
{prev_entry} | <a href="./">main</a> | {next_entry} 
</div>

		

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

		<br class="clear" />

</div>

<table id="footer" border="0" cellpadding="0" cellspacing="0">
<tr valign="bottom">
<td width="50%" nowrap>

Template by <a href="http://petitpecox.jugem.jp/" target="_blank">echica</a><br />
|&nbsp;<a href="./admin">Log in</a>&nbsp;|&nbsp;<a href="./?mode=rss">RSS1.0</a>&nbsp;|&nbsp;<a href="./?mode=atom">Atom0.3</a>&nbsp;|

</td>
<td width="50%" valign="bottom" align="right" nowrap>

<div id="ad">{ad}</div>

<div id="copyright">{copyright}</div>
</td></tr></table>

</div>

    
    
</body>
</html>

CSS

@charset "EUC-JP";

/* --------------------------------------
　リセット
--------------------------------------- */
 
br.clear {clear:both;}

/* --------------------------------------
　共通部分
--------------------------------------- */

/* ページ全体 */
body,td,th{
font-size:11px;
color:#999999;
font-family:'Verdana,HG平成角ｺﾞｼｯｸ体W3;
font-weight:normal;
line-height:15px;
margin:0px;
padding:0px;   
}

/* スクロールバーの設定 */ 
html,body{ 
scrollbar-base-color:#ffaaaa;
scrollbar-face-color:#ffaaaa;
scrollbar-track-color:white;
scrollbar-arrow-color:white;
scrollbar-3dlight-color:#ffaaaa;
scrollbar-highlight-color:#ffaaaa;
scrollbar-shadow-color:#ffaaaa;
scrollbar-darkshadow-color:#ffaaaa;
}

/* ページ全体のリンク色 */
a:link{color:#999999;text-decoration:none;}
a:visited{color:#999999;text-decoration:none;}
a:hover{color:#ffaaaa;text-decoration:none;}

/* リスト */
li {list-style-type:none;}

/* 画像 */
img {border:none;}

/* フォーム関連の設定 */
textarea{
font-size:11px;
line-height:15px;
padding:5px;
}
textarea,input{
color:#aaaaaa;
border:1px solid #ffaaaa;
background-color:white;
}

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

/* ページ全体の幅 */
#wrapper{
width:750px;
margin:0px auto;
padding:20px 0px 0px 0px;
text-align:left;
background-color:white;
}

/* ブログ名と説明文 */
#header{
width:200px;
height:180px;
float:right;
margin:30px auto 20px;
padding:5px;
background-color:#ffaaaa;
}

/*　動く部分　*/
#side{
position:fixed;
width:200px;
z-index:1;
margin:190px auto 20px auto;
}

/*　記事の部分*/
#main{
float:left;
width:500px;
padding:0 20px 0 0;
}

/*　フッター */
#footer{
width:100%;
clear:both;
}
 
 
/* --------------------------------------
　メイン
--------------------------------------- */

/* ブログ名の色 */
h1{
font-size:20px;
text-align:center;
margin:auto;}
h1:first-letter{color:#ffaaaa;}

/* ブログの説明文 */
div#description{margin:10px 0 0 0;padding:0 0 0 30px;}

/* 記事の設定*/
.entry{margin:0;}

/* 次の記事・前の記事 */
#entryNavi{
text-align:center;
margin-bottom:15px;
}

/* 記事のタイトル */
.entry_title{
color:#ffaaaa;
font-size:11px;
line-height:17px;
font-weight:bolder;
border-bottom:1px dashed #FFCCCC;
margin:0px;
padding:0px 0px 0px 10px;
}

/* 記事日付 */
.entry_date{
font-family:Verdana;
font-size:10px;
line-height:17px;
color:#ffaaaa;
text-align:right;
margin:0px 0px 25px 0px;
padding:0px 0px 0px 10px;
}

/* 記事本文 */
.entryBody{margin:15px 0 0 0;}

/* 記事の続き */
.entryMore{margin:10px 0 10px 0;}

/* 記事の情報 */
ul.entryState li{
display:inline;
border-left:1px solid #999999;
padding-left:5px;
}

/* コメント枠 */
#comment{
border:1px #999999 solid;
padding:20px;
margin-top:20px;
}
#commentTitle{
margin-bottom:5px;
font-size:12px;
font-weight:bolder;
}

#commentSendTitle{
margin:20px 0px 5px 0px;
font-size:12px;
font-weight:bolder;
}
	
.commentBody{margin:5px 0;}
ul.commentState{margin-bottom:15px;}
ul.commentState li{
display:inline;
border-left:1px solid #999999;
padding-left:5px;
}
.commentSendForm{margin:0px;}
.commentSendForm .input{width:250px;}
.commentSendForm textarea{width:350px;margin-bottom:10px;}

/* プロフィールのページ */
#profile{margin:0;}

#profileTitle{font-size:14px;font-weight:bolder;}
#profileName{margin:15px 0 0 0;}
#profileBody{margin:5px 0;}

/* --------------------------------------
　記事の装飾
--------------------------------------- */

/* 引用 */
#main blockquote{
border:1px dashed #cccccc;
padding:10px;
margin:10px;
}

/* --------------------------------------
　サイドメニュー
--------------------------------------- */

/* サイドメニューの内容 */
.sideContents{margin:0 0 20px 0;}

.linkmenu{
font-size:14px;
font-family:'Century Gothic';
margin:0 0 10px 0;
}

.menu{
display:none;
}

/* ----------------------------------------
 Footer
---------------------------------------- */
#ad{align:right;}

#footer{
width:500px;
margin-bottom:10px;
font-size:10px;
}

#copyright{
font-size:11px;
}

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