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

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

News

各種ブログテンプレート

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">
         <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">
         <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">
      <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;
    /**/
}

2009.07.16 Movable Type 用のタグがあったため削除しました。

Posted by yujiro ReTweet This!

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

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバック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

BlognPlus（ぶろぐん+）用のスキンをＶｉｓｔａにて使わせて頂いております・・現在問題は有りませんが、先週よりWindows７（ベータ版）を試しておりＥｘｐｌｏｒｅｒ８でブログを見ますとメイン部分以外濃いグレイになり、コメント部分は反転しないと見えない状態です。
他のブラウザＥｘｐｌｏｒｅｒ７，６、Ｆｉｒｅｆｏｘ、Ｓｌｅｉｐｎｉｒ、Ｓａｆａｒｉは問題なしです。

ＨＴＭＬ、スタイルシートで変更すべき項目はあるでしょうか？
宜しくお願いいたします。

[5] Posted by chappy : March 27, 2009 3:07 PM

＞chappyさん
こんにちは。
スキンご利用ありがとうございます。
申し訳ありませんが同一環境がないため、こちらでは確認および対処方法がご提示できない状況です。
それではよろしくお願い致します。

[6] Posted by yujiro

: April 5, 2009 3:30 PM

＞chappyさん
VistaとかWin7とか関係ないですね。それを言うなら"XPも"加えないと＾＾；

私も「IE8」で確認しました。ただし、互換表示すれば問題ありません（実は問題かもですが＾＾；）。

CSSを比べていないのでアレですが、WordPressのテンプレートでは再現しないので、ぶろぐんのCSSが特殊なんでしょうか？

[7] Posted by WIND : July 16, 2009 12:46 PM

連投すみません、大事な事忘れてました。

スキン内のトラックバック関連にMTのタグが使われています＾＾；

[8] Posted by WIND : July 16, 2009 12:57 PM

＞WINDさん
こんにちは。
ご指摘ありがとうございました！
とりあえずMTのタグは削除いたしました。
それではよろしくお願い致します。

[9] Posted by yujiro

: July 16, 2009 1:29 PM

はじめまして。Blognについていろいろ知りたいのですが、詳しく書かれているサイトなどがあまりないため、もし相談にのっていただけると嬉しいです。私はHPビルダーで作成したサイトを8年ほど運営してきたのですが、このたびブログ型サイトに移行しようとしていて、どのブログが良いか調べていてBlognにたどりつきました。ただ、テンプレートをHPビルダーでやるように自由にレイアウトを変えたいのですが、どこをどうしたら良いか悩んでいます。HTMLとCSS両方を修正する必要があるのでしょうか。Blognはスキンのレイアウトを自由に変えることは難しいでしょうか？例えばこんな感じです・・・http://www.werockcity.com/。よろしくお願いいたします。

[10] Posted by Romi : October 6, 2009 1:01 PM

＞Romiさん
こんばんは。
ご返事遅くなってすいません。
ご質問の件ですが、レイアウトやデザインを比較的自由に変更できるのがブログツールのメリットと思いますが、HTMLやCSSを直接修正する作業がメインになります。
レイアウトを変更したい場合は、HTMLテンプレートの内容を書き換えてください。ただし、CSSの設定が変更したレイアウトに対応していないと、CSSもあわせて修正する必要があります（＝利用するテンプレートによって異なります）。

なお、当サイトのテンプレートをご利用いただければ、３項に示すとおり、body要素のclass属性値の変更と、HTMLのわずかな変更でカラムレイアウトを変更することもできます（CSSの変更は不要です）。ご提示のURLの2カラムレイアウトにも変更できます（幅を変更するにはCSSの修正が必要です）ので、修正内容で不明な点がありましたらご連絡ください。

それではよろしくお願い致します。

[11] Posted by yujiro

: October 14, 2009 8:17 PM

ご返信ありがとうございます！
他のサイトのテンプレートを取り込んでいろいろやっていましたが、なかなかHPビルダーで作成しているときのようにはいきません・・・。
こちらのテンプレートでも試してみます。また、何か分からないことがあったら書き込ませていただくかもしれませんが、その時はまたよろしくお願いいたします。

[12] Posted by Romi : October 15, 2009 3:21 PM

お久し振りです。Blognのテンプレートをいろいろカスタマイズをしているのですが、判らない事があります。カテゴリーのリンクが長いアドレスになってしまうのですが、こちらのサイトのようにxxx.phpのようにするにはどうしたら良いのでしょうか？管理画面でカテゴリーを追加しているのですが、xxxindex.php?=c.....などのようになってしまいます。また、基本的な事なんですが、投稿した記事は何処に蓄積されるのでしょうか？こちらで質問して良いものかどうか判りませんが、もし教えて頂ければ幸いです。よろしくお願いいたします。

[13] Posted by Romi : November 22, 2009 7:08 PM

＞Romiさん
こんばんは。
ご返事遅くなってすいません。
ご質問の件ですが、このブログはBlognではなく、MTで構築しているため、URLについては適切な回答を行なうことはできません。お役に立てず申し訳ありません。

投稿した記事は、データベースに保存されると思います。
それではよろしくお願い致します。

[14] Posted by yujiro

: December 1, 2009 12:15 AM

失礼いたしました。
変な質問をしてしまいましてすみません。
現在Joomlaに興味を持ち始めていて、そちらを試してみようかと思っています。ありがとうございました。

[15] Posted by Romi : December 1, 2009 9:53 AM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

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

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

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