忍者ブログテンプレート: 小粋空間

Top ＞ CMS・ブログ＞忍者ブログ＞忍者ブログテンプレート

忍者ブログテンプレート

Posted at August 11,2009 2:55 AM
Tag：[Ninja, Template]

忍者ブログ用のテンプレートを作成しました。デフォルトの3カラム固定レイアウトの完成例は次のようになります。

１．テンプレート設定方法

忍者ブログのブログ管理ページの上部メニューから「新規テンプレート作成」をクリックします。

管理画面

次の画面の右上のテキストエリアの上に、このエントリーに掲載しているHTMLの内容、その下のテキストエリアにCSSの内容を貼り付けてください。

HTML <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="keywords" content="  "> <meta name="description" content=""> <link rel="stylesheet" href="http:///css/" type="text/css"> <link rel="alternate" type="application/rss+xml" title="RSS" href="http:///RSS/"> <link rel="alternate" type="application/atom+xml" title="ATOM" href="http:///ATOM/"> <title> </title> </head> <body class="layout-three-column"> <div id="box" class="clearfix"> <div id="header"> <h1 id="blog-name"><a href=""></a></h1> <p class="blog-description"></p> </div> <div id="links-left-box"> <dl id="links-left">  <dd class="sidetitle ">  </dd> <dd class="PluginExplanation ">  </dd> <dd class="side">  </dd> <dd class="PluginExplanation ">  </dd>   <dd class="sidetitle ">  </dd> <dd class="PluginExplanation ">  </dd> <dd class="side">  </dd> <dd class="PluginExplanation ">  </dd>  </dl> </div> <div id="content"> <div class="blog">  <div class="content-nav">  []  </div>  <p class="date">年月日</p> <div class="entry"> <h2 class="entry-header"><a href=""></a></h2> <div class="entry-content clearfix">         <p class="entry-more"> <a href=""></a> </p>   </div> <p class="entry-footer"> <a href="/Date//">:</a> | <a href="">Category[]</a> |  <a href="#comment">Comment[]</a> |   <a href="#trackback">Trackback[]</a>  </p> </div>    <div id="trackbacks"> <h3 class="trackbacks-header">トラックバックURL</h3> <div id="trackbacks-info"> <p>このエントリーのトラックバックURL:<br /><input id="TrackbackURL" type="text" size="50" name="tbURL" value="" onclick="this.select(0,this.value.length)"></p> </div> <h3 class="trackbacks-header">トラックバック</h3>  <div class="trackbacks-content"> <div class="trackback" id="trackback"> <div class="trackback-content"> <p> » <br />  <a href="">続きを読む</a> </p> </div> <p class="trackback-footer"> Tracked on // : </p> </div> </div>  </div>   <div id="comments"> <h3 class="comments-header">コメント</h3>  <div class="comment" id="comment"> <div class="comment-content">  </div> <div class="comment-content">  </div> </div> <p class="comment-footer"> // : |  |  | <a href="">EDIT</a> </p>  <div class="CommentResBox"> <div class="CommentResTitle"></div> <div class="CommentResText"></div> <div class="CommentResFooter"> // : </div> </div>   </div> <div class="comments-open" id="comments-open"> <h2 class="comments-open-header" id="comment">コメントする</h2> <div class="comments-open-content"> <form action="" method="post"> <fieldset> <p> <label for="comment-author">お名前</label> <input id="comment-author" type="text" name="name" value=""> </p> <p> <label for="comment-title">タイトル</label> <input id="comment-title" type="text" name="title" value=""> </p> <p> <label for="color">文字色</label> <select id="color" name="color"> <option value="Black" style="color:Black">Black <option value="LimeGreen" style="color:LimeGreen">LimeGreen <option value="SeaGreen" style="color:SeaGreen">SeaGreen <option value="Teal" style="color:Teal">Teal <option value="FireBrick" style="color:FireBrick">FireBrick <option value="Tomato" style="color:Tomato">Tomato <option value="IndianRed" style="color:IndianRed">IndianRed <option value="BurlyWood" style="color:BurlyWood">BurlyWood <option value="SlateGray" style="color:SlateGray">SlateGray <option value="DarkSlateBlue" style="color:DarkSlateBlue">DarkSlateBlue <option value="LightPink" style="color:LightPink">LightPink <option value="DeepPink" style="color:DeepPink">DeepPink <option value="DarkOrange" style="color:DarkOrange">DarkOrange <option value="Gold" style="color:Gold">Gold <option value="DimGray" style="color:DimGray">DimGray <option value="Silver" style="color:Silver">Silver </select> </p> <p> <label for="comment-email">メールアドレス</label> <input id="comment-email" type="text" name="mail" value=""> </p> <p> <label for="comment-url">URL</label> <input id="comment-url" type="text" name="url" value=""> </p> <p> <label for="comment-text">コメント</label> <textarea id="comment-text" name="comment" cols="40" rows="4"></textarea> </p> <p> <label for="comment-password">パスワード</label> <input id="comment-password" type="password" name="pass">   </p> <div id="comments-open-footer" class="comments-open-footer"> <input type="submit" value="送信"> </div> </fieldset> </form> </div> </div>   <div class="content-nav">  <<<a href=""></a>   <a href="">Main</a>   <a href=""></a>>>  </div>   <div class="comments-open" id="comments-open"> <h2 class="comments-open-header" id="comment">コメントを編集する</h2> <div class="comments-open-content"> <form action="" method="POST"> <fieldset> <p> <label for="comment-author">お名前</label> <input id="comment-author" type="text" name="name" value=""> </p> <p> <label for="comment-title">タイトル</label> <input id="comment-title" type="text" name="title" value=""> </p> <p> <label for="color">文字色</label> <select id="color" name="color"> <option value="Black" style="color:Black">Black <option value="LimeGreen" style="color:LimeGreen">LimeGreen <option value="SeaGreen" style="color:SeaGreen">SeaGreen <option value="Teal" style="color:Teal">Teal <option value="FireBrick" style="color:FireBrick">FireBrick <option value="Tomato" style="color:Tomato">Tomato <option value="IndianRed" style="color:IndianRed">IndianRed <option value="BurlyWood" style="color:BurlyWood">BurlyWood <option value="SlateGray" style="color:SlateGray">SlateGray <option value="DarkSlateBlue" style="color:DarkSlateBlue">DarkSlateBlue <option value="LightPink" style="color:LightPink">LightPink <option value="DeepPink" style="color:DeepPink">DeepPink <option value="DarkOrange" style="color:DarkOrange">DarkOrange <option value="Gold" style="color:Gold">Gold <option value="DimGray" style="color:DimGray">DimGray <option value="Silver" style="color:Silver">Silver </select> </p> <p> <label for="comment-email">メールアドレス</label> <input id="comment-email" type="text" name="mail" value=""> </p> <p> <label for="comment-url">URL</label> <input id="comment-url" type="text" name="url" value=""> </p> <p> <label for="comment-text">コメント</label> <textarea id="comment-text" name="comment" cols="40" rows="4"></textarea> </p> <p> <label for="comment-password">パスワード</label> <input id="comment-password" type="password" name="pass">   </p> <div id="comments-open-footer" class="comments-open-footer"> <input type="submit" value="送信"> </div> </fieldset> </form> </div> </div>  </div> </div> <div id="links-right-box"> <dl id="links-right">  <dd class="sidetitle ">  </dd> <dd class="PluginExplanation ">  </dd> <dd class="side">  </dd> <dd class="PluginExplanation ">  </dd>   <dd class="sidetitle ">  </dd> <dd class="PluginExplanation ">  </dd> <dd class="side">  </dd> <dd class="PluginExplanation ">  </dd>   <dd class="sidetitle ">  </dd> <dd class="PluginExplanation ">  </dd> <dd class="side">  </dd> <dd class="PluginExplanation ">  </dd>  <dd class="powered"> <ul> <li><a href="https://www.koikikukan.com/"><img src="http://file.yujiro.kuizu.net/Img/1249924971/" alt="小粋空間" width="128" height="22" /></a></li> </ul> </dd> </dl> </div> </div> <p id="footer">Copyright © 2009 xxxxx All Rights Reserved.  </p> <script type="text/javascript"> //<![CDATA[ var elements = document.getElementsByTagName('p'); var work; var work_old = ''; for (i=0; i<elements.length; i++) { if(elements[i].className == 'date'){ work = elements[i].innerHTML; if(work == work_old){ elements[i].style.display = 'none'; } work_old = work; } } //]]> </script> </body> </html>

スタイルシート /* * File : css * Version : 1.00 * Update : * * Copyright (C) 2005-2009 www.koikikukan.com All rights reserved. */ /* すべて */ * { margin: 0; padding: 0; font-family: Verdana, Arial, sans-serif; } body { font-size: 100%; } html>body { font-size: 12pt; } /* 見出し */ h1, h2, h3, h4, h5, h6 { font-weight: normal; } /* リンク */ a, a:link, a:visited { color: #069; text-decoration: none; } a:hover { color: #069; text-decoration: underline; } a:active {} /* リンクつき画像 */ a img { border: none; } /* フォーム */ form { margin: 0px; } #search-options, input, textarea { padding: 1px; } #search { width: 140px; height: 20px; } html > body #search { height: 15px; } /* ヘッダ */ #header { padding: 15px; border-bottom: 1px solid #669; color: #999; background: #8fabbe; text-align: left; } #header a, #header a:link, #header a:visited { color: #fff; background: transparent; font-size: 32px; text-decoration: none; } #header a:hover {} #header a:active {} /* タイトルバナー下の説明 */ .blog-description { color: #fff; background: transparent; font-size: 12px; } /* ブログ記事日付 */ .date { margin: 8px 0; } /* ブログ記事日付・各タイトル */ .date, .trackbacks-header, .comments-header, .comments-open-header, .search-header { padding-left: 8px; color: #fff; background: #8fabbe; font-size: 83.3%; font-weight: bold; line-height: 2.0; } /* ブログ記事タイトル */ .entry-header { margin: 15px 0 0; padding-left: 5px; border-left: 3px solid #999; font-size: 100%; font-weight: bold; } /* ブログ記事 */ .entry { width: auto; margin: 0 3px 15px; color: #36414d; background: #fff; font-size: 83.3%; line-height:1.5; word-break: break-all; } /* 段落 */ .entry p { margin: 15px 0; } /* 順序なしリスト */ .entry ul, .entry ol { padding-left: 16px; } .entry ul li { list-style-type: circle; } /* 定義リスト */ .entry dl {} .entry dt {} .entry dd { padding-left: 8px; } /* テキストエリア */ .entry textarea { width: 97%; } /* 引用 */ blockquote { width: auto; margin: 15px 20px 0; padding: 10px; border: 1px solid #666; background: #f6f6f6; font-size: 83.3%; line-height: 1.5; } .quotetitle { /* 引用文タイトル */ font-size: 83.3%; border-bottom: 1px solid #666; padding: 3px; } pre { margin: 15px 20px 0px; padding: 10px; background: #f6f6f6; border: 1px solid #999; font-size: 83.3%; line-height: 1.5; width: 100%; overflow: scroll; } html>body pre { width: 87%; } /* 追記 */ .entry.extended {} /* 投稿者 */ p.entry-footer { margin-top: 0; padding-top: 3px; border-top: 1px dotted #36414d; font-size: 83.3%; text-align: right; } .entry-content { margin: 10px 0; } /* ウェブページ */ div.page { margin-top: -5px; } /* アーカイブページ本文 */ .archive-list { margin: 10px 0; } /* アーカイブテンプレートの前後リンク */ .content-nav { margin: 10px; text-align: center; font-size: 83.3%; } /* カレンダー */ .CalendarMoveTable { margin: 5px auto; } .CalendarMoveTable td { font-size: 12px; } .CalendarTable { text-align: center; padding: 0px; border-collapse: collapse; } .CalendarTable th { padding-bottom: 3px; font-size: 10px; width: 23px; } .CalendarTable td { padding: 2px 0; font-size: 9px; line-height: 120%; } span.day { text-align: center; font-size: 9px; } span.saturday { color: blue; } span.sunday { color: #e50003; } td.today { display: block; border: 1px solid #333; } #links-left-box dl, #links-right-box dl { margin: 0; padding: 0; } #links-left-box dd, #links-right-box dd { font-size: 75%; } .side dt, .side dd { margin: 0; padding: 0; } /* サイドメニュータイトル */ .sidetitle { margin-top: 3px; border: 1px solid #666666; color: #333; background: #f6f6f6; text-align: center; font-size: 75%; line-height: 2.0; } /* サイドメニュー */ .side { margin: 3px 0 20px; background: none; color: #333; font-size: 75%; line-height: 1.5; } .side ul, .side ol { padding-left: 16px; } .side ul li { list-style-type: circle; } .side ul li ul { padding-left: 0px; } .side li li { list-style-type: none; } /* サイドメニュー(サブカテゴリー用) */ .side #categories ul { padding-left: 16px; } .side #categories ul ul { padding-left: 10px; } .side #categories li { list-style-type: circle; } /* サイドメニュー(タグクラウド用) */ ul#tags { margin-top: 5px; padding-left: 0; list-style: none; } ul#tags .module-list-item { display: inline; } ul#tags li.taglevel1 { font-size: 125%; font-weight: bold; } ul#tags li.taglevel2 { font-size: 125%; } ul#tags li.taglevel3 { font-size: 116.6%; } ul#tags li.taglevel4 { font-size: 108.3%; } ul#tags li.taglevel5 { font-size: 100%; } ul#tags li.taglevel6 { font-size: 91.6%; } /* 検索 */ fieldset { border: none; } /* カウンター */ .counter { margin: 8px 0 25px; padding: 2px; background: none; } /* RSSフィード */ .syndicate { margin-bottom: 5px; text-align: left; color: #666666; font-size: 75%; line-height: 1.5; } .syndicate img { border: none; } /* クレジットバナー */ .powered { margin-top: 50px; text-align: left; color: #666666; font-size: 75%; line-height: 1.5; } .powered img { margin-top: 3px; } .powered ul, .powered li { list-style: none; } .module-powered { margin-top: 15px; margin-bottom: 15px; padding: 10px; border: 1px solid #ddd; background-color: #f8f8f8; text-align: center; } /* コメント・トラックバック */ #trackbacks, #comments { margin: 10px 0; } .trackbacks-header, .comments-header, .comments-open-header { margin: 15px 0; } #trackbacks-info, .trackback-content, .comment-content, .comments-open-content { margin: 0 2px; padding: 0; font-size: 83.3%; line-height: 1.5; word-break: break-all; } .trackback-content p, .comment-content { margin-top: 10px; margin-bottom: 5px; } .trackback-footer, .comment-footer { margin-right: 2px; padding-top: 3px; border-top: 1px dotted #36414d; font-size: 66.6%; text-align: right; } #comments-open-data p { margin-bottom: 10px; } #comment-post { font-weight: bold; } #comment-author, #comment-email, #comment-url, #comment-title, #comment-password { width: 220px; height: 20px; } html > body #comment-author, html > body #comment-email, html > body #comment-url, html > body #comment-title, html > body #comment-password { height: 20px; } #comment-text { width: 400px; height: 150px; } #comment-bake-cookie { margin-left: 2px; vertical-align: middle; } #comments-open-footer { margin-top: 15px; text-align: center; } .comments-open label { display: block; } #comment-reply-label { display: inline; } #comment-form-reply { margin-bottom: 8px; } /* 検索結果画面 */ #search-form { font-size: 83.3%; } .search-header { margin: 15px 0; } .search-results-header { margin: 8px 0 15px; font-size: 120%; } /* カラム切り替え */ body.layout-three-column, body.layout-three-column-right, body.layout-two-column-left, body.layout-two-column-right, body.layout-one-column { text-align: center; background: #36414d; } .layout-three-column #container, .layout-three-column-right #container, .layout-two-column-left #container, .layout-two-column-right #container { margin-bottom: 10px; } .layout-one-column #container { margin-bottom: 0; } /* 固定レイアウト共通 */ .layout-three-column #box, .layout-three-column-right #box, .layout-two-column-left #box, .layout-two-column-right #box, .layout-one-column #box { margin-right: auto; margin-left: auto; padding: 0 0 25px 0; border-bottom: 1px solid #669; border-left: 1px solid #669; border-right: 1px solid #669; text-align: left; background-color: #fff; } /* 3カラム固定レイアウト幅 */ .layout-three-column-right #box, .layout-three-column #box { width: 850px; } /* 2カラム固定レイアウト幅 */ .layout-two-column-left #box, .layout-two-column-right #box { width: 665px; } /* 1カラム固定レイアウト幅 */ .layout-one-column #box { width: 478px; } /* 3カラム固定レイアウト */ .layout-three-column #content { float: left; width: 478px; border-bottom: 1px solid #669; border-left: 1px solid #669; border-right: 1px solid #669; } .layout-three-column #links-left-box, .layout-three-column #links-right-box { float: left; width: 185px; } .layout-three-column #links-left, .layout-three-column #links-right { padding: 15px 15px 0 15px; } /* 3カラム固定レイアウト（右サイドバー） */ .layout-three-column-right #content { float: left; width: 483px; border-bottom: 1px solid #669; border-right: 1px solid #669; } .layout-three-column-right #links-left-box { float: left; width: 180px; } .layout-three-column-right #links-right-box { float: left; width: 185px; } .layout-three-column-right #links-left { padding: 15px 5px 0 15px; } .layout-three-column-right #links-right { padding: 15px 15px 0 15px; } /* 2カラム固定レイアウト(右サイドバー) */ .layout-two-column-right #content { float: left; width: 478px; border-bottom: 1px solid #669; border-right: 1px solid #669; } .layout-two-column-right #links-right-box { float: left; width: 185px; } .layout-two-column-right #links-right { padding: 15px 15px 0; } /* 2カラム固定レイアウト(左サイドバー) */ .layout-two-column-left #content { float: left; width: 478px; border-bottom: 1px solid #669; border-left: 1px solid #669; } .layout-two-column-left #links-left-box { float: left; width: 185px; } .layout-two-column-left #links-left { padding: 15px 15px 0; } /* 1カラム固定レイアウト */ .layout-one-column #content {} /* 3カラム固定レイアウト(ブログ記事全体) */ .layout-three-column-right .blog, .layout-three-column .blog { padding: 10px 15px; } /* 2カラム固定レイアウト(左サイドバー:ブログ記事全体) */ .layout-two-column-left .blog { padding: 10px 15px; } /* 2カラム固定レイアウト(右サイドバー:ブログ記事全体) */ .layout-two-column-right .blog { padding: 10px 15px; } /* 1カラム固定レイアウト(ブログ記事全体) */ .layout-one-column .blog { padding: 10px 15px 0; } /* リキッドレイアウト(ブログ記事全体) */ .layout-three-column-liquid .blog, .layout-two-column-liquid-left .blog, .layout-two-column-liquid-right .blog, .layout-one-column-liquid .blog { padding: 15px; } /* 3カラムリキッドレイアウト */ .layout-three-column-liquid #content { margin: 0 185px 20px; border-bottom: 1px solid #669; border-left: 1px solid #669; border-right: 1px solid #669; } .layout-three-column-liquid #links-left{ position: absolute; width: 155px; top: 95px; left: 15px; } .layout-three-column-liquid #links-right{ position: absolute; width: 155px; top: 95px; right: 15px; } /* 2カラムリキッドレイアウト(右サイドバー) */ .layout-two-column-liquid-right #content { margin: 0 185px 10px 0; border-bottom: 1px solid #669; border-right: 1px solid #669; } .layout-two-column-liquid-right #links-right { position: absolute; width: 155px; top: 95px; right: 15px; } /* 2カラムリキッドレイアウト(左サイドバー) */ .layout-two-column-liquid-left #content { margin: 0 0 10px 185px; border-bottom: 1px solid #669; border-left: 1px solid #669; } .layout-two-column-liquid-left #links-left { position: absolute; width: 155px; top: 95px; left: 15px; } /* 1カラムリキッドレイアウト */ .layout-one-column-liquid #content { margin: 0 100px; border-bottom: 1px solid #669; border-left: 1px solid #669; border-right: 1px solid #669; background: #fff; } /* 1カラムリキッドレイアウト用 */ /* タイトルバナー */ .layout-one-column-liquid #header { margin-right: 100px; margin-left : 100px; border-left: 1px solid #669; border-right: 1px solid #669; } /* 1カラム用 */ body.layout-one-column-liquid { background: #36414d; } /* フッタ */ .layout-one-column #footer, .layout-three-column #footer, .layout-three-column-right #footer, .layout-two-column-left #footer, .layout-two-column-right #footer, .layout-one-column-liquid #footer { margin-right: auto; margin-left: auto; border-left: 1px solid #669; border-right: 1px solid #669; border-bottom: 1px solid #669; height: 42px; color: #ffffff; background: #8fabbe; font-size: 12px; text-align: center; line-height: 3.5; } .layout-three-column #footer, .layout-three-column-right #footer { width: 850px; } .layout-two-column-left #footer, .layout-two-column-right #footer { width: 665px; } .layout-one-column #footer { width: 478px; } .layout-three-column-liquid #footer { font-size: 12px; text-align: center; padding-bottom: 15px; } .layout-two-column-liquid-left #footer, .layout-two-column-liquid-right #footer { font-size: 12px; text-align: center; padding-bottom: 15px; } .layout-one-column-liquid #footer { margin-right: 100px; margin-left : 100px; } input,textarea { font-family: "Osaka", "ヒラギノ角ゴ Pro W3", "ＭＳＰゴシック", arial, sans-serif; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-table;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */

設定後、画面左上の「テンプレート保存」をクリック。

テンプレート保存