小粋空間: BlognPlus（ぶろぐん+）スキン

Top ＞ぶろぐん＞テンプレート＞ BlognPlus（ぶろぐん+）スキン

2007年5月30日

BlognPlus（ぶろぐん+）スキン

Posted at May 30,2007 2:25 AM
Category：[テンプレート]
Tag：[BlognPlus, Template]

BlognPlus（ぶろぐん+）用のスキン（テンプレート）を作りました。サンプルのスクリーンショットは3カラムですが、2カラム・1カラムも用意しております。カラムレイアウトの設定方法につきましては本エントリーを参照ください。

１．動作確認環境

動作確認は下記の環境で行っています。

OS：Windows2000/XP
ブラウザ：IE6/IE7/Firefox2/Opera9

Mac環境はありませんので Safari での確認はできておりません。予めご容赦ください。

２．利用規定

ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します

３．カラムレイアウト変更方法

このテンプレートではカラムレイアウトのバリエーションとして、

3カラム（カラム幅固定）
3カラムリキッドレイアウト（中央カラム幅可変）
2カラム（右サイドバー：カラム幅固定）
2カラム（左サイドバー：カラム幅固定）
2カラムリキッドレイアウト（右サイドバー：左カラム幅可変）
2カラムリキッドレイアウト（左サイドバー：右カラム幅可変）
1カラム（カラム幅固定）
1カラムリキッドレイアウト（カラム幅可変）

の計8種類を用意しています（それぞれのサンプルはちょっと下にある画像をご覧ください）。

カラムレイアウトは、HTMLテンプレートの body 要素の class 属性を書き換えることで変更することができます（カラム数を変更する場合はHTMLテンプレートの修正が必要ですがこれについては後述します）。例えば、3カラムレイアウトから2カラム・リキッドレイアウト（右サイドバー）に変更したい場合は、HTMLテンプレートの

<body class="layout-three-column">

の赤色部分を

<body class="layout-two-column-liquid-right">

と、青色の内容に変更します。このテクニックは Designing with Web Standards でも紹介されています。

個別エントリー用HTMLありのテンプレートをお使いの場合、ベースHTMLと個別エントリー用HTMLで異なるレイアウトを設定することができます。例えばベースHTMLで3カラム、個別エントリー用HTMLで1カラムという設定も可能です。

以下にそれぞれのレイアウトに対する class 属性値を示します。なおサンプル画像は Movable Type のものを流用しておりますので予めご了承ください。

<body class="layout-three-column">

3カラム

<body class="layout-three-column-liquid">

3カラム・リキッドレイアウト

<body class="layout-two-column-left">

2カラム（左サイドバー）

<body class="layout-two-column-liquid-left">

2カラム・リキッドレイアウト（左サイドバー）

<body class="layout-two-column-right">

2カラム（右サイドバー）

<body class="layout-two-column-liquid-right">

2カラム・リキッドレイアウト（右サイドバー）

<body class="layout-one-column">

1カラム

<body class="layout-one-column-liquid">

1カラム・リキッドレイアウト注：左右のマージンをなくすことも可能です。

公開テンプレートは一番上の3カラムレイアウトで配布しております。

カラム数を変更、例えば3カラムから2カラム（左サイドバー）に変更した場合、管理メニューの「デザイン」→「コンテンツ」で右サイドバーに表示するものがなくなれば自動的に2カラム表示になります。
非表示にするサイドバーにコンテンツが残っている場合は、

<!-- 右カラム開始 -->
<div id="links-right-box">
<dl id="links-right">
　　　　　　　　　：
</dl><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->

を丸ごと削除してください。1カラムに変更される場合は左右両方のカラムをごっそり削除してください（いずれもサイドバーの復活が面倒なのでお勧めできません）。

４．1カラムレイアウトについて

1カラムレイアウトはポータル的な要素を排除して、個人の日記サイトとして気軽に書けるデザインにしています（言い換えると単にサイドバーをとっぱらっただけです）がアーカイブページ等のリンクは考慮しておりませんのでご注意ください。

５．クレジットバナーについて

当サイトのクレジットバナーはデフォルトで右サイドバー下に表示するようにしています。バナー画像は別のサイトから取得するようにしていますが、テンプレートのページよりダウンロードしてお使いくださっても結構です（src 属性は適宜修正してください）。なお右カラムを削除される場合は、下記のタグを左サイドバーに挿入してください。

<dd class="powered">
<ul><li>Powered by<br />
<a href="http://www.blogn.org/" target="_blank"><img src="images/blogn3.gif" alt="BLOGNPLUS（ぶろぐん＋）" border="0" /></a></li>
<li><a href="http://www.koikikukan.com/"><img src="http://blog42.fc2.com/k/koikikukan/file/banner.gif" alt="小粋空間" width="128" height="22" /></a><p><br /></p></li></ul>
</dd>

６．その他

基本的な動作は確認したつもりですが、ぶろぐんの機能を全て把握できていない状態ですので、不具合等ございましたらご連絡ください。

７．テンプレート

HTML

<?xml version="1.0" encoding="{CHARSET}"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta name="generator" content="Blogn Plus" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<link rel="stylesheet" href="{CSSNAME}" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="{HOMELINK}?mode=rss" />
<link rel="index" href="{HOMELINK}" />
<link rev="made" href="mailto:user@domain" />

<title>{SITETITLE}</title>

</head>

<body class="layout-three-column">

<div id="box">

<!-- タイトル -->
<div id="header">
<h1 id="blog-name"><a href="{HOMELINK}">{SITENAME}</a></h1>
<p class="blog-description">{SITEDESC}</p>
</div>

<!-- 左カラム開始 -->
<div id="links-left-box">
<dl id="links-left">

<!-- カレンダー開始 -->
<dd class="side" id="calendar">
<table summary="投稿した日にリンクする月別のカレンダー">
<caption class="calendarhead">{CDCTRLBACK}&laquo;{/CDCTRLBACK} {CDYM}Y年m月{/CDYM} {CDCTRLNEXT}&raquo;{/CDCTRLNEXT}</caption>
<tr>
<th abbr="Sunday"><span class="holiday">Sun</span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="saturday">Sat</span></th>
</tr>
</table>
{CALENDARBOX}
</dd>
<!-- カレンダー終了 -->

<!-- エントリーリスト開始 -->
{NE}
<dt class="sidetitle">
Recent Entries
</dt>

<dd class="side">
<ul>
{NELOOP}
  <li>{NELINK}{NETITLE} ({NEYMD}m/d{/NEYMD}){/NELINK}</li>
{/NELOOP}
</ul>
</dd>
{/NE}
<!-- エントリーリスト終了 -->

<!-- 最近のコメント開始 -->
{RC}
<dt class="sidetitle">
Recent Comments
</dt>

<dd class="side">
<ul>
{RCLOOP1}
<li>{RCTITLE}
<ul>
{RCLOOP2}
<li>{RCLINK}{RCNAME}({RCYMD}m/d{/RCYMD}){/RCLINK}</li>
{/RCLOOP2}
</ul>
</li>
{/RCLOOP1}
</ul>
</dd>
{/RC}
<!-- 最近のコメント終了 -->

<!-- 最近のトラックバック開始 -->
{RT}
<dt class="sidetitle">
Recent Trackbacks
</dt>

<dd class="side">
<ul>
{RTLOOP1}
<li>{RTTITLE}<br>
<ul>
{RTLOOP2}
<li>{RTLINK}{RTNAME}({RTYMD}m/d{/RTYMD}){/RTLINK}</li>
{/RTLOOP2}
</ul>
</li>
{/RTLOOP1}
</ul>
</dd>
{/RT}
<!-- 最近のトラックバック終了 -->

</dl><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->

<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">

<!-- リンク -->
<p class="content-nav">
   {NEXTPAGE} &laquo; 次の記事{/NEXTPAGE} | <a href="{HOMELINK}">メイン</a> | {BACKPAGE}前の記事 &raquo; {/BACKPAGE}
</p>

{SEARCH}
<div class="entry">
<div class="date">サイト内検索結果一覧</div>
   {SEARCHLOOP}
   <h2 class="entry-header">{SEARCHLIST}</h2>
   {/SEARCHLOOP}
</div>
{/SEARCH}

{PROFILES}
<div class="date">プロフィール</div>
<h2 class="entry-header">{PROFILENAME}</h2>
<div class="entry-content">
   <div class="entry_body">{PROFILEMES}</div>
</div>
{/PROFILES}

{LOG}
{LOGLOOP}
<div class="entry">

   <!-- エントリー日付開始 -->
   <div class="date">{LOGYMD}Y年m月d日（l）{/LOGYMD}</div>
   <!-- エントリー日付終了 -->

   <!-- エントリータイトル -->
   <h2 class="entry-header">{LOGTITLE}</h2>

   <!-- エントリー -->
   <div class="entry-content">
      <div class="entry-body">{LOGBODY}</div>

      <!-- 追記 -->
      {MOREMARK}
      <div class="entry-more">
         <a href="{LOGURL}#more">続きを読む &raquo;</a>
      </div>
      {/MOREMARK}
      <div id="more" class="entry-more">{LOGMORE}</div>

   </div><!-- /entry-content -->

   <!-- 投稿者情報開始 -->
   <div class="entry-footer">
Posted by {LOGAUTHOR} at {LOGHMS}h:i A{/LOGHMS} | Category : {LOGCATEGORY} | {LOGCOMMENT} | {LOGTRACKBACK} | {LOGMODE "","非公開記事"}
   </div><!-- /entry-footer -->
   <!-- 投稿者情報終了 -->

</div><!-- /entry -->

{TRACKBACK}
<div id="trackbacks" class="trackbacks">
   {TRACKBACKINPUT}
   <h3 id="trackback" class="trackbacks-header">トラックバックURL</h3>
   <!-- トラックバックURL -->
   <div id="trackbacks-info">
      <p>この記事のトラックバックURL:<br />{TRACKBACKURL}</p>
   </div>
   {/TRACKBACKINPUT}

   {TRACKBACKNOINPUT}
   <h3 id="trackback" class="trackbacks-header">この記事へのトラックバック受付は終了しています</h3>
   {/TRACKBACKNOINPUT}

   <h3 class="trackbacks-header">トラックバック</h3>

   {TRACKBACKLOOP}
   <div class="trackbacks-content">

      <!-- トラックバック本文 -->
      <div class="trackback" id="p<$MTPingID$>">
         <div class="trackback-content">
            <p>
               &raquo; {TRACKBACKTITLE} from {TRACKBACKUSER}<br />
               {TRACKBACKBODY}
            </p>
         </div>
         <p class="trackback-footer">
            Tracked on {TRACKBACKYMD}Y/m/d h:i A{/TRACKBACKYMD}
         </p>
      </div>
   </div>
   {/TRACKBACKLOOP}
</div>
{/TRACKBACK}

{TRACKBACKNEW}
<div id="trackbacks" class="trackbacks">
   <h3 id="trackback" class="trackbacks-header">トラックバックURL</h3>
   <div id="trackbacks-info">
      <p>この記事のトラックバックURL:<br />{TRACKBACKURL}</p>
   </div>
   <h3 class="trackbacks-header">新着トラックバック</h3>
   {TRACKBACKNEWLOOP}
   <div class="trackbacks-content">

      <!-- トラックバック本文 -->
      <div class="trackback" id="p<$MTPingID$>">
         <div class="trackback-content">
            <p>
               &raquo; {TRACKBACKTITLE} from {TRACKBACKUSER}<br />
               {TRACKBACKBODY}
            </p>
         </div>
         <p class="trackback-footer">
            Tracked on {TRACKBACKYMD}Y/m/d h:i A{/TRACKBACKYMD}
         </p>
      </div>
   </div>
   {/TRACKBACKNEWLOOP}
</div>
{/TRACKBACKNEW}

{TRACKBACKLIST}
<div id="trackbacks" class="trackbacks">
   <h3 id="trackback" class="trackbacks-header">トラックバックURL</h3>
   <div id="trackbacks-info">
      <p>この記事のトラックバックURL:<br />{TRACKBACKURL}</p>
   </div>
   <h3 class="trackbacks-header">トラックバック一覧</h3>
   {TRACKBACKLISTLOOP}
   <div class="trackback" id="p<$MTPingID$>">
      <div class="trackback-content">
         <p>
            {TRACKBACKTITLE}
         </p>
         <p class="trackback-footer">
            Tracked on {TRACKBACKYMD}Y/m/d h:i A{/TRACKBACKYMD}
         </p>
      </div>
   </div>
   {/TRACKBACKLISTLOOP}
</div>
{/TRACKBACKLIST}

{COMMENT}
<div id="comments" class="comments">
   <div class="comments-content">

      {COMMENTNOINPUT}
      <h3 class="comments-header">この記事に対するコメントの受付は終了しています。</h3>
      {/COMMENTNOINPUT}

      <h3 class="comments-header">コメント</h3>
      {COMMENTLOOP}
      <div class="comment" id="cmt{COMMENTID}">

         <!-- コメント本文 -->
         <div class="comment-content">{COMMENTBODY}</div>

         <!-- コメント投稿者情報 -->
         <p class="comment-footer">
            Posted by:
            {COMMENTUSER} |  {COMMENTEMAIL}E-mail{/COMMENTEMAIL} | {COMMENTURL}URL{/COMMENTURL} | {COMMENTYMD}Y/m/d h:i A{/COMMENTYMD}
         </p>
      </div>
      {/COMMENTLOOP}
   </div><!-- /comments-content -->

   {COMMENTINPUT}
   <div class="comments-open" id="comments-open">
      <h3 class="comments-open-header">コメントする</h3>

      <div class="comments-open-content">
         <form action="index.php?mode=comment" method=post>
            <input type="hidden" value="{CEID}" name="blogn_cid">
            <div id="comments-open-data">
               <p>
                  <label for="comment-author">名前:</label>
                  <input id="comment-author" name="blogn_cname" tabindex="7" accesskey="n" size="30" value="{CNAME}" />
               </p>
               <p>
                  <label for="comment-email">メールアドレス:</label>
                  <input id="comment-email" name="blogn_cemail" tabindex="8" accesskey="m" size="30" value="{CEMAIL}" />
               </p>
               <p>
                  <label for="comment-url">URL:</label>
                  <input id="comment-url" name="blogn_curl" tabindex="9" accesskey="u" size="30" value="{CURL}" />
               </p>
               <p>
                  <label for="comment-bake-cookie"><input id="comment-bake-cookie" type="checkbox" tabindex="10" accesskey="r" value="on" name="set_cookie" />情報を保存する</label>
               </p>
            </div>
            <p id="comments-open-text">
               <label for="comment-text">コメント:</label>
               <textarea id="comment-text" name="blogn_cmes" tabindex="11" accesskey="t" rows="10" cols="30"></textarea>
            </p>
            <div id="comments-open-footer" class="comments-open-footer">
               <input type="submit" tabindex="12" accesskey="s" value="投稿" />
            </div>
         </form>
      </div>
   </div>
   {/COMMENTINPUT}

</div><!-- /comments -->
{/COMMENT}

{COMMENTNEW}
<div id="comments" class="comments">
   <div class="comments-content">
      <h3 class="comments-header">新着コメント</h3>
      {COMMENTNEWLOOP}
         <div class="comment" id="cmt{COMMENTID}">
            <div class="comment-content">{COMMENTBODY}</div>
            <p class="comment-footer">
            Posted by {COMMENTUSER} |  {COMMENTEMAIL}E-mail{/COMMENTEMAIL} | {COMMENTURL}URL{/COMMENTURL} | {COMMENTYMD}Y/m/d h:i A{/COMMENTYMD}
            </p>
         </div>
      {/COMMENTNEWLOOP}
   </div>
</div>
{/COMMENTNEW}

{COMMENTLIST}
<div id="comments" class="comments">
   <div class="comment-list">
      <h3 class="comments-header">コメント一覧</h3>
      <ul>
      {COMMENTLISTLOOP}
         <li>
         {COMMENTUSER} at {COMMENTYMD}Y/m/d h:i A{/COMMENTYMD}
         </li>
      {/COMMENTLISTLOOP}
      </ul>
   </div>
</div>
{/COMMENTLIST}

{/LOGLOOP}
{/LOG}

</div><!-- /blog -->

<!-- 1カラム用フッタ
<div id="footer">
<a href="http://www.koikikukan.com/"><img src="http://user-domain/images/koikikukan.gif" alt="小粋空間" width="128" height="22" /></a> 
<a href="http://www.movabletype.jp"><img src="" alt="Movable Type " width="128" height="22" /></a>
</div>
-->

</div><!-- /content -->
<!-- 中央カラム終了 -->

<!-- 右カラム開始 -->
<div id="links-right-box">
<dl id="links-right">

<!-- 検索開始 -->
<dt class="sidetitle">
Search this site
</dt>
 
<dd class="side">
<form action="./" method="get">
<fieldset>
<input type="text" id="search" name="s" />
<input type="submit" value="検索" />
</fieldset>
</form>
</dd>
<!-- 検索終了 -->

<!-- カテゴリーリスト開始 -->
{CA}
<dt class="sidetitle">
Categories
</dt>

<dd class="side" id="categories">
<ul>
{CALOOP1}
<li>{CALINK1}{CATITLE1} [{CACOUNT1}]{/CALINK1}
{CALOOP2}
<ul><li>{CALINK2}{CATITLE2} [{CACOUNT2}]{/CALINK2}</li></ul>
{/CALOOP2}
</li>
{/CALOOP1}
</ul>
</dd>
<!-- カテゴリーリスト終了 -->
{/CA}

<!-- 月別アーカイブリスト開始 -->
{AR}
<dt class="sidetitle">
Monthly Archives
</dt>

<dd class="side">
<ul>
{ARLOOP}
<li>{ARLINK}{ARYM}Y年m月{/ARYM} [{ARCOUNT}]{/ARLINK}</li>
{/ARLOOP}
</ul>
</dd>
{/AR}
<!-- 月別アーカイブリスト終了 -->

<!-- リンク開始 -->
{LI}
<dt class="sidetitle">
Links
</dt>

<dd class="side">
<ul>
{LILOOP1}
  <li>{LICATEGORY}
    <ul>
      {LILOOP2}
        <li>{LINAME}</li>
      {/LILOOP2}
    </ul>
  </li>
{/LILOOP1}
</ul>
</dd>
{/LI}
<!-- リンク終了 -->

<!-- RSSフィード -->
<dt class="sidetitle">
RSS
</dt>
<dd class="side">
<ul>
<li><a href="{HOMELINK}?mode=rss">RSS 1.0</a></li>
</ul>
</dd>
<!-- RSSフィード終了 -->

<!-- プロフィール -->
{PR}
<dt class="sidetitle">
プロフィール
</dt>

<dd class="side">
<ul>
{PRLOOP}
<li>{PRLINK}{PRNAME}{/PRLINK} [{PRCOUNT}]</li>
{/PRLOOP}
</ul>
</dd>
{/PR}
<!-- プロフィール終了 -->

<!-- クレジットバナー -->
<dd class="powered">
<ul><li>Powered by<br />
<a href="http://www.blogn.org/" target="_blank"><img src="images/blogn3.gif" alt="BLOGNPLUS（ぶろぐん＋）" border="0" /></a></li>
<li><a href="http://www.koikikukan.com/"><img src="http://blog42.fc2.com/k/koikikukan/file/banner.gif" alt="小粋空間" width="128" height="22" /></a><p><br /></p></li></ul>
</dd>

</dl><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->

</div><!-- /box -->

<script type="text/javascript">
//<![CDATA[
var elements = document.getElementsByTagName('div');
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      : style.css
 * Version   : 1.00
 * Update    :
 *
 * Copyright (C) 2005-2007 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: 0;
}

/* 段落 */
p {
    margin-top: 15px;
    margin-bottom: 15px;
}

/* フォーム */
form {
    margin: 0px;
}
#search-options,
input {
    padding: 1px;
    font-size: 12px;
}

/* 引用 */
blockquote {
    width: auto;
    margin: 15px 20px 0 20px;
    padding: 10px;
    border: 1px solid #666;
    background: #f6f6f6;
    font-size: 10px;
    line-height: 150%;
}
.quotetitle { /* 引用文タイトル */
    font-size: 10px;
    border-bottom: 1px solid #666;
    padding: 3px;
}

/* タイトルバナー */
#header {
    padding: 15px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
/*    background-position: right top;
    background-repeat: no-repeat;
    background-image: url(".gif");*/
    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 {
    margin: 0;
    color: #fff;
    background: transparent;
    font-size: 12px;
}

/* エントリー全体 */
.blog {
    padding: 10px 15px;
}

/* エントリー日付 */
.date {
    margin: 8px 0;
    padding-left: 5px;
/*    background-position: left; 
    background-repeat: no-repeat;
    background-image: url(".gif");*/
    font-size: 83.3%;
    font-weight: bold;
    line-height: 2.0;
}

/* エントリー日付・コメントタイトル・トラックバックタイトルの配色 */
.date,
.trackbacks-header,
.comments-header,
.comments-open-header {
    color: #fff;
    background: #8fabbe;
}

/* エントリー */
.entry {
    width: auto;
    margin: 0 3px 15px;
    color: #36414d;
    background: #fff;
/*    background-position: right; 
    background-repeat: repeat-y; 
    background-image: url(".gif");*/
    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-more {}

/* エントリータイトル */
.entry-header {
    margin: 15px 0;
    padding-left: 5px;
    border-left: 3px solid #999;
    color: #444;
    font-size: 100%;
    font-weight: bold;
}

/* 投稿者 */
.entry-footer {
    margin: 10px 0 0;
    padding-top: 3px;
    border-top: 1px dotted #36414d;
    text-align: right;
    font-size: 83.3%;
}

/* 前後記事のリンク */
.content-nav {
    margin: 10px;
    text-align: center;
/*    font-size: 12px;*/
}

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #444444;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
.calendar {
    text-align: center;
    color: #444444;
    background: none;
}
table .calendar {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    width: 19px;
    font-size: 8px;
    text-align: center;
}
.cell,
.cell_saturday,
.cell_sunday,
.cell_today {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
    width: 23px;
}
.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}
.holiday {
    color: #e50003;
}
.saturday {
    color: blue;
}

#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: #444;
    background: #f6f6f6;
    text-align: center;
    font-size: 75%;
    line-height: 2.0;
}

/* サイドメニュー */
.side {
    margin: 3px 0 20px;
    background: none;
    color: #444;
    font-size: 75%;
    line-height: 1.5;
}
.side ul,
.side ol {
    padding-left: 18px;
}
html>body .side ul {
    padding-left: 14px;
}
.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;
}

/* 検索 */
fieldset {
    border: none;
}

/* カウンター */
.counter {
    margin: 8px 0 25px;
    padding: 2px;
    background: none;
    font-size: 9px;
}

/* クレジットバナー */
.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;
}

/* コメント・トラックバック */
#comments-open-data p {
    margin-bottom: 10px;
}

#comment-post {
   font-weight: bold;
}

#comment-author, #comment-email, #comment-url, #comment-text {
   width: 220px;
}

#comment-text {
    width: 266px;
}

#comment-bake-cookie {
   margin-left: 2px;
   vertical-align: middle;
}

#comments-open-footer {
    text-align: center;
}

.trackbacks,
.comments {
    margin: 10px 5px;
    color: #36414d;
}

.trackbacks-header,
.comments-header,
.comments-open-header {
    margin: 15px 0;
    padding-left: 5px;
    color: #ffffff;
    background: #8fabbe;
    font-size: 83.3%;
    font-weight: bold;
    line-height: 2.0;
}

#trackbacks-info,
.trackback-content,
.comment-content,
.comments-open-content {
    margin: 0;
    padding: 0;
    font-size: 83.3%;
    line-height: 1.5;
    word-break: break-all;
}

.trackback-content p,
.comment-content p {
    margin-top: 10px;
    margin-bottom: 5px;
}

.trackback-footer,
.comment-footer {
    font-size: 9px;
    border-top: 1px dotted #36414d;
    text-align: right;
    padding-top: 3px;
    margin-right: 2px;
}

.comments-open label {
    display: block;
}

.comments-head {
    font-size: 11px;
    color: #ffffff;
    background: #8fabbe;
    padding: 2px 0 2px 5px;
    margin: 15px 0;
}

.comment-list {
    margin: 0 0 20px 3px;
}
.comment-list li {
    font-size: 10px;
}

/* カラム切り替え */

/* 3カラム用 */
body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #36414d;
}
.layout-three-column #container,
.layout-two-column-left #container,
.layout-two-column-right #container {
    margin-bottom: 10px;
}
.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

/* 2カラム用 */
.layout-two-column-left #box,
.layout-two-column-right #box {
    width: 665px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

/* 2カラム用 */
.layout-one-column #container {
    margin-bottom: 0;
}

/* 1カラム用 */
.layout-one-column #box {
    width: 478px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    padding: 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}

/* 1カラム・リキッドレイアウト用 */
/* タイトルバナー */
.layout-one-column-liquid #banner {
    margin-right: 100px;
    margin-left : 100px;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
body.layout-one-column-liquid {
    background: #36414d;
}

/* フッタ */
.layout-one-column #footer {
    text-align: center;
}
.layout-one-column-liquid #footer {
    padding-bottom: 15px;
    text-align: center;
}

/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-three-column-liquid #links-left{
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}

/* 2カラム(リキッドレイアウト：右サイドバー) */
.layout-two-column-liquid-right #content {
    margin: 0 185px 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-two-column-liquid-right #links-right {
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    color: #ffffff;
}

/* 2カラム(リキッドレイアウト：左サイドバー) */
.layout-two-column-liquid-left #content {
    margin: 0 0 10px 185px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
}
.layout-two-column-liquid-left #links-left {
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    color: #ffffff;
}

/* 1カラム(リキッドレイアウト) */
.layout-one-column-liquid #content {
    margin: 0 100px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    background: #ffffff;
}

/* 3カラム */
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
.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;
    color: #ffffff;
}

/* 2カラム(右サイドバー) */
.layout-two-column-right #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-two-column-right #links-right-box {
    float: left;
    width: 185px;
}
.layout-two-column-right #links-right {
    padding: 15px 15px 0;
    color: #ffffff;
}

/* 2カラム(左サイドバー) */
.layout-two-column-left #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
}
.layout-two-column-left #links-left-box {
    float: left;
    width: 185px;
}
.layout-two-column-left #links-left {
    padding: 15px 15px 0;
    color: #ffffff;
}

/* 1カラム */
.layout-one-column #content {}

input,textarea {
    font-family: "Osaka", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", arial, sans-serif;
}

#box::after {
    height: 0;
    display: block;
    content: ".";
    visibility: hidden;
    clear: both;
}
#box {
    width: 100%
    /*\*/*/
    overflow: hidden;
    /**/
}

Posted by yujiro

« ブログを続けるための3つのポイント | Main | 検索結果のページ分割（3.3x 版） »

人気エントリー

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

ありがとうございます。ぶろぐん使いにとって、一筋の光です。早速、熟読して新しいテンプレートで構築しみます。もう、なんと言ってよいか。ぶろぐんのフォーラムとかにも紹介します。
取り急ぎ、大感謝を込めて。

[1] Posted by ha2 : June 11, 2007 11:15 AM

＞ha2さん
こんばんは。
コメントありがとうございました。
なお以前頂いた New マークの件ですが、調査したところ、ぶろぐんのデフォルトテンプレートでは新着カテゴリーに New マークを付与することは困難なようです。
ご連絡遅くなり申し訳ありません。またお役に立てず申し訳ありません。

[2] Posted by yujiro : June 13, 2007 1:34 AM

そうですか。。
でも、丁寧に対応して頂いて、ホントにありがとうございました。
こちらで作っていただいたテンプレートは、
ありがたく使わさせていただきますし、
これからも貴サイトを応援しています。ありがとうございました。

[3] Posted by ha2 : June 21, 2007 12:24 AM

＞ha2さん
こんにちは。
ご連絡ありがとうございました。
機会があれば何かカスタマイズ記事を投稿したいと思います。
ではでは！

[4] Posted by yujiro : June 23, 2007 12:15 PM

コメントする

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

お知らせ：2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

コメント（C）:

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

小粋空間 - a cheap joke and a play on words site