ブログテンプレート：JUGEM・ロリポブログ用　ハンドメイド

ハンドメイドテンプレートです。私にしてはおとなしめのデザイン。

カントリーテイストに仕上げました♪

こちらのテンプレートはロリポブログ・JUGEMにて利用可能です♪

ロリポブログはロリポップレンタルサーバを借りると無料でついてくるブログサービスです。

ソースコードはコチラ♪

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 rel="alternate" type="application/rss+xml" title="RSS" href="{site_rss}" /> <link rel="alternate" type="application/atom+xml" href="{site_atom}" /> <script type="text/javascript" src="./template/js/cookie.js"></script> </head> <body onload="javascript:initval();"> <a name="top"></a> <div id="wrapper-block">  <div id="header-block"> <h2 class="site-title">{blog_name}</h2> <h3 class="site-discription">{blog_description}</h3> </div>  <div id="main-block">  <div class="entry-navi"> {prev_entry} | <a href="./">main</a> | {next_entry} </div>   <div class="entry-box"> <div class="entry-title">{profile_name}のプロフィール</div> <div class="entry-body">{profile_description}</div> </div>   <div class="entry-box"> <h3 class="entry-title"><a href="{entry_permalink} ">{entry_title}</a></h3> <div class="entry-body">{entry_description}</div> <div class="entry-more">{entry_sequel}</div> <div class="entry-category">Category : {category_name}　author : {user_name}</div> <div class="entry-date"><a href="{entry_permalink} ">{entry_date}</a>　{entry_time}</div> <div class="entry-state"> {comment_num} | {trackback_num}</div> </div>   <a name="comments"></a> <div class="comment-box"> <div class="comment-midashi">comment</div>  <div class="comment-body">{comment_description}</div> <div class="comment-state">{comment_name} | {comment_time}</div>  <div class="comment-body"> <form name="comment_area" id="comment_area" action="./?mode=comment" method="post"> <input type="hidden" name="entry_id" value="{entry_id}" style="width:250px;" class="form_color" /> <label for="name">name:</label><br/> <input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" style="width:250px;" class="form_color" /><br /> <label for="email">email:</label><br> <input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" style="width:250px;" class="form_color" /><br /> <label for="url">url:</label><br> <input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" style="width:250px;" class="form_color" /><br /> <label for="description">comments:</label><br /> <textarea tabindex="4" id="description" name="description" rows="10" cols="50" style="width:400px;" class="form_color"></textarea><br /><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">Cookieに登録</label> </form> </div> </div>   <div class="trackback-box"> <div class="trackback-midashi">trackback</div>  <div class="trackback-title">{trackback_title}</div> <div class="trackback-body">{trackback_excerpt}</div> <div class="trackback-state">{trackback_blog_name} | {trackback_time}</div>  </div> <div class="trackback-box"> <div class="trackback-midashi">trackback URL </div> <div class="trackback-body"><INPUT name="trackbackurl" type="text" value="{trackback_url}" size="70" /></div> </div>   <div class="page">{prev_page_link} | {page_now}/{page_num}PAGES | {next_page_link}</div> <div class="top"><a href="#top">▲このページの先頭へ</a></div>  </div> <div id="left-block"> <div class="menu-box">  <div class="menu-midashi-01">calendar</div> <div class="calendar"> <table border="0" cellpadding="0" cellspacing="1"> <tr align="center"> <td class="cell" style="color:#CC0000">S</td> <td class="cell" style="color:#000000;">M</td> <td class="cell" style="color:#000000;">T</td> <td class="cell" style="color:#000000;">W</td> <td class="cell" style="color:#000000;">T</td> <td class="cell" style="color:#000000;">F</td> <td class="cell" style="color:#0066CC">S</td> </tr> </table> {calendar} </div>  </div>  <div class="menu-box"> <div class="menu-midashi-02">archives</div> {archives_list} </div>   <div class="menu-box"> <div class="menu-midashi-01">category</div> {category_list} </div>  <div class="menu-box"> <div class="menu-midashi-02">recommend</div>  <div class="menu-text"> {amazon_item} </div>  </div>  <div class="menu-box"> <div class="menu-midashi-01">search</div> <form method="get" action=""> <div class="search"><br /> <input id="search" name="search" size="20" style="width:140px" class="form_color" /> <input type="submit" value="Search" class="button" /> </div> </form> </div>   <div class="menu-box"> <div class="menu-midashi-02">selected entries</div> {selected_entry_list} </div>   <div class="menu-box"> <div class="menu-midashi-01">recent comment</div> {recent_comment_list} </div>   <div class="menu-box"> <div class="menu-midashi-02">recent trackback</div> {recent_trackback_list} </div>   <div class="menu-box"> <div class="menu-midashi-01">links</div> {link_list} </div>   <div class="menu-box"> <div class="menu-midashi-02">profile</div> {user_list} </div>   <div class="menu-box"> <div class="menu-midashi-01">other</div> <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>  {ad} </div>  <div id="footer-block"> <! -- 著作権は放棄しておりません。表示は削除しないでください!!--> <div class="copyright">■ ■ template by <a href="http://www.v-colors.com/" target="_blank">ビビッドカラーズ</a> ■ ■ </div> <! -- 著作権表示ここまで--> </div>  </div> </body> </html>

CSS

body { margin:0px; padding:0px; text-align:center; background:url(http://yuki930.img.jugem.jp/20051129_78772.gif); } #wrapper-block { margin:0 auto; padding:0; text-align:left; width:780px; background:#FFFFFF; } #header-block { background:url(http://yuki930.img.jugem.jp/20051129_78765.gif); width:780px; height:160px; } .site-title { padding:20px 40px 10px 60px; border-bottom:1px #FFFFFF solid; color:#FFFFFF; font-size:large; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; } .site-title a { color:#FFFFFF; text-decoration:none; } .site-title a:hover { color:#FFFF99; } .site-discription { margin:10px 50px 10px 70px; padding:5px; color:#FFFFFF; font-size:small; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; font-weight:normal; line-height:140%; } #main-block { width:580px; float:left; } .entry-box { background:url(http://yuki930.img.jugem.jp/20051129_78768.gif) no-repeat; padding:40px 10px 10px 10px; } .entry-title { background:url(http://yuki930.img.jugem.jp/20051129_78763.gif); line-height:25px; font-size:medium; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; padding:0px 0px 0px 30px; margin:10px 0px; } .entry-title a{ color:#339900; text-decoration:none; } .entry-title a:hover { color:#006600; text-decoration:underline; } .entry-body { padding:10px; color:#663300; font-size:small; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; line-height:140%; } .entry-body a{ color:#339900; font-weight:bold; text-decoration:none; } .entry-body a:hover { color:#006600; text-decoration:underline; } .entry-more { padding:10px; color:#663300; font-size:small; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; line-height:140%; } .entry-more a{ font-weight:bold; color:#339900; text-decoration:none; } .entry-more a:hover { color:#006600; text-decoration:underline; } .entry-category { padding:10px; color:#669933; font-size:small; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; line-height:140%; text-align:right; } .entry-category a{ color:#339900; text-decoration:none; font-weight:bold; } .entry-category a:hover { color:#006600; text-decoration:underline; } .entry-date { padding:0px 10px; color:#fff; font-size:25px; font-family:"Times New Roman", Times, serif; text-align:right; background:#006633; } .entry-date a{ color:#FFFFFF; text-decoration:none; } .entry-date a:hover { color:#CCFFFF; } .entry-state { padding:10px; color:#669933; font-size:small; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; line-height:140%; text-align:right; } .entry-state a{ color:#339900; text-decoration:none; } .entry-state a:hover { color:#006600; } .comment-box { background:url(http://yuki930.img.jugem.jp/20051129_78768.gif) no-repeat; padding:70px 10px 10px 10px; } .comment-midashi { background-color:#006600; color:#FFFFFF; padding:0px 10px; font-family:"Times New Roman", Times, serif; font-size:25px; } .comment-title { color:#666633; padding:10px; font-size:small; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; border-bottom:1px dotted #666633; } .comment-title a{ color:#339900; text-decoration:none; } .comment-title a:hover { color:#006600; text-decoration:underline; } .comment-body { color:#663300; padding:10px; font-size:small; line-height:140%; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; } .comment-body a{ color:#339900; text-decoration:none; } .comment-body a:hover { color:#006600; text-decoration:underline; } .comment-state { color:#666633; padding:10px; font-size:small; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; border-bottom:1px solid #666633; } .comment-state a{ color:#339900; text-decoration:none; } .comment-state a:hover { color:#006600; text-decoration:underline; } .trackback-box { background:url(http://yuki930.img.jugem.jp/20051129_78768.gif) no-repeat; padding:70px 10px 10px 10px; } .trackback-midashi { background-color:#006600; color:#FFFFFF; padding:0px 10px; font-family:"Times New Roman", Times, serif; font-size:25px; } .trackback-title { color:#666633; padding:10px; font-size:small; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; border-bottom:1px dotted #666633; } .trackback-title a{ color:#339900; text-decoration:none; } .trackback-title a:hover { color:#006600; text-decoration:underline; } .trackback-body { color:#663300; padding:10px; line-height:140%; font-size:small; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; } .trackback-body a{ color:#339900; text-decoration:none; } .trackback-body a:hover { color:#006600; text-decoration:underline; } .trackback-state { color:#666633; padding:10px; font-size:small; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; border-bottom:1px solid #666633; } .trackback-state a{ color:#339900; text-decoration:none; } .trackback-state a:hover { color:#006600; text-decoration:underline; } #left-block { width:200px; float:right; } .menu-box { margin:10px; color:#663300; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; font-size:small; } .menu-box .menu-text { padding:10px; line-height:140%; } .menu-box .menu-midashi-01 { height:40px; line-height:40px; font-size:24px; font-family:"Times New Roman", Times, serif; color:#fff; padding:0px 0px 0px 10px; background:url(http://yuki930.img.jugem.jp/20051129_78766.gif); } .menu-box .menu-midashi-02 { height:40px; line-height:40px; font-size:24px; font-family:"Times New Roman", Times, serif; color:#fff; padding:0px 0px 0px 10px; background:url(http://yuki930.img.jugem.jp/20051129_78767.gif); } .menu-box ul { margin:10px 0px 10px 20px; padding:0px; } .menu-box li { list-style:circle; color:#663300; line-height:140%; font-size:small; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; } .menu-box a{ color:#FF9900; text-decoration:none; } .menu-box a:hover { color:#FF6600; text-decoration:underline; } .calendar { font-family: "Verdana"; font-size: 10px; color:#FF9933; text-align:center; } .calendar table{ text-align:center; background:#E9E4E0; } .calendar_month { font-family: "Verdana"; line-height:15px; font-size: 10px; color:#FF9933; background:#fff; } .cell { width: 20px; height: 20px; padding:1px; color:#FFCC00; background:#fff; line-height: 20px; } .cell_week { width: 20px; height: 20px; padding:1px; line-height: 20px; } .cell a { color: #ffffff; background:#FF9900; text-decoration: none; display:block; width: 20px; height: 20px;} .cell a:link { color: #ffffff; background: #FF9900; text-decoration: none; } .cell a:visited { color: #ffffff; background: #FF9900; text-decoration: none; } .cell a:active { color: #FF6600; background: #FFCC00; text-decoration: none; } .cell a:hover { color: #FF6600; background: #FFCC00; text-decoration: none; } #footer-block { clear:both; height:30px; background:#006600; color:#FFFFFF; font-size:small; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; } #footer-block a{ font-weight:bold; color:#FFCC00; text-decoration:none; } #footer-block a:hover { color:#FF6600; text-decoration:underline; } .copyright { text-align:center; padding:10px; font-size:small; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; color:#FFFFFF; } .page { margin:10px; background-color:#006633; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; color:#009966; font-size:small; padding:10px; text-align:center; } .page a { font-weight:bold; color:#FFCC00; text-decoration:none; } .page a:hover { color:#FFFF00; text-decoration:underline; } .entry-navi { margin:10px; background-color:#006633; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; color:#009966; font-size:small; padding:10px; text-align:center; } .entry-navi a { font-weight:bold; color:#FFCC00; text-decoration:none; } .entry-navi a:hover { color:#FFFF00; text-decoration:underline; } .top { text-align:center; font-family:"ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "MS UI Gothic"; color:#009966; font-size:small; line-height:140%; } .top a { font-weight:bold; color:#FFCC00; text-decoration:none; } .top a:hover { color:#FF6600; text-decoration:underline; } blockquote { margin:10px; padding:10px; background-color:#E3F9E7; border-left:5px solid #7DC479; color:#003300; } .pict { border:1px solid #7DC479; padding:5px; margin:5px; }
★使い方★

管理画面→テンプレートの編集→選択されているテンプレートを別名でコピー（名前はハンドメイドなどお好みでOK）→コピーしたテンプレートを編集→HTMLの部分に下記HTLMを貼り付ける→保存→CSSの部分に下記のCSSを貼り付ける→保存→ハンドメイドテンプレートを使用するテンプレートに設定

ページ一覧

ビビッドカラーズ

ブログテンプレート：JUGEM・ロリポブログ用 ハンドメイド

ブログテンプレート：JUGEM・ロリポブログ用　ハンドメイド