小粋空間: テンプレート: 2006年4月アーカイブ

Top ＞ Seesaaブログ＞テンプレート＞ 2006年4月

2006年4月10日

Seesaaブログテンプレート

April 10,2006 1:10 AM
Tag：[Blog, Seesaa, Template]
Permalink

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

１．動作確認環境

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

OS：Windows2000/XP
ブラウザ：IE6.0/Firefox1.0.7/Netscape7.1/Netscape8.0.4/Opera8.5
Seesaaブログ：http://koikikukan.seesaa.net/

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カラム表示になります。
非表示にするサイドバーにコンテンツが残っている場合は、

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

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

４．コンテンツについて

このテンプレートでは、管理メニューの「デザイン」→「コンテンツ」の設定下記であることを想定しています。

ブログ名：ヘッダー
ブログ説明：ヘッダー
カレンダー：左サイドバー／右サイドバー
新着記事：左サイドバー／右サイドバー
最近のコメント：左サイドバー／右サイドバー
最近のトラックバック：左サイドバー／右サイドバー
記事：メイン
記事検索：左サイドバー／右サイドバー
ブログクリック：左サイドバー／右サイドバー
カテゴリ：左サイドバー／右サイドバー
過去ログ：左サイドバー／右サイドバー
RDF Site Summary：左サイドバー／右サイドバー
Powered By：フッター

表示するページ・並び順は任意ですが、ページ毎にカラムレイアウトが異ならないようにしてください。例えばトップページで3カラム・記事ページで2カラムという設定はできませんのでご注意ください。

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

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

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

当サイトのクレジットバナーはデフォルトで右サイドバー下に表示するようにしています。右カラムを削除される場合は下記のタグを左サイドバーに挿入してください。

<div class="side">
<a href="http://www.koikikukan.com/"><img src="http://koikikukan.up.seesaa.net/image/koikikukan.gif" alt="小粋空間" style="border:none" /></a>
</div>

７．その他

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

８．テンプレート

2006.10.21 Mozilla 系でフッタのバナーがセンタリングされない不具合を修正

HTML

<?xml version="1.0" encoding="Shift_JIS"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title><% blog.title %><% if:extra_title %>: <% extra_title %><% /if %></title>
<meta name="description" content="<% blog.description | nl2br | tag_strip %>" />
<meta name="keywords" content="<% blog.keywords | oneline | tag_strip | __or__ | blog.title | oneline | tag_strip %><% extra_keywords | oneline | tag_strip %>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="<% css.page_url(page) %>" type="text/css" />
<link rel="alternate" href="<% blog.page_url %>index.rdf" type="application/rss+xml" title="RSS" />
<% if:blog.has_foaf -%>
<link rel="meta" type="application/rdf+xml" title="FOAF" href="<% blog.page_url %>foaf.rdf" />
<% /if -%>
</head>
<body class="layout-three-column">

<div id="box">

<script type="text/javascript" src="<% site_info.blog_url %>/contents/js/ad_plugin.js"></script>
<div id="banner">
<% content_header %>
</div>

<% if:have_content_left -%>
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
<% content_left %>
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
<% /if -%>

<!-- 中央カラム開始 -->
<div id="content">
<% content_main %>
<% if:page_name eq 'comment' -%>
<div id="blog-comments">
<div class="comments-head">コメントの確認</div>

<form action="/pages/user/comments2/regist/input" method="post">
<input type="hidden" name="article_id" value="" />
<input type="hidden" name="article_child__article_id" value="" />
<div class="comments-preview">

<% if error_code %>
<blockquote class="error_message">
エラー：
<% if error_code eq '1' %>
投稿に失敗しました。
<% /if %>
<% if error_code eq '2' %>
未入力項目があります。
<% /if %>
<% if error_code eq '3' %>
認証コードのチェックに失敗しました。
<% /if %>
<% if error_code eq '4' %>
半角英数字のみのコメントは受付ません。
<% /if %>
</blockquote>
<% /if %>

<p>
お名前: <% article_child__writer | html %>
<input id="article_child__writer" type="hidden" name="article_child__writer" value="" />
</p>
<p>
メールアドレス: <% article_child__email | html %>
<input id="article_child__email" type="hidden" name="article_child__email" value="" />
</p>
<p>
ホームページアドレス: <% article_child__homepage | html %>
<input id="article_child__homepage" type="hidden" name="article_child__homepage" size="50" value="" />
</p>
<p>
コメント: <br /><% article_child__body | html | nl2br | clickable('target="_blank" rel="nofollow"') %>
<input type="hidden" name="article_child__body">
<% if:blog.ignore_setting.captcha_comment -%><input type="hidden" name="captcha_comment" /><% /if -%>
</p>
<p class="button">
<input id="posted" name="posted" type="submit" class="input-submit"  value="書き込む"> <br />
</p>
</div>
</form>

<form action="/pages/user/comments2/regist/input" method="post">
<div class="comments-preview">
<p>
<label for="article_child__writer">お名前: <% if:blog.ignore_setting.fill_writer %>[必須]<% /if %></label>
<input id="article_child__writer" type="text" name="article_child__writer" size="50" value="" /><br />
</p>
<p>
<label for="article_child__email">メールアドレス: <% if:blog.ignore_setting.fill_email %>[必須]<% /if %></label>
<input id="article_child__email" type="text" name="article_child__email" size="50" value="" /><br />
</p>
<p>
<label for="article_child__homepage">URL: <% if:blog.ignore_setting.fill_homepage %>[必須]<% /if %></label>
<input id="article_child__homepage" type="text" name="article_child__homepage" size="50" value="" /><br />
</p>
<p>
<label for="article_child__body">コメント: <% if:blog.ignore_setting.fill_body %>[必須]<% /if %></label>
<textarea id="article_child__body" name="article_child__body" rows="10" cols="50"></textarea><br />
</p>
<input type="hidden" name="article_child__article_id" value="" />
<input type="hidden" name="article_id" value="" />

<% if:blog.ignore_setting.captcha_comment -%>
<p>
<label for="captcha_comment">認証コード: [必須]</label>
<img src="<% blog.ignore_setting.page_url_captcha_comment -%>" /> <input id="captcha_comment" type="text" name="captcha_comment" size="27" value="" style="vertical-align:top"/><br />
※画像の中の文字を半角で入力してください。
</p>
<% /if -%>
<% if:blog.ignore_setting.banascii_comment -%>
<% /if -%>
<% if:article.accept_comment_permission_mode -%>
<p>
※ブログオーナーが承認したコメントのみ表示されます。
</p>
<% /if -%>
<p class="button">
<input id="need_confirm" name="need_confirm" type="submit" class="input-submit"  value="確認する" /><input id="posted" name="posted" type="submit" class="input-submit"  value="書き込む" />
</p>
</div>
</form>
</div>
<% /if -%>

<% if:page_name eq 'search' -%>
<% loop:list_article %>
<div class="blog">
<h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2>
<div class="blogbody">
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
<div class="text"><% article.entire_body | text_summary(240) %></div>
<div class="posted">posted by <% article.nickname %> at <% article.createstamp | date_format("%H:%M") -%></div>
</div>
</div>
<% /loop %>
<% /if -%>

<% if:page_name eq 'tag' -%>
<div class="tag">
<script type="text/javascript" language="javascript" src="<% site_info.blog_url %>/js/tag_cloud.js"></script>
<div id="tag_cloud"><% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" class="_tag" title="<% tag.word | html %>/<% count %>"><% tag.word | html %></a> <% /loop -%></div>
<script type="text/javascript"><!--
tag_cloud("tag_cloud");
//--></script>
<br />
<% if:tag %><div class="tag-title">タグ&nbsp;/&nbsp;<% tag.word | html %></div><% /if -%>
<br />
<% loop:list_service -%>
<div class="tag-body">
<div class="tag-service"><% tag_service.title %></div>
<div class="tag-search"><a href="<% tag_service.page_url(tag) %>" target="_blank">'<% tag.word %>'&nbsp;でSeesaa全体を検索する</a></div>
<% if:tag_service.service_key eq 'articles' -%>
<% loop:list_data -%>
<div class="tag-article">
<div class="tag-article-title"><a href="<% article.page_url %>"><% article.subject %></a>&nbsp;<span class="tag-article-posted">[<% article.createstamp | date_format("%Y/%m/%d %H:%M") %>]</span></div>
<!--<div class="tag-article-summary"><% article.entire_body | text_summary(40) | tag_strip %></div>-->
</div>
<% /loop -%>
<% /if -%>
<% if:tag_service.service_key eq 'photos' -%>
<% loop:list_data -%>
<div class="tag-photos">
<% thumbnail.fix_aspect(132) # サムネイルの長辺を132で固定。固定したくない場合は削除。 -%>
<table>
<tr>
<td height="140" valign="bottom"><a href="<% photo.page_url %>" target="_blank"><img src="<% thumbnail.page_url %>" border="0" width="<% thumbnail.width %>" height="<% thumbnail.height %>" /></a></td>
</tr>
</table>
<div class="tag-photos-title"><a href="<% photo.page_url %>" target="_blank"><% photo.title | text_summary(10) %></a><br />
<% if:photo_info -%>
サイズ：<% photo_info.width %>×<% photo_info.height %><br />
<% if:photo_info.size %>容量：<% photo_info.size | filesize %><% /if %>
<% /if -%>
</div>
</div>
<% /loop -%>
<% /if -%>
<% if:tag_service.service_key eq 'audios' -%>
<% loop:list_data -%>
<div class="tag-audios">
<div class="tag-audios-title"><a href="/pages/user/upload/<% audio.page_url %>" onclick="window.open('/pages/user/upload/<% audio.page_url %>','popup','width=490,height=320,scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><% audio.title | text_summary(40) %></a>&nbsp;
<span class="tag-audios-posted"><% if:audio_info -%><% if:audio_info.author %>by <% audio_info.author %>&nbsp;&nbsp;<% /if %><% if:audio_info.duration %><% audio_info.duration | hms %>&nbsp;&nbsp;<% /if %><% if:audio_info.size %><% audio.size | filesize %>&nbsp;&nbsp;<% /if %><% /if -%></span></div>
</div>
<% /loop -%>
<% /if -%>
<% if:tag_service.service_key eq 'videos' -%>
<% loop:list_data -%>
<div class="tag-videos">
<table>
<tr>
<td height="140" valign="bottom"><div class="tag-videos-title"><a href="/pages/user/upload/<% video.page_url %>" onclick="window.open('/pages/user/upload/<% video.page_url %>','popup','width=480,height=550,scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><img src="<% thumbnail.page_url %>" width="132" border="0" /></a></div></td>
</tr>
</table>
<div class="tag-videos-title"><a href="/pages/user/upload/<% video.page_url %>" onclick="window.open('/pages/user/upload/<% video.page_url %>','popup','width=480,height=550,scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><% video.title | text_summary(15) %></a><br />
<% if:video_info -%>
<!--<% if:video_info.author %>by <% video_info.author %><br /><% /if %>-->
時間：<% if:video_info.duration %><% video_info.duration | hms %><% /if %><br />
容量：<% video.size | filesize %><br />
<% /if -%>
</div>
</div>
<% /loop -%>
<% /if %>
<% if:tag_service.service_key eq 'files' -%>
<% loop:list_data -%>
<div class="tag-files">
<div class="tag-files-title"><a href="/pages/user/upload/<% file.page_url %>" target="_blank"><% file.title | text_summary(15) %></a></div>
</div>
<% /loop -%>
<% /if -%>
<% if:pager -%>
<div class="tag-navi">
<% if:pager.previous_page %><a href="?page=<% pager.previous_page %>"><% /if %>≪前へ<% if:pager.previous_page %></a><% /if %>&nbsp;&nbsp;<% if:pager.next_page %><a href="?page=<% pager.next_page %>"><% /if %>次へ≫<% if:pager.next_page %></a><% /if %>
</div>
<% else -%>
<div class="tag-more"><a href="<% blog.tag_url(tag, tag_service.service_key) %>">≫もっと見る</a></div>
<% /if -%>
</div>
<% /loop -%>
</div>
<% /if -%>

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

<% if:have_content_right -%>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<% content_right %>

<div class="side">
<a href="http://www.koikikukan.com/"><img src="http://koikikukan.up.seesaa.net/image/koikikukan.gif" alt="小粋空間" /></a>
</div>

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

<br class="clear" />

<div id="footer">
<% content_footer -%>
</div>

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

</body>
</html>

スタイルシート

@charset "shift-jis";

/*
 * File      : styles-index.css
 * Version   : 1.00
 * Update    :
 * 1.01 2006.06.10: add red and error_message class selector.
 *
 * Copyright (C) 2004-2006 www.koikikukan.com All rights reserved.
 */

/* すべて */
* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
}

/* 見出し */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

/* リンク */
a,
a:link,
a:visited {
    color: #006699;
    text-decoration: none;
}
a:hover {
    color: #006699;
    text-decoration: underline;
}
a:active {}

/* リンクつき画像 */
a img {
    border: 0;
}

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

/* 順序なしリスト */
ul {
    padding-left: 16px;
}
ul li {
    list-style-type: circle;
}

/* 定義リスト */
dl {}
dt {}
dd {
    padding-left: 8px;
}

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

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

/* タイトルバナー */
#banner {
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
/*    background-position: right top;
    background-repeat: no-repeat;
    background-image: url(".gif");*/
    text-align: left;
}

#banner a,
#banner a:link,
#banner a:visited {
    color: #ffffff;
    font-size: 32px;
    text-decoration: none;
}
#banner a:hover {}
#banner a:active {}

/* タイトルバナー下の説明 */
.description {
    color: #ffffff;
    font-size: 12px;
}

/* エントリー全体 */
.blog {
    padding: 5px 10px 0 10px;
    background: none;
}

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

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

/* エントリー */
.blogbody {
    width: auto;
    margin: 0 5px 15px;
    color: #36414d;
    background: #ffffff;
/*    background-position: right; 
    background-repeat: repeat-y; 
    background-image: url(".gif");*/
    font-size: 12px;
    line-height:150%;
    word-break: break-all;
}
.blogbody a:active {}
.blogbody img {
    margin-right: 8px;
    margin-bottom: 5px;
}

/* エントリーのテキストエリア可変長指定 */
.blogbody textarea {
    width: 97%;
}

/* 追記 */
.blogbody .extended {}

/* エントリータイトル */
h3.title {
    margin: 15px 0 10px;
    font-size: 12px;
    font-weight: bold;
}
h3.title a:link,
h3.title a:visited {
    color: #444444;
}

.text ul {
    padding-left: 35px;
}

.text ul li {
}

/* 投稿者 */
.posted {
    margin: 10px 0 0 0;
    border-top: 1px dotted #36414d;
    text-align: right;
    color: #36414d;
    font-size: 10px;
    _font-size: 9px;
}

/* アーカイブページの前後リンク */
.navi {
    padding: 15px 15px 0;
    text-align: center;
    font-size: 12px;
}

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #444444;
    font-size: 10px;
    background: none;
    letter-spacing: 0.2em;
}
#calendar {
    text-align: center;
    color: #444444;
    background: none;
    margin-bottom: 15px;
}
#calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
#calendar th {
    padding-bottom: 3px;
    font-size: 10px;
    width: 23px;
    font-weight: normal;
}
#calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}

/* サイドメニュータイトル */
.sidetitle {
    margin-top: 3px;
    padding: 2px 0 1px;
    _padding: 1px 0 2px;
    border: 1px solid  #666666;
    text-align: center;
    color: #444444;
    background: #f6f6f6;
    font-size: 10px;
    line-height: 140%;
}

/* サイドメニュー */
.side {
    margin: 3px 0 20px;
    background: none;
    color: #444444;
    font-size: 10px;
    _font-size: 9px;
    line-height: 150%;
}

/* RSSフィード */
.syndicate {
    margin-bottom: 5px;
    text-align: left;
    color: #666666;
    font-size: 9px;
    line-height: 150%;
}

/* クレジットバナー */
.banner {
    text-align: left;
    margin-bottom: 5px;
}

.clear {
    clear: both;
}

/* コメント・トラックバック */
#comments {
    margin: 10px 15px;
    font-size: 12px;
}

#blog-comments {
    padding: 3px 15px 0 15px;
}

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

.comments-body input {
    margin:0 0 10px 0;
}

.comments-post {
    margin-right: 2px;
    padding-top: 3px;
    border-top: 1px dotted #36414d;
    color: #444444;
    text-align: right;
    font-size: 10px;
    _font-size: 9px;
}

.comments-preview p {
    margin: 5px 0 3px;
    font-size: 12px;
    line-height:150%;
}

label {
    display: block;
    font-size: 12px;
}

.text {
    margin: 10px 0;
    color: #444444;
    line-height:150%;
}

.red {
    color: #e50003;
}

p.button {
    margin:10px 0;
}

#trackback {
    font-size: 12px;
    margin: 20px 15px;
}
#trackback hr {
    margin: 10px 0;
}

/* カラム切り替え */

/* 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 {
    padding-bottom: 10px;
}
.layout-one-column-liquid #footer {
    padding-bottom: 15px;
    text-align: center;
}
.layout-three-column #footer,
.layout-two-column-left #footer,
.layout-two-column-right #footer {
    text-align: center;
}
.layout-three-column-liquid #footer,
.layout-two-column-liquid-left #footer,
.layout-two-column-liquid-right #footer {
    text-align: center;
    padding-bottom: 10px;
}
.powered {
    margin-left: auto;
    margin-right: auto;
    width: 138px;
}

/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px;
    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: 100px;
    left: 15px;
    padding-bottom:20px;
    color: #ffffff;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 100px;
    right: 15px;
    padding-bottom:20px;
    color: #ffffff;
}

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

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

/* 1カラム(リキッドレイアウト) */
.layout-one-column-liquid #content {
    margin: 0 100px;
    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 5px 0;
    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 5px 0;
    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 5px 0;
    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;
}

.tag-word {
    margin: 20px 0px 0px 0px;
    line-height: 1.4em;
}

/* タグページ全体 */
.tag {
    padding: 18px 15px 0 15px;
    position:relative;
}
.tag a {
    color:#006699;
}

/* タグページの罫線 */
#tag_cloud {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}
#tag_cloud a {
    padding: 2px;
}

/* タグページのタグタイトル */
.tag-title {
    padding: 2px 0 2px 5px;
    background: #8fabbe;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
}

/* タグ一覧全体 */
.tag-body {
}

/* タグ一覧の「記事」の部分 */
.tag-service {
    padding: 0 0 5px 0;
    border-bottom: 1px solid #ccc;
    color: #444444;
    _font-size: 12px;
    text-align: left;
    clear: left;
}

/* タグ一覧の「?で全体を検索する」の部分 */
.tag-search {
    margin-bottom: 10px;
    padding: 5px 0;
    text-align: right;
}
.tag-search a {
    font-size: 10px;
}

/* タグ一覧 */
.tag-article {
    padding: 0 0 10px 0;
    text-align: left;
}

/* タグ一覧の記事タイトル */
.tag-article-title {
    padding: 0 0 5px 0;
    _font-size: 12px;
    text-align: left;
}

/* タグ一覧の投稿時間 */
.tag-article-posted {
    color: #444444;
}

/* タグ一覧のサマリー(デフォルトはコメントアウト) */
.tag-article-summary {
    padding-left: 20px;
    _font-size: 12px;
    line-height: 150%;
}

/* 「≫もっと見る」の部分 */
.tag-more {
    margin: 10px 0px;
    font-size: 11px;
    text-align: right;
    clear: left;
}

.tag-photos {
    float: left;
    margin: 10px;
    position: relative;
    width: 150px;
    height: 200px;
}
.tag-photos-title {
    line-height: 1.4em;
    padding: 5px 0px;
    text-align: left;
    position: relative;
}
.tag-audios {
    margin: 5px;
    position: relative;
}
.tag-audios-title {
    text-align: left;
    font-weight: bold;
    padding: 0px 0px 5px 0px;
    position: relative;
}
.tag-audios-posted {
    font-weight: normal;
    position: relative;
}
.tag-videos {
    float: left;
    margin: 10px;
    position: relative;
}
.tag-videos-title {
    line-height: 1.4em;
    padding: 5px 0px;
    text-align: left;
    position: relative;
}
.tag-navi {
    clear: left;
    text-align: center;
    margin: 10px 0px;
    position: relative;
}

2006.12.16
タグクラウド対応するよう修正しました。

2007.03.03
タグクラウド対応で JavaScript エラーが出る不具合を対処しました。

2007.07.03
６項のタグを修正しました。

Comments [110] | Trackbacks [19]

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