http://adan.noor.jp/f/2011/jugem_comment.htm
●
http://minisite.jugem.jp/
“MINI-SITE”コメント欄ありバージョン
■HTML(全文)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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"> <!-- BEGIN title --> <meta name="Description" content="{blog_description}"> <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}"> <title>{site_title}</title> <!-- END title --> <script type="text/javascript" src="./template/js/cookie.js"></script> </head> <body> <!-- wrapper --> <div id="wrapper"> <!-- header --> <div id="header"> <h1><a href="./" title="トップページへ"> <!-- ▼ヘッダ画像 --> <img src="http://img.minisite.adan.noor.jp/20100131_991375.jpg" alt="" width="791" height="200" class="pict"> </a></h1> </div> <!-- /header --> <div id="underhead"> <!-- BEGIN link --> <ul> <li> <a href="{link_item_url}">{link_item_name}</a> </li> </ul> <!-- END link --> </div> <!-- content --> <div id="content"> <!-- main --> <div id="main"> <!-- BEGIN toponly --> {toponly_dmy} <div id="toppage1"> <div id="toppage2"> <!-- ▼トップページ、記事上枠 --> ブログで作る小規模サイト〜テンプレート"Mini-Site"解説ブログ<br> “Mini-Site”は、《JUGEM》ブログ用のテンプレートですが、「小規模サイトを最低限の手間と時間で作成する」という目的で、メニューや余計な表示項目を削り、「ブログらしくなく」見えるようにしました。店舗などの商用サイトを想定しましたが、もちろん非商用でもご利用いただけます。 <!-- ▲トップページ、記事上枠 --> </div> </div> <!-- END toponly --> <!-- BEGIN entry --> <div class="entry"> <h2>{entry_title}</h2> <div class="entryBody">{entry_description}</div> <a name="sequel"></a> <div class="entryBody">{entry_sequel}</div> <div class="entryBody"> <p class="entrydate">({entry_year}/{entry_month}/{entry_day} <a href="./manage/?mode=write&eid={entryarea_id}" class="editpage">記</a>)<br> {comment_num}|{trackback_num}</p></div> <br class="clear"> </div> <!-- END entry --> <!-- BEGIN comment_area --> <a name="comments"></a> <div id="comment"> <div class="resTitle">コメント</div> <!-- BEGIN comment --> <div class="eachcomment"> <table class="commentState"><tr> <td class="cname">{comment_name}</td> <td class="ctime">{comment_time}</td> </tr></table> <div class="ctext"> {comment_description} </div> </div> <!-- END comment --> <div class="resTitle">コメントする</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();" /> <input type="checkbox" name="set_cookie" value="1" id="set_cookie"> <label for="set_cookie">入力情報を登録しますか?</label> </form> </div> </div> <!-- END comment_area --> <!-- BEGIN trackback_area --> <a name="trackback"></a> <div id="trackback"> <div class="resTitle">この記事のトラックバックURL</div> <div id="trackbackUrl"> <input type="text" value="{trackback_url}" /> </div> <div class="resTitle">トラックバック</div> <!-- BEGIN trackback --> <div class="eachtrackback"> <div class="trackbackName">{trackback_title}</div> <div class="trackbackBody">{trackback_excerpt}</div> <table class="trackbackState"><tr> <td class="cname">{trackback_blog_name}</td> <td class="ctime">{trackback_time}</td> </tr></table> </div> <!-- END trackback --> </div> <!-- END trackback_area --> <!-- BEGIN page --> <div id="entryNavi"> {prev_page_link}<a href="#header" title="ページトップへ">Δ</a>{next_page_link} </div> <!-- END page --> </div> <!-- /main --> <!-- side --> <div id="side"> <!-- BEGIN category --> <!-- BEGIN category_items --> <div class="catmenu"><a href="./?cid={category_item_id}">{category_item_name}</a></div> <!-- END category_items --> <!-- END category --> <div class="sideContents"> <!-- search --> <h3>Search This Site</h3> <form method="get" action="./"> <table cellpadding="0" cellspacing="0" border="0"> <tr valign="middle"> <td><input id="search" name="search" size="20" style="width:110px" class="search"></td> <td><input type="submit" value="Search"></td> </tr> </table> </form> <!-- /search/ --> <!-- BEGIN freespace1 --> <h3>{freespace_title1}</h3> {freespace_contents1} <!-- END freespace1 --> <!-- BEGIN freespace2 --> <h3>{freespace_title2}</h3> {freespace_contents2} <!-- END freespace2 --> <!-- BEGIN freespace3 --> <h3>{freespace_title3}</h3> {freespace_contents3} <!-- END freespace3 --> <!-- BEGIN freespace4 --> <h3>{freespace_title4}</h3> {freespace_contents4} <!-- END freespace4 --> <!-- BEGIN freespace5 --> <h3>{freespace_title5}</h3> {freespace_contents5} <!-- END freespace5 --> <!-- BEGIN recent_comment --> <h3>Recent Comment</h3> <div class="sideContents2"> {recent_comment_list} </div> <!-- END recent_comment --> <!-- BEGIN recent_trackback --> <h3>Recent Trackback</h3> <div class="sideContents2"> {recent_trackback_list} </div> <!-- END recent_trackback --> <!-- mobile --> <h3>Mobile</h3> {site_qrcode} <!-- //mobile --> <!-- BEGIN archives --> <h3>Archive</h3> {archives_selectbox2} <!-- END archives --> <h3>RSS</h3> <ul> <li><a href="./?mode=atom"><img src="http://minisite.img.jugem.jp/20100131_991260.png" alt="" width="14" height="14"> Atom 0.3</a></li> <li><a href="./?mode=rss"><img src="http://minisite.img.jugem.jp/20100131_991260.png" alt="" width="14" height="14"> RSS 1.0</a></li> </ul> <h3>Powered</h3> <!-- powered --> {ad} <div id="powered"> <!-- テンプレートのバナーは削除可 --> <a href="http://minisite.jugem.jp/" target="minisitejugem"><img src="http://minisite.img.jugem.jp/20100131_991223.gif" alt="テンプレート提供元" width="128" height="22" class="pict"></a><br> {powered}<br> {copyright}<br> <a id="admin" href="./manage/" title="管理者専用ページへ">Admin.</a> </div> <!-- /powered --> </div> <!-- /sideContents --> </div> <!-- /side --> <br class="clear"> </div> <!-- /content/ --> </div> <!-- /wrapper/ --> </body> </html>
■CSS(全文)
@charset "EUC-JP"; /* ---------------------------------------- 2010.01.26 Template : Mini-Site by Adan (http://minisite.jugem.jp) ---------------------------------------- */ /* ---------------------------------------- custom02をベースにした、「ミニサイト」用テンプレ 作者ブログに、解説あり。 ---------------------------------------- */ /* -------------------------------------- リセット --------------------------------------- */ *{word-break: break-all;} body,div,h1,h2,h3,h4,h5,h6,ul,li,p {margin:0px;padding:0px;} h1,h2,h3,h4,h5,h6 {font-size:100%;} a {text-decoration:none;overflow:hidden;} img {border:none;vertical-align:top;} li {list-style-type:none;} hr {display:none;clear:both;} br.clear {clear:both;} /* -------------------------------------- 共通部分 --------------------------------------- */ /* ページ全体のテキスト色 */ html {color:#222;} /* ページ全体 */ body { width:100%; text-align:center; font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS Pゴシック','メイリオ',Meiryo,sans-serif,"Osaka‐等幅"; background:url(http://img.logo.adan.noor.jp/20100122_1367364.gif); } /* ページ全体のリンク色 */ a:link {color:#082;} a:visited {color:#082;} a:hover {color:#f09;text-decoration:underline;} a:active {color:#f09;text-decoration:underline;} /* カレンダーのリンク色 */ .cell {color:#999;} /* ------------------------------------- * ページレイアウト --------------------------------------- */ /*ページ全体の幅、レイアウトを中央揃え*/ #wrapper { width:791px; padding:0 5px 0 4px; margin:0px auto; text-align:left; background-color:#fff; background:url(http://img.logo.adan.noor.jp/20100122_1367365.gif); } /*ヘッダー(ブログ名と説明文)*/ #header {width:791px; overflow:hidden; clear:left; } /*コンテンツ枠(記事の枠+サイドメニュー)*/ #content { } /* (サイドメニュー) */ #side { float:left; width:200px; padding:10px; } /* (記事)*/ #main { float:right; width:560px; /* D */ } /* フッター */ /* -------------------------------------- メイン --------------------------------------- */ /* ブログ名 */ h1 {font-size:20px;} /* ブログの説明文 */ div#description {margin:10px 0 0 0;} .entry {margin:0 0 15px 0;} /* メニューバー */ #underhead{background:bottom url(http://img.logo.adan.noor.jp/20100122_1367366.gif); height:26px;padding:1px 0 4px 0;} #underhead ul{display:block;margin:0 auto;} #underhead li{display:block; height:26px; float:left; background:#fff repeat-x bottom url(http://minisite.img.jugem.jp/20100123_945080.gif);} #underhead a{display:block; padding-top:3px; height:23px; width:156px; text-align:center; border:none; border-left:1px #fff solid; border-right:1px #ccc solid;} #underhead a:link{background:repeat-x #fff bottom url(http://img.logo.adan.noor.jp/20100122_1367367.gif);} #underhead a:visited{background:repeat-x #fff bottom url(http://img.logo.adan.noor.jp/20100122_1367367.gif);} #underhead a:hover{background:none;} #underhead a:active{background:none;} /* トップページのみ表示される飾り枠 */ #toppage1{display:block; background:#f8f8f8; padding:3px;margin:15px 17px 10px 10px; border:1px solid #c0c0c0;} #toppage2{background:#fff; padding:7px; border:1px solid #c0c0c0; font-size:96%;line-height:1.5em;} /* 次の記事・前の記事 */ #entryNavi {text-align:center;font-size:81%;} /* このページの先頭へ */ .pageTop {text-align:center;font-size:81%;} /* 記事のタイトル */ h2 {font-size:100%;font-weight:bolder; background:url(http://minisite.img.jugem.jp/20100124_950004.gif) #7f9; padding:12px 0 10px 24px; margin:9px 0 0 0;} .entryBody h3{border-left:#7f9 5px double; padding-left:4px; margin:1.2em 0 0.5em 0; line-height:1em;} /* 記事本文 */ .entryBody {padding:0 15px; font-size:96%; line-height:1.6em;} .entrydate{text-align:right;font-size:81%;padding-right:10px;} /* 「更新」リンク */ .editpage:link{color:#222;border:none;text-decoration:none;} .editpage:visited{color:#222;border:none;text-decoration:none;} .editpage:hover{color:#222;border:none;text-decoration:none;} .editpage:acitive{color:#222;border:none;text-decoration:none;} /* コメント欄 */ .resTitle{ font-size:100%; font-weight:bold; margin-top:20px; } .eachcomment, .eachtrackback{ font-size:81%; width:400px; padding:3px; line-height:1.4em; margin:12px auto 0 auto; border:#c0c0c0 1px solid; } .commentState, .trackbackName{ width:400px; border-bottom:#c0c0c0 1px dotted; } .trackbackState{ width:400px; border-top:#c0c0c0 1px dotted; } .cname{ text-align:left; padding:0px 0 0px 5px; } .ctime{ text-align:right; padding:0px 5px 0px 0; } .ctext, .trackbackBody{ padding:2px 5px 5px 5px; } .commentSendForm{ font-size:81%; width:400px; margin:0 auto; line-height:1.4em; } #comment_area textarea{ width:398px; } #trackbackUrl{ width:400px; margin:0 auto; } #trackbackUrl input{ font-size:81%; width:398px; line-height:1.4em; } /* プロフィールのページ */ #profile{margin:0;} #profileTitle {font-size:100%;font-weight:bolder; background:url(http://minisite.img.jugem.jp/20100124_950004.gif) #9cf; padding:12px 0 10px 24px;} #profileBody {padding:0 15px; font-size:96%; line-height:1.6em;} #profileName {margin:15px 0 0 0;} /* -------------------------------------- 記事の装飾 --------------------------------------- */ /* 引用 */ #main blockquote { border:1px dotted #CCC; padding:10px; margin:10px; } /* 画像 */ #main .pict { border-top:#eee 1px solid; border-right:#aaa 1px solid; border-bottom:#aaa 1px solid; border-left:#eee 1px solid; padding:3px;} /* リスト */ div.entryBody li { list-style:square outside; margin:2px 0px 3px 1.5em; line-height:120%; } .mylist li{list-style:square outside;color:#7f9;} .mylist li li {list-style:disc outside;color:#7f9;} .mylist li li li {list-style:circle outside;color:#7f9;} /* -------------------------------------- サイドメニュー --------------------------------------- */ /* カテゴリーメニュー */ .catmenu{display:block; height:40px; width:200px; background:url(http://minisite.img.jugem.jp/20100124_950003.gif) #7f9; font-size:96%; } .catmenu a{display:block;padding:11px 0 0 20px;border:none;} .catmenu a:link{background:#7f9 url(http://minisite.img.jugem.jp/20100124_950002.gif);border:none;} .catmenu a:visited{background:#7f9 url(http://minisite.img.jugem.jp/20100124_950002.gif);border:none;} .catmenu a:hover{background:none;text-decoration:underline;} .catmenu a:active{background:none;text-decoration:underline;} /* サイドメニューのタイトル */ .sideContents h3 {font-size:14px;font-weight:bolder;margin:15px 0 5px 0;} /* サイドメニューの内容 */ .sideContents {margin:0 0 20px 0;font-size:78%;line-height:1.4em;} .sideContents img{margin:1px;} .sideContents select{margin:6px;} .sideContents2{margin:0 0 20px 0;font-size:100%;line-height:1.4em;} /* カレンダーの1マス幅 */ .cell {width:27px;} /* powered */ #powered{word-break:normal;} #powered img{margin:1px 0 0 36px;} #admin{display:block;text-align:right;}