小粋空間: テンプレートアーカイブ

Top ＞ Seesaaブログ＞テンプレート [全て開く]

2008年7月23日

Seesaa ブログテンプレートのカラムレイアウトを変更する

July 23,2008 2:05 AM
Tag：[Seesaa, Template]
Permalink

当ブログで配布中の Seesaa ブログテンプレートの3カラムレイアウトを切り返るカスタマイズです。
ご質問を頂きましたので本エントリーにて紹介致します。

１．デフォルトの3カラムレイアウト

デフォルトの3カラムレイアウトのCSSは次のようになっています。赤色の部分が左サイドバー表示用タグです。次項でこの部分を移動します。

...前略...
<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 %>
...中略...
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<% if:have_content_right -%>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<% content_right %>
 
<div class="side">
<img src="http://koikikukan.up.seesaa.net/image/koikikukan.gif" alt="小粋空間" />
</div>
 
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
<% /if -%>
...後略...

表示例

3カラム

２．サイドバーを右側に表示する1

2つのサイドバーを右側に表示するには、１項の左サイドバー表示用タグ（赤色部分）を次のように、中央カラム表示用タグと右サイドバー表示用タグの間に移動します（青色部分）。

...前略...
<div id="banner">
<% content_header %>
</div>
 
<!-- 中央カラム開始 -->
<div id="content">
<% content_main %>
...中略...
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<% if:have_content_left -%>
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
<% content_left %>
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
<% /if -%>
 
<% if:have_content_right -%>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<% content_right %>
 
<div class="side">
<img src="http://koikikukan.up.seesaa.net/image/koikikukan.gif" alt="小粋空間" />
</div>
 
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
<% /if -%>
...後略...

完成例

3カラム

３．サイドバーを右側に表示する2

１項の左サイドバー表示用タグ（赤色部分）を、右サイドバー表示用タグの下に移動すれば、サイドバーの表示順序を入れ替えることができます。

...前略...
<div id="banner">
<% content_header %>
</div>
 
<!-- 中央カラム開始 -->
<div id="content">
<% content_main %>
...中略...
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<% if:have_content_right -%>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<% content_right %>
 
<div class="side">
<img src="http://koikikukan.up.seesaa.net/image/koikikukan.gif" alt="小粋空間" />
</div>
 
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
<% /if -%>
 
<% if:have_content_left -%>
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
<% content_left %>
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
<% /if -%>
...後略...

完成例

3カラム

４．サイドバーを左側に表示する

2つのサイドバーを左側に表示するには、中央カラム表示用タグの直前に、右サイドバー表示用タグを移動します（青色部分）。

...前略...
<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 -%>
 
<% if:have_content_right -%>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<% content_right %>
 
<div class="side">
<img src="http://koikikukan.up.seesaa.net/image/koikikukan.gif" alt="小粋空間" />
</div>
 
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
<% /if -%>
 
<!-- 中央カラム開始 -->
<div id="content">
<% content_main %>
...中略...
</div><!-- /content -->
<!-- 中央カラム終了 -->
 ...後略...

完成例

3カラム

Comments [8] | Trackbacks [0]

2007年4月 3日

中央カラムに「ニュース」「お知らせ」を表示する

April 3,2007 2:08 AM
Tag：[Customize, Template]
Permalink

公開テンプレートの中央カラムの先頭に「ニュース」「お知らせ」等の、エントリーとは別のちょっとした情報を表示させる方法です。ご質問を頂きましたので本エントリーにて紹介致します。

ここでは Movable Type をサンプルに説明していますが、公開テンプレートであればどれも大体同じカスタマイズで実現可能です。

１．テンプレートの修正

基本は下記のように、テンプレートの中にあるエントリー表示開始位置の少し前に、表示したい情報（青色）を埋め込みます。ここではエントリーと同じスタイルになるようにタイトルと本文を表示しています。

　　　　：
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<div class="entry">
<p class="news-header">●お知らせ</p>
<p class="news-content">ブログを始めました。よろしくお願い致します。</p>
</div>
 
<MTEntries>
<$MTEntryTrackbackData$>
 
<!-- エントリー日付開始 -->
<MTDateHeader>
<div class="date"><$MTEntryDate format="%x"$></div>
</MTDateHeader>
<!-- エントリー日付終了 -->
　　　　：

追加部分全体を div 要素で括り、エントリーと同じ class="entry" を与えています。これで全体のスタイルがエントリーと同じものになります。

その下のタイトルは class="news-header" という新しい class 属性を与え、表示位置を整えています。また本文の p 要素にも class="news-content" を与えています。

２．スタイルシートの修正

下記の内容をスタイルシートに追加します。

.news-header {
    margin: 5px 0;
    color: #444444;
    font-size: 12px;
    font-weight: bold;
}
.news-content {
    margin-top: 5px;
}

設定は以上です、あとは表示したいタイトルと本文をお好きな内容に書き換えてください。

ただしこの方法では、メインページやアーカイブページに同じ情報を表示したい場合、各テンプレート全てを修正する必要があります。次項ではもう少し変更時の手間が省ける方法を紹介します。

３．テンプレートモジュールにする

お知らせ部分を「テンプレートモジュール」として登録すれば、モジュールの中身を書き換えるだけで、他のテンプレートに同じ内容を反映させることができます。

３．１新しいテンプレートモジュールの作成

管理メニューより[テンプレート] - [モジュール] - [モジュールを新規作成] の順にクリックし、下記の内容を設定します。

テンプレート名：news
モジュールの内容：下記をコピー

<div class="entry">
<p class="news-header">●お知らせ</p>
<p class="news-content">ブログを始めました。よろしくお願い致します。</p>
</div>

３．２テンプレートの修正

テンプレートモジュールの内容を表示させたい位置に MTInclude タグを設定します。

　　　　：
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<$MTInclude module="news"$>
 
<MTEntries>
<$MTEntryTrackbackData$>
 
<!-- エントリー日付開始 -->
<MTDateHeader>
<div class="date"><$MTEntryDate format="%x"$></div>
</MTDateHeader>
<!-- エントリー日付終了 -->
　　　　：

スタイルシートは２項の内容をそのままお使いください。

なおこの方法を利用した場合、テンプレートモジュールの内容を変更・保存しただけではメインページや他のアーカイブページに反映されません。
必ず再構築を実施してください。

Comments [10] | Trackbacks [2]

2007年3月 3日

Seesaa ブログテンプレート・不具合修正のお知らせ

March 3,2007 1:55 AM
Tag：[Seesaa, Template]
Permalink

現在公開中の「Seesaa ブログテンプレート」に一部不具合がありましたのでお知らせ致します。

１．不具合の事象

タグクラウドをクリックした次のページで JavaScript エラーが発生する場合があります。

２．原因

HTML に埋め込んでいるタグクラウド用 JavaScript のコメント文誤りです。

３．対処

この不具合を解消するためには、HTML の下記の部分

<script type="text/javascript" language="javascript"><!--
tag_cloud("tag_cloud");
--></script>

を

<script type="text/javascript"><!--
tag_cloud("tag_cloud");
//--></script>

に修正してください。
元記事の「Seesaa ブログテンプレート」は修正済ですので、HTML をカスタマイズされていないのであれば全て入れ替えても結構です。

４．その他

script 要素の language 属性は、仕様で非推奨（あるいは廃止）の属性ですので、ついでに削除しておきました。

以上です。
ご迷惑をおかけして申し訳ございませんがよろしくお願い致します。

Comments [0] | Trackbacks [0]

2006年12月16日

Seesaa ブログテンプレート更新（タグリスト・タグクラウド対応）

December 16,2006 2:50 AM
Tag：[Seesaa, Template]
Permalink

現在配布中の Seesaa ブログテンプレートを、タグリスト・タグクラウド対応にしました。

タグリストは、まず「記事投稿」または「記事一覧」で記事を編集する際に「記事のタグ」欄があり、この部分に任意のタグ名を設定すると、ブログで表示される記事の下に「タグ」が表示されます。表示されたタグ名のリンクをクリックすると同一タグ名を割り振った記事リスト（タグリスト：左スクリーンショット）が表示されます。
このタグリストのページの HTML およびスタイルシートを追加しました。

またサイドバーの「タグクラウド」に対応するスタイルシートも追加しました。デフォルトテンプレートで配布されているスタイルシートには説明がないため、一部コメントで補足しております。タグ部分のスタイルを変更される場合の参考になれば幸いです。

サンプル（Seesaa ブログ実験サイト）

元記事はすでに修正済ですが、2006年12月16日以前に Seesaa ブログテンプレートをご利用になっている方は、下記のテキストエリアに表示している差分を、現在ご利用中の HTML およびスタイルシートに追加してください。HTML の挿入位置はリスト 1 の通りです。

リスト1　HTML挿入部分

　　　　　：
<% 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 -%>
 
ここに下記のテンプレートを挿入
 
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<% if:have_content_right -%>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
　　　　　：

スタイルシートの追加分は最後の方に追加してください。

HTML
<% if:page_name eq 'tag' -%> <div class="tag"> <script type="text/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" >  </script> <br /> <% if:tag %><div class="tag-title">タグ / <% 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 %>' で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> <span class="tag-article-posted">[<% article.createstamp | date_format("%Y/%m/%d %H:%M") %>]</span></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>  <span class="tag-audios-posted"><% if:audio_info -%><% if:audio_info.author %>by <% audio_info.author %>  <% /if %><% if:audio_info.duration %><% audio_info.duration | hms %>  <% /if %><% if:audio_info.size %><% audio.size | filesize %>  <% /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.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 %>  <% 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 -%>

スタイルシート
.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; }

上記の差分 HTML（あるいは改修後の配布テンプレート）をそのまま利用した場合、タグリストのページには記事のタイトルと投稿時間のみが表示されます。冒頭のスクリーンショットのように、記事本文の一部を表示させたい場合は、HTML に含まれる、

リスト2　タグリストに記事本文を表示する場合の修正箇所

　　　　　　：
<!--<div class="tag-article-summary"><% article.entire_body | text_summary(40) | tag_strip %></div>-->
　　　　　　：

の赤色部分を削除してください。(40)になっている数字を変更すると表示文字数を変更できます。

タグリストのテキスト表示については大体確認したつもりですが、表示に不具合がある場合はお知らせください。なお画像・音声・動画についての HTML タグも一応追加しておりますが、これらについては全く試していません。予めご了承ください。

2006.02.28 追記タグクラウド用スクリプトのマークアップが誤っていたので修正しました。ついでに language 属性を削除しました。

Comments [6] | Trackbacks [0]

2006年10月31日

公開テンプレートの背景色をCSSで変更する

October 31,2006 12:59 AM
Tag：[Color, CSS, Template]
Permalink

当サイトで配布しているテンプレート（3・2・1カラム固定レイアウトおよび1カラムリキッドレイアウト）の、ブログの左右および下部に表示されている背景の背景色を変更する方法です。

まずはサンプルをご覧ください。

変更前

変更後

以下、変更方法です。

１．固定レイアウト（3カラム／2カラム／1カラム）の場合

リスト1.1に示すスタイルシートの赤色部分を変更します。この設定はスタイルシートの後方にあります。

リスト1.1 固定レイアウト（3カラム／2カラム／1カラム）の場合

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;
}

２．1カラムリキッドレイアウトの場合

リスト2.1に示すスタイルシートの赤色部分を変更します。１項と同様、この設定もスタイルシートの後方にあります。

リスト2.1 1カラムリキッドレイアウトの場合

body.layout-one-column-liquid {
    background: #36414d;
}

３．変更例：背景色をグレーに変更

冒頭のスクリーンショットの「変更後」の設定はリスト3.1のように変更しています。色はお好みに応じて変更してください。

リスト3.1 変更例

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: #dddddd;
}

カラーの指定方法は、例えば下記にあります。

eWeb：Web配色の見本：Webセーフカラー216色／カラーネーム一覧

その他、Google 等の検索エンジンで「Web」と「配色」「カラー」「カラーチャート」「RGB」等を組み合わせたキーワードで検索すると色々出てきます。

Comments [0] | Trackbacks [1]

2006年10月25日

Seesaa ブログでフッタバナーがセンタリングされない不具合を修正

October 25,2006 12:17 AM
Tag：[Seesaa, Template]
Permalink

公開中の Seesaa ブログテンプレートついて、「フッタにセンタリング表示している Seesaa ブログのバナーを Firefox 等の Mozilla 系ブラウザで閲覧するとセンタリングされない」という問題がみつかったため、修正致しました。

また Seesaa ブログで提供されているテンプレートについても同様の事象が発生しているようです（サンプル表示で確認した限り）ので、原因と対処方法を紹介します。

１．センタリングされない原因

公開テンプレートに設定されたフッタ（青色）はリスト1.1のようになっています。他のテンプレートも同様の設定のものが多いようです。

リスト1.1　Seesaa ブログのフッタ（テンプレート）

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

またそれに対応する CSS はリスト1.2のようになっています。

リスト1.2　フッタのCSS

#footer {
    text-align: center;
}

これで正常にセンタリングされるように思われますが、リスト1のテンプレートから再構築によって生成された HTML は、リスト1.3の青色の内容に変換されます。

リスト1.3　Seesaa ブログのフッタ（HTMLに展開後）

<div id="footer">
<div class="powered">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="http://seesaa.jp"><img src="http://blog.seesaa.jp/img/seesaablog.gif" width="138" height="22" border="0" alt="Powered by Seesaa" /></a></td>
</tr>
<tr>
<td><div style="background-color:#9C9C9C;text-align:center;font-size:10px;padding:3px;margin:0px;"><a href="http://seesaa.jp" style="color:#FFF;">Seesaa</a><a href="http://blog.seesaa.jp" style="color:#FFF;">ブログ</a></div></td>
</tr>
</table>
</div>
</div>

ご覧の通り、Seesaa ブログのバナーが table 要素（つまりブロックレベル要素）で括られます。

table 要素をセンタリングするためには、昨日エントリーした「CSSでブロックレベル要素をセンタリングする」の設定が必要ですが、リスト1.2 の設定しか行われていないとセンタリングされないという不具合が発生します。

公開テンプレートについては「バナーはインライン要素で表示」と思い込んでいたこと、また Firefox / Opera での表示の確認がきちんとできておりませんでした（IE6ではテンプレートは「後方互換モード」と認識されるため本問題が顕在化しません）。申し訳ございません。

２．対処方法

スタイルシートにリスト2.1のセレクタを追加してください

リスト2.1　スタイルシートに追加するセレクタ

.powered {
    margin-left: auto;
    margin-right: auto;
    width:138px;
}

当サイトの Seesaa ブログテンプレートをお使いの場合は、下記に該当する方が対象です。ご迷惑をおかけして申し訳ございませんがよろしくお願い致します。

2006.10.21 以前にテンプレートを利用
テンプレートのフッタバナー部分を修正していない

他のテンプレートをご利用の方も同様の修正を行いますが、

リスト1.1 のマークアップになっていること
リスト1.2 の CSS が設定されていること

が前提です。該当しない場合は「CSSでブロックレベル要素をセンタリングする」を参考にして修正してみてください。

Comments [0] | Trackbacks [1]

2006年6月26日

サイドバーの折りたたみ

June 26,2006 2:02 AM
Tag：[Customize, JavaScript, Sidebar]
Permalink

マルチカラムレイアウトでサイドバーを丸ごと折りたたむカスタマイズを紹介します。動作は Windows XP+IE6.0/Firefox1.5/Opera8.0 で確認しています。
下記にサンプルを用意しましたのでお試しください。

サイドバーの折りたたみサンプル

タイトル下の両端にあるリンクをクリックすると、サイドバーの表示・非表示が切り替わります。また折りたたみ時にリンクの内容を変更することができます。サンプルは3カラムですが、2カラムレイアウトでの折りたたみも可能です。

１．動作条件

下記の条件で動作します。

cookieが有効であること
固定レイアウト（3カラムおよび2カラム）であること

また公開テンプレートで動作するように設定していますので、公開テンプレート以外でご利用になる場合はスクリプトを修正する必要があります。

２．機能概要

下記のような動作でサイドバーを折りたたみます。

折りたたみ用リンクをクリック
JavaScript起動
cookieより現在のレイアウト名を取得
クリックされたリンク位置（右または左）と現在のレイアウトを判定し、新しいレイアウトに変更
カラム幅がどのレイアウトでも同一になるように、レイアウトに応じて中央カラム幅を変更
変更したレイアウトに応じてクリックされたテキストリンクを変更
変更したレイアウト名をcookieに保持

３．ドネーション

カスタマイズ内容のご利用および質問に対する回答等について、ご支援・ご賛同くださる方からの寄付をお待ち申し上げます。
将来に向けてのご寄付（例：ドネーションによる機能追加や改善要望）は、それらが実現しない可能性があるため、ご遠慮ください。

現状のコンテンツで役立った
質問の回答で疑問や不具合が解消された
エントリーの修正等で要望内容が満たされた

等の後に判断して頂ければ結構です。
参考：Web投げ銭

上記の「寄付」のリンクをクリックすると Paypal によるお支払いページにジャンプします。

４．スクリプトのダウンロード・アップロード

下記のリンクより sidebarfolder.js をダウンロードし、ご利用のブログのディレクトリにアップロードしててください（ブログツール・ブログサービスによってアップロード先は若干異なります）。

sidebarfolder.js

なお、このスクリプトの先頭に使用するレイアウトを設定する行があります。

var layout = 'layout-three-column';

デフォルトは3カラムになっていますので、2カラムで利用する場合は下記のように変更してください。

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

var layout = 'layout-two-column-left';

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

var layout = 'layout-two-column-right';

５．テンプレートの修正（スクリプトのインクルード）

サイドバーの折りたたみを設定するテンプレートの <head> ? </head> の部分に下記を追加します。

Movable Type の場合

<script type="text/javascript" src="<$MTBlogURL$>sidebarfolder.js"></script>

Serene Bach の場合

<script type="text/javascript" src="{site_top}sidebarfolder.js"></script>

FC2ブログの場合

<script type="text/javascript" src="<%url>file/sidebarfolder.js"></script>

６．テンプレートの修正（折りたたみ用ナビゲーション追加）

６．１ 3カラムレイアウトの場合

　　　　：
<!-- タイトル -->
<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2 id="banner-description"><$MTBlogDescription$></h2>
</div>
 
<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">＜</a></li></ul>
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">＞</a></li></ul>
</div>
 
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
　　　　：

６．２ 2カラムレイアウト（左サイドバー）

下記を追加してください（６．１の追加部分を変更）。

<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">＜</a></li></ul>
</div>

６．３ 2カラムレイアウト（右サイドバー）

下記を追加してください（６．１の追加部分を変更）。

<div id="navi">
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">＞</a></li></ul>
</div>

７．テンプレートの修正（JavaScript 追加）

サイドバーの折りたたみを設定するテンプレートの <head> ? </head> の部分に、A List Apart: Articles: Alternative Style: Working With Alternate Style Sheetsの一部を追加します。すでにご利用になっている場合は不要です。

<script type="text/javascript">
<!--
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
//-->
</script>

８．スタイルシート修正

スタイルシートに下記を追加します。

#navi {
    padding: 3px;
    border-bottom: 1px solid #666699;
    text-align:center;
    font-size: 12px;
}
#navi ul {
    margin: 0;
    padding: 0;
    display: inline;
}
#navi ul li {
    display: inline;
}
#leftmark {
    margin-right: 395px;
}
#rightmark {
    margin-left: 395px;
}

Comments [8] | Trackbacks [1]

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 [150] | Trackbacks [27]

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

Seesaa ブログテンプレートのカラムレイアウトを変更する

１．デフォルトの3カラムレイアウト

２．サイドバーを右側に表示する1

３．サイドバーを右側に表示する2

４．サイドバーを左側に表示する

中央カラムに「ニュース」「お知らせ」を表示する

１．テンプレートの修正

２．スタイルシートの修正

３．テンプレートモジュールにする

３．１ 新しいテンプレートモジュールの作成

３．２ テンプレートの修正

Seesaa ブログテンプレート・不具合修正のお知らせ

１．不具合の事象

２．原因

３．対処

４．その他

Seesaa ブログテンプレート更新（タグリスト・タグクラウド対応）

公開テンプレートの背景色をCSSで変更する

１．固定レイアウト（3カラム／2カラム／1カラム）の場合

２．1カラムリキッドレイアウトの場合

３．変更例：背景色をグレーに変更

Seesaa ブログでフッタバナーがセンタリングされない不具合を修正

１．センタリングされない原因

２．対処方法

サイドバーの折りたたみ

１．動作条件

２．機能概要

３．ドネーション

４．スクリプトのダウンロード・アップロード

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

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

５．テンプレートの修正（スクリプトのインクルード）

Movable Type の場合

Serene Bach の場合

FC2ブログの場合

６．テンプレートの修正（折りたたみ用ナビゲーション追加）

６．１ 3カラムレイアウトの場合

６．２ 2カラムレイアウト（左サイドバー）

６．３ 2カラムレイアウト（右サイドバー）

７．テンプレートの修正（JavaScript 追加）

８．スタイルシート修正

Seesaaブログテンプレート

１．動作確認環境

２．利用規定

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

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

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

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

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

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

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

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

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

４．コンテンツについて

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

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

７．その他

８．テンプレート

３．１新しいテンプレートモジュールの作成

３．２テンプレートの修正