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

ホーム

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

テンプレート名 : Pattern01

HTML・CSSをコピーして使う

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset={site_encoding}">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="description" content="">
<link rel="stylesheet" href="{site_css}" type="text/css">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{site_rss}">
<link rel="alternate" type="application/atom+xml" href="{site_atom}">
<title>{site_title}</title>
</head>
<body>
<a name="pagetop"></a>

<div id="TopTitle">{blog_name}</div>

<DIV class="EntryTitle"><A href="{entry_permalink}">{entry_title}</A></DIV>

<DIV class="EntryHeader">{entry_date} {entry_time} - {category_name}</DIV>

<DIV class="EntryText">{entry_description}</DIV>
<DIV class="EntryText">{entry_sequel}</DIV>

<DIV class="EntryFooter">{trackback_num}　{comment_num}</DIV>
{trackback_auto_discovery}

<div class="PageLinkBlock"><a href="{prev_permalink}" title="ひとつ前の記事「{prev_title}」">PREV ENTRY</a> | <a href="./">MAIN</a> | <a href="{next_permalink}" title="ひとつ先の記事「{next_title}」">NEXT ENTRY</a></div>

<a name="comments"></a>
<DIV class="CommentMenuTitle">COMMENT</DIV>

<DIV class="CommentTextBox">
<DIV class="CommentText">{comment_description}</DIV>
<DIV class="CommentFooter">{comment_name} | {comment_time}</DIV>
</DIV>

<DIV class="CommentMenuTitle">COMMENT FORM</DIV>

<div align="center"><DIV class="CommentFormBox">
NAME<BR><INPUT class="CommentForms" name="name"><BR>
MAIL<BR><INPUT class="CommentForms" name="email"><BR>
URL<BR><INPUT class="CommentForms" name="url"><BR>
COMMENT<BR>
<TEXTAREA class="CommentForms" name="description" cols="40" rows="4"></TEXTAREA><BR>
<INPUT class="CommentFormSubmit" type="submit" value="SUBMIT">
</DIV></div>

</FORM></DIV>

<a name="trackback"></a>
<DIV class="CommentMenuTitle">TRACKBACK</DIV>

<div class="CommentTextBox">
<div class="TrackbackTitle">{trackback_title}</div>
<div class="CommentText">{trackback_excerpt}</div>
<div class="CommentFooter">from {trackback_blog_name} | {trackback_time}</div>
</div>

<DIV class="CommentMenuTitle">TRACKBACK ADDRESS</DIV>
<DIV class="TrackbackURLBox"><input id="TrackbackURL" value="{trackback_url}" onclick="this.select(0,this.value.length)" readonly></DIV>

<div class="CommentMenuTitle">About</div>
<div class="EntryText">管理人 →<br>{profile_name}</DIV>
<div class="EntryText">{profile_description}</div>
<DIV class="EntryFooter"><A href="javascript:%20history.back()">BACK</a></DIV>

<DIV class="PageLinkBlock"><a href="{prev_page_url}" title="前のページ">PREV PAGE</a> | {page_now}/{page_num} | <a href="{next_page_url}" title="次のページ">NEXT PAGE</a></DIV>

</TD><TD width="30"> </TD><TD class="PluginBlock">

<DIV id="AdminLink">
<A href="./admin/" target="_blank">ADMIN</A> | <A href="./admin/?mode=entry" target="_blank">WRITE</A>
</DIV>

<div class="PluginInnerBlock">
<div class="PluginTitle">SEARCH THIS SITE</div>
<div class="PluginContents"><div align="center">
<form action="./?search" method="get">
<input name="search" class="box"><input type="submit" value="SEARCH" class="btn">
</form></div></div>

<div class="PluginInnerBlock">
<div class="PluginTitle">CALENDAR</div>
<DIV class="calendar" align="center">
<TABLE cellpadding=0 cellspacing=1><TR align="center">
<td class="cell_sun">S</td>
<td class="cell_w">M</td>
<td class="cell_w">T</td>
<td class="cell_w">W</td>
<td class="cell_w">T</td>
<td class="cell_w">F</td>
<td class="cell_sat">S</td>
</TR></TABLE>
{calendar}
</DIV></div>

<div class="PluginInnerBlock">
<div class="PluginTitle">LATEST ENTRY</div>
<div class="PluginContents">{latest_entry_list}</div>
</div>

<div class="PluginInnerBlock">
<div class="PluginTitle">SELECTED ENTRY</div>
<div class="PluginContents">{selected_entry_list}</div>
</div>

<div class="PluginInnerBlock">
<div class="PluginTitle">CATEGORY</div>
<div class="PluginContents">{category_list}</div>
</div>

<div class="PluginInnerBlock">
<div class="PluginTitle">RECENT COMMENTS</div>
<div class="PluginContents">{recent_comment_list}</div>
</div>

<div class="PluginInnerBlock">
<div class="PluginTitle">RECENT TRACKBACK</div>
<div class="PluginContents">{recent_trackback_list}</div>
</div>

<div class="PluginInnerBlock">
<div class="PluginTitle">ARCHIVES</div>
<div class="PluginContents">{archives_list}</div>
</div>

<div class="PluginInnerBlock">
<div class="PluginTitle">LINKS</div>
<div class="PluginContents">{link_list}</div>
</div>

<div class="PluginInnerBlock">
<div class="PluginTitle">RECOMMEND</div>
<div class="PluginContents">{amazon_item}</div>
</div>

<div class="PluginInnerBlock">
<div class="PluginTitle">ABOUT</div>
<div class="PluginContents">{user_list}</div>
</div>

<div class="PluginInnerBlock">
<div class="PluginTitle">SPONSORED LINKS</div>
<div class="PluginContents"><div align="center">{ad}</div>
</div></div>

<div class="PluginInnerBlock">
<div class="PluginTitle">RECENT PLAY</div>
<div class="PluginContents">{itune_recent}</div>
</div>

<div class="PluginInnerBlock">
<div class="PluginTitle">FREQUENT PLAY</div>
<div class="PluginContents">{itune_frequent}</div>
</div>

<div class="PluginInnerBlock">
<div class="PluginTitle">RSS READER</div>
<div class="PluginContents">

<div style="padding:5px"><a href="{rss_link}" target="_blank">{rss_title}</div>{rss_list}<br>

</div></div>

<div class="PluginInnerBlock">
<div class="PluginTitle">OTHERS</div>
<div class="PluginContents"><ul>
<li><a href="./?mode=rss">RSS1.0</a>
<li><a href="./?mode=atom">Atom0.3</a>
<li><a href="http://jugem.jp/">Powered by JUGEM</a>
<li><a href="http://mama.oops.jp/" target="_blank">Designed by TABLE ENOCH</A>
</ul></div></div>

<div class="PluginInnerBlock">
<div class="PluginTitle">QRCODE</div>
<div class="PluginContents"><div align="center">{site_qrcode}</div>
</div></div>

</TD></TR></TABLE>

</BODY></HTML>

CSS

Template name 「Pattern01」
   CSS by TABLE ENOCH   http://mama.oops.jp/
   Ver.2007/03/17/JUGEM

/*******************************************************************************
全ブロックの共通設定
*******************************************************************************/
/*BODY全体に関する設定*/
BODY{
  margin:0 ;
  scrollbar-3dlight-color:#000000 ;
  scrollbar-darkshadow-color:#000000 ;
  scrollbar-highlight-color:#ffffff ;
  scrollbar-shadow-color:#ffffff ;
  scrollbar-arrow-color:#000000 ;
  scrollbar-face-color:#ffffff ;
  scrollbar-track-color:#f5f5f5 ;
  background-color:#ffffff ;
}

/*全体の設定*/
#mainBlock{
  margin-left:20px ;
  width:580px ;
}

/*テキスト左寄せ*/
.left {
  text-align:left;
}
/*テキスト中央寄せ*/
.center {
  text-align:center;
}
/*テキスト右寄せ*/
.right {
  text-align:right;
}

/*******************************************************************************
トップブロック用デザイン
*******************************************************************************/
/*ページタイトル文字部分の設定*/
#TopTitle{
  font:12px Verdana ;
  color:#000000 ;
  letter-spacing:2px ;
  margin-top:10px ;
  text-align:center ;
}
#TopTitle A{
  color:#000000 ;
  text-decoration:none ;
}
#TopTitle A:HOVER{
  background-color:#efefef ;
}
/*ページタイトルの下に来るブログの説明文書*/
#TopExplanation {
  font:10px Verdana ;
  color:#999999 ;
  letter-spacing:1.4px ;
  margin-bottom:10px ;
  padding:8px ;
  text-align:center ;
}

/*******************************************************************************
フッターブロック用デザイン
*******************************************************************************/
/*一番下のブロック（著作権表示が書かれる場所）の設定*/
#FooterBlock{
  font:10px Verdana ;
  color:#000000 ;
  letter-spacing:1.2px ;
  line-height:200% ;
  margin-top:30px ;
  margin-bottom:30px ;
  clear:both ;
  text-align:center ;
}
#FooterBlock A{
  color:#000000 ;
  text-decoration:none ;
}
#FooterBlock A:HOVER{
  color:#999999 ;
  position:relative ;
  left:2px ; top:2px ;
}

#AdminLink{
  text-align:center ;
  padding:10px ;
  font:10px Verdana ;
  color:#000000 ;
}
#AdminLink A{
  color:#000000 ;
  text-decoration:none ;
}
#AdminLink A:HOVER{
  color:#999999 ;
  position:relative ;
  left:2px ; top:2px ;
}

/*******************************************************************************
  記事ブロック用デザイン
*******************************************************************************/
/*記事繰り返し処理全ての部分の設定*/
#EntryBlock{
  border-left:solid 1px #000000 ;
  border-right:solid 1px #000000 ;
  background:#ffffff ;
  width:350px ;
  overflow:hidden ;
  text-align:left ;
}

/*各記事タイトル部分の設定*/
.EntryTitle{
  font:10px Verdana ;
  color:#000000 ;
  letter-spacing:2px ;
  margin-left:5px ;
  margin-top:20px ;
  text-align:left ;
  width:345px ;
  overflow:hidden ;
}
.EntryTitle A{
  color:#000000 ;
  text-decoration:none ;
}
.EntryTitle A:HOVER{
  color:#666666 ;
}

/*記事を投稿した日・記事のカテゴリ名が記載されている部分*/
.EntryHeader{
  font:10px Verdana ;
  color:#000000 ;
  background-color:#f5f5f5 ;
  border-top:dashed 1px #000000 ;
  border-bottom:dashed 1px #000000 ;
  padding-top:1px ;
  padding-bottom:2px ;
  margin-top:5px ;
  padding-right:8px ;
  margin-bottom:10px ;
  text-align:right ;
}
.EntryHeader A{
  color:#000000 ;
  text-decoration:none ;
}
.EntryHeader A:HOVER{
  color:#666666 ;
}

/*記事本文・追記文書が記載される部分*/
.EntryText{
  font:10px Verdana ;
  color:#000000 ;
  line-height:18px ;
  margin:10px ;
  text-align:left ;
  width:330px ;
  overflow:hidden ;
}
.EntryText A{
  color:#000000 ;
  text-decoration:none ;
  border-bottom:dashed 1px #cccccc ;
}
.EntryText A:HOVER{
  color:#666666 ;
}

/*記事へのリンク（コメントやトラックバック等）の背景*/
.EntryFooter{
  font:10px Verdana ;
  color:#000000 ;
  letter-spacing:1.4px ;
  border-top:dashed 1px #000000 ;
  border-bottom:dashed 1px #000000 ;
  padding-top:1px ;
  padding-right:5px ;
  padding-bottom:2px ;
  margin-top:10px ;
  margin-bottom:50px ;
  text-align:right ;
}
.EntryFooter A{
  color:#000000 ;
  text-decoration:none ;
}
.EntryFooter A:HOVER{
  color:#666666 ;
}

/*次の記事やHOMEへのリンクが表示される背景部分*/
.PageLinkBlock{
  font:10px Verdana ;
  color:#999999 ;
  letter-spacing:1.4px ;
  margin-top:20px ;
  margin-bottom:20px ;
  text-align:center ;
}
.PageLinkBlock A{
  color:#000000 ;
  text-decoration:none ;
}
.PageLinkBlock A:HOVER{
  color:#999999 ;
  position:relative ;
  top:2px ; left:2px ;
}

/*******************************************************************************
  各コメント表示部分の設定
*******************************************************************************/
/*この記事にコメントする　と書かれてる部分の設定*/
.CommentMenuTitle{
  font:10px Verdana ;
  color:#000000 ;
  letter-spacing:2px ;
  background-color:#f5f5f5 ;
  border-top:dashed 1px #000000 ;
  border-bottom:dashed 1px #000000 ;
  padding-top:1px ;
  padding-left:5px ;
  padding-bottom:1px ;
  margin-top:30px ;
  margin-bottom:10px ;
  text-align:left ;
}

/*コメントのタイトル、コメント、コメント情報の全ての背景部分*/
.CommentTextBox{
  margin-bottom:10px ;
  border-bottom:dashed 1px #cccccc ;
  padding:10px ;
}

/*コメントのタイトル部分*/
.CommentTitle{
  font:10px Verdana ;
  color:#000000 ;
  letter-spacing:2px ;
  margin-bottom:10px ;
  text-align:left ;
}

/*コメント部分*/
.CommentText{
  font:10px Verdana ;
  color:#000000 ;
  letter-spacing:2px ;
  line-height:14px ;
  margin-top:5px ;
  text-align:left ;
}
.CommentText A{
  color:#000000 ;
  text-decoration:none ;
  border-bottom:dashed 1px #999999 ;
}
.CommentText A:HOVER{
  color:#666666 ;
}

/*投稿者や投稿時間などが表示されている部分*/
.CommentFooter{
  font:10px Verdana ;
  color:#000000 ;
  margin-top:5px ;
  text-align:right ;
}
.CommentFooter A{
  color:#000000 ;
  text-decoration:none ;
  border-bottom:dashed 1px #000000 ;
}
.CommentFooter A:HOVER{
  color:#666666 ;
}

/*コメントを投稿するフォーム全体の設定*/
.CommentFormBlock{
  margin:10px ;
  text-align:center ;
}

/*コメントフォームTHタグ設定*/
.CommentFormBox{
  font:10px Verdana ;
  color:#000000 ;
  width:260px ;
  text-align:right ;
  padding-top:10px ;
}

/*inputタグやtextareaの設定*/
.CommentForms{
  font:10px Verdana ;
  color:#000000 ;
  width:250px ;
  border:solid 1px #666666 ;
  background:#ffffff ;
  margin-bottom:3px ;
}

/*コメントフォーム送信ボタン*/
.CommentFormSubmit{
  font:10px Verdana ;
  color:#000000 ;
  width:90px ;
  height:18px ;
  margin-top:8px ;
  border:solid 1px #666666 ;
  background-color:#ffffff ;
}

/*コメント編集ブロック*/
.CommentEditBlock{
  background-color:#ffffff ;
}

TEXTAREA{
  scrollbar-3dlight-color:#ffffff ;
  scrollbar-darkshadow-color:#ffffff ;
  scrollbar-highlight-color:#ffffff ;
  scrollbar-shadow-color:#ffffff ;
  scrollbar-arrow-color:#cccccc ;
  scrollbar-face-color:#ffffff ;
  scrollbar-track-color:#ffffff ;
}

/*******************************************************************************
  トラックバック表示部分の設定
*******************************************************************************/
/*トラックバックタイトルの部分*/
.TrackbackTitle{
  font:10px Verdana ;
  color:#000000 ;
  letter-spacing:2px ;
  text-align:left ;
}
.TrackbackTitle A{
  color:#000000 ;
  text-decoration:none ;
  border-bottom:dashed 1px #cccccc ;
}
.TrackbackTitle A:HOVER{
  color:#666666 ;
}
/*インプットのBOX内*/
.TrackbackURLBox{
  margin-bottom:50px ;
  text-align:center ;
}
/*インプット*/
#TrackbackURL{
  font:10px Verdana ;
  color:#000000 ;
  letter-spacing:1.2px ;
  border:0 ;
  width:300px ;
  text-align:center ;
}

/*******************************************************************************
  カレンダープラグイン用デザイン
*******************************************************************************/
/*カレンダー日付移動用テーブル（前月、次月へのリンクなど）*/
.calendar_month {
  font:10px Verdana ;
  color:#000000 ;
  padding-top:10px ;
}
.calendar_month A{
  color:#000000 ;
  text-decoration:none ;
}
.calendar_month A:HOVER{
  color:#999999 ;
  position:relative ;
  top:2px ; left:2px ;
}

/*-------------------------------------------------------
  カレンダーテーブル -> 曜日表示部分デザイン
-------------------------------------------------------*/
.calendar {
  margin-top:10px ;
}
/*曜日表示部分、日曜日の<th>タグ部分デザイン*/
.cell_sun {
  width:22px ;
  font:10px Verdana ;
  color:#999999 ;
  padding-bottom:5px ;
}
/*曜日表示部分、平日の<th>タグ部分デザイン*/
.cell_w {
  width:22px ;
  font:10px Verdana ;
  color:#999999 ;
  padding-bottom:5px ;
}
/*曜日表示部分、土曜日の<th>タグ部分デザイン*/
.cell_sat {
  width:22px ;
  font:10px Verdana ;
  color:#999999 ;
  padding-bottom:5px ;
}

/*日付表示部分、平日曜日の<td>タグ部分デザイン*/
.cell {
  width:22px ;
  font:10px Verdana ;
  color:#cccccc ;
}
/*記事が存在する場所の設定*/
.cell A{
  color:#000000 ;
  text-decoration:none ;
}
.cell A:HOVER{
  color:#999999 ;
}

/*******************************************************************************
  プラグインブロック用デザイン
*******************************************************************************/
/*プラグイン表示箇所全体の設定*/
.PluginBlock{
  border-left:solid 1px #000000 ;
  border-right:solid 1px #000000 ;
  background:#ffffff ;
  width:220px ;
  overflow:hidden ;
}

/*プラグイン表示箇所の背景や余白設定*/
.PluginInnerBlock{
  margin-bottom:20px ;
}

/*プラグインのタイトル（名称）部分の設定*/
.PluginTitle {
  font:10px Verdana ;
  color:#000000 ;
  letter-spacing:1.4px ;
  background-color:#f5f5f5 ;
  border-top:dashed 1px #000000 ;
  border-bottom:dashed 1px #000000 ;
  padding-top:1px ;
  padding-left:8px ;
  padding:right:5px ;
  padding-bottom:1px ;
  margin-bottom:5px ;
}
/*プラグインが表示される場所の設定*/
.PluginContents {
  padding:6px ;
}
/*各プラグイン処理内の基本デザイン*/
.PluginContents ul{
  margin-top:0px ;
  margin-left:16px ;
  padding:0px ;
  font-family: "Verdana", "ＭＳ ゴシック", "Osaka‐等幅";
  font-size:10px;
  color:#000000 ;
  line-height:140% ;
}
.PluginContents ul a{
  color:#000000 ;
  text-decoration:none ;
}
.PluginContents ul a:hover{
  background-color:#f5f5f5 ;
}
.PluginContents li{
  padding-top:6px ;
  padding-bottom:3px ;
  font-family: "Verdana", "ＭＳ ゴシック", "Osaka‐等幅";
  font-size:10px;
  color:#cccccc ;
}

.amazon {
  text-align:center ;
}
img.amazon_pict {
  margin:5px ;
  text-align:center ;
}
div.amazon_text strong{
  font-size:10px ;
  font-style:normal ;
  font-weight:normal ;
  color:#000000 ;
  line-height:16px ;
}
div.amazon_text {
  font-size:10px;
  color:#cccccc ;
  text-align:right ;
}
div.amazon_text a{
  text-decoration:none ;
  color:#999999 ;
}
span.amazon_monocolle {
  font-size:10px;
  color:#999999 ;
  text-align:left ;
}
span.amazon_monocolle a{
  text-decoration:none ;
  color:#999999 ;
}

/*ブログ内検索の部分*/
form {
  margin:0px ;
  padding:0px ;
}
.blogsearch{
  margin:0px ;
  padding:0px ;
}
/*検索文字を入力するインプット*/
.box{
  width:100px ;
  height:17px ;
  font:10px Verdana ;
  color:#000000 ;
  border:solid 1px #cccccc ;
  background-color:#ffffff ;
  margin-bottom:5px ;
  margin-right:5px ;
  vertical-align:middle ;
}
/*検索ボタン*/
.btn{
  font:10px Verdana ;
  color:#000000 ;
  border:solid 1px #cccccc ;
  background-color:#ffffff ;
  margin-bottom:5px ;
  vertical-align:middle ;
}

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