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

Top ＞ Serene Bach ＞テンプレート [全て開く]

2009年7月14日

Serene Bach テンプレート修正

July 14,2009 1:55 AM
Tag：[SereneBach, Template]
Permalink

現在配布中の Serene Bach テンプレートを修正しました。

主な修正内容は次の通りです。

CSS変更（フォントサイズを大きくするなど）
各カラムレイアウトにフッタを追加。またリキッドレイアウトにもフッタを追加
右側にサイドバーを2列に並べる3カラムレイアウトを追加

ダウンロード

テンプレートは下記のページよりダウンロードしてください。

Serene Bach テンプレート

3カラムレイアウト（右サイドバー）の設定方法

右側にサイドバーを2列に並べる3カラムレイアウトは次のようなレイアウトです。

レイアウトを変更するには、body 要素の class 属性に次の内容を記述してください。

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

また、

<div id="links-left-box">
...中略...
</div><!-- /links-left-box -->

を

<div id="links-right-box">

の直前に移動してください。

Comments [0] | 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]

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年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]

2005年12月26日

Serene Bach / sb 公開テンプレートの不具合修正箇所について

December 26,2005 11:57 PM
Tag：[Information, sb, SereneBach, Template]
Permalink

昨日のエントリーでお伝えしたとおり、当サイトで公開している Serene Bach テンプレートおよび sb テンプレートで、個別エントリーHTMLに複数のトラックバックがある場合、ページの表示が崩れるという不具合がありました。ご利用の方には大変ご迷惑をおかけして申し訳ございません。

現在公開中のテンプレートは不具合を修正済ですが、2005年12月25日以前に Serene Bach または sb テンプレートをダウンロードされて表示が崩れている場合は、テンプレートを再度ダウンロードされるか、以下に示す修正をお願い致します(正常に表示されていれば修正の必要はありません）。
ベースHTMLテンプレート+スタイルシートでお使いの場合（=個別エントリー用HTMLテンプレートをお使いでない場合）は１項、個別エントリー用HTMLテンプレートをお使いの場合は２項の作業を行ってください。

１．ベースHTMLテンプレート+スタイルシートでご利用の場合

１．１ div タグの削除

ベースHTMLテンプレートにあるトラックバック表示用タグから、下記のように div 閉じタグ（赤色）をひとつ削除してください。

　　　　　　：
<!-- BEGIN trackback -->
<h3 class="trackbacks-header">Trackbacks</h3>
<div class="trackbacks-content">
<div class="trackback">
<div class="trackback-content">{trackback_excerpt}</div>
<p class="trackback-footer">
{trackback_title} | {trackback_blog_name} | {trackback_time}
</p>
</div>
</div>
</div>
<!-- END trackback -->
　　　　　　：

１．２スクリプトの追加

ベースHTMLテンプレートの最後にあるスクリプトに、青色部分を追加してください。

　　　　　　：
<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('h2');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
    work = elements[i].innerHTML;
    if(work == work_old){
        elements[i].style.display = 'none';
    }
    work_old = work;
}
elements = document.getElementsByTagName('h3');
work_old = '';
for (i=0; i<elements.length; i++) {
    work = elements[i].innerHTML;
    if(work == work_old){
        elements[i].style.display = 'none';
    }
    work_old = work;
}
//-->
</script>
　　　　　　：

２．ベースHTMLテンプレート+個別エントリー用HTMLテンプレート+スタイルシートでご利用の場合

２．１ div タグの削除

個別エントリー用HTMLテンプレートにあるトラックバック表示用タグから、下記のように div 閉じタグ（赤色）をひとつ削除してください。

　　　　　　：
<!-- BEGIN trackback -->
<h3 class="trackbacks-header">Trackbacks</h3>
<div class="trackbacks-content">
<div class="trackback">
<div class="trackback-content">{trackback_excerpt}</div>
<p class="trackback-footer">
{trackback_title} | {trackback_blog_name} | {trackback_time}
</p>
</div>
</div>
</div>
<!-- END trackback -->
　　　　　　：

２．２スクリプトの追加

個別エントリー用HTMLテンプレートの最後の方に、スクリプト（青色部分）を追加してください。

　　　　　　：
</div><!-- /box -->
 
<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('h3');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
    work = elements[i].innerHTML;
    if(work == work_old){
        elements[i].style.display = 'none';
    }
    work_old = work;
}
//-->
</script>
 
</body>

Comments [3] | Trackbacks [0]

2005年12月25日

Serene Bach / sb 公開テンプレートご利用の方へ

December 25,2005 11:58 PM
Tag：[]
Permalink

現在公開中の Serene Bach テンプレートおよび sb テンプレートですが、個別エントリーHTMLのトラックバックで2件以上ある場合、表示が崩れる不具合がありました。
Serene Bach 版については、以前同様の指摘を頂き、修正したアーカイブを公開していたつもりでしたが、アーカイブを配置する際に新旧のアーカイブを間違えて配置していたようで、不具合が解消されたアーカイブをダウンロードできない状態になっておりました。大変申し訳ございません（←勘違いでしたらすいません）。

先ほど、Serene Bach / sb 両方のテンプレートアーカイブを作成して、リンクを設定し、公開リンクから再度ダウンロードしてそれぞれ正常に動作することを確認しました（正常に動作しない場合はご連絡ください）。ダウンロードのリンクに「20051225」が含まれているものが最新バージョンです。それ以前にダウンロードされた方については再度ダウンロードくださいますよう、よろしくお願い致します。

なお、既にテンプレートをカスタマイズされている方につきましては、修正点のみを別途お知らせする予定ですのでお時間ください。

Comments [0] | Trackbacks [0]

2005年11月18日

Serene Bach テンプレート

November 18,2005 1:00 AM
Tag：[SereneBach, Template]
Permalink

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

１．動作確認環境

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

OS：Windows2000/XP
ブラウザ：IE6.0/Firefox1.0.7/Netscape7.1/Netscape8.0.4/Opera8.5
Serene Bach：2.00R?2.09R

~~Serene Bach は独自タグを除去すれば旧バージョンでも使用可能のようですが、情報が整理できていませんのでとりあえず 2.03R 用としています。~~

２．利用規定

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

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

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

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カラム（左サイドバー）に変更する場合は、右カラムを表示する

<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
　　　　　　　　　：
　（ここに書かれているものをコピー）
　　　　　　　　　：
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->

の間に書かれている必要なメニュー（検索・カテゴリー・バナー等）をコピーし、左カラム

<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
　　　　　　　　：
　　　　（ここにペースト）
　　　　　　　　：
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->

にペーストしてください。そのあと

<!-- 右カラム開始 -->
　　　　　　　：
<!-- 右カラム終了 -->

を丸ごと削除します。1カラムに変更される場合は左右両方のカラムをごっそり削除してください。

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

1カラムレイアウトはポータル的な要素を排除して、個人の日記サイトとして気軽に書けるデザインにしています（言い換えると単にサイドバーをとっぱらっただけです）。個別エントリーとコメント・トラックバックは機能しますので、サイトを初めて訪れる方でも戸惑わずに閲覧することが可能です。

1カラムでご利用になる際は前項での左右カラムの削除および、テンプレート内に設定されている

<!-- for one column
<!-- BEGIN archives -->
<div id="archive">{archives_list}</div>
<!-- END archives -->
 
<div id="footer-one">
Powered by <a href="{script_webpage}"><strong>{script_name} {script_version}</strong></a><br />
<a href="http://www.koikikukan.com/"><img src="{site_parts}koikikukan.gif" alt="小粋空間" width="128" height="22" /></a>
</div>
/for one column -->

の赤色部分を削除してください（これで月別アーカイブリストとクレジットバナーがページの一番下に表示されます）。
またアーカイブリストはプルダウンメニューで表示することを想定していますので、上記の設定の後、

JUGEMカスタマイズ講座：リストのプルダウンメニュー化

を実施して、スクリプトをページの最後の方に設定してください。なお　ListSelector の起動パラメータは

ListSelector('archive',1,'月別アーカイブ');

としてください。

５．記事の日付表示について

Serene Bach では投稿日の日付が記事単位に付与されますが、本テンプレートでは JavaScript を用いてページの前方に同一日付の記事がある場合、日付を重複して表示しないようにしています。なおデフォルトの環境設定でのみ動作確認していますので不具合ございましたらご連絡ください。
この機能を無効にする場合はベースHTMLテンプレート下にある

<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('h2');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
    work = elements[i].innerHTML;
    if(work == work_old){
        elements[i].style.display = 'none';
    }
    work_old = work;
}
//-->
</script>

を削除してください。

６．XHTML1.0 Transitional valid

当サイトではWeb標準を推奨しています。テンプレートを設定した状態で W3C Markup Validation Service での XHTML1.0 Transitional valid および、Another HTML-lint gateway で高得点になるようにしています。

７．その他

基本的な動作は確認したつもりですが、Serene Bach の確認を全て理解できていない状態ですので、不具合等ございましたらご連絡ください。

８．ダウンロード

下のリンクからテンプレートをダウンロードできますのでご利用ください。「個別エントリー用HTMLあり」はテンプレートの個別エントリー用HTMLテンプレートにも反映されます。

2009.07.13 個別エントリーなしのテンプレートをリニューアルしました。

ダウンロードしたファイルを解凍し、中にある txt 形式のファイルを任意のディレクトリにアップロードしてください。そのあと管理画面の「テンプレート」→「インポート」のページで指定して「読込み」をクリックすればインポートされます。
「個別エントリー用HTMLあり」をダウンロードすると、個別エントリーページをインデックスや他のアーカイブページと異なるカラムレイアウトにすることが可能です。

2005.11.18 追記
個別エントリーのトラックバック表示に不具合があったためテンプレートを修正しました。

2005.12.01 追記
動作確認ができましたのでタイトルおよび対応バージョンを変更しました。

2006.02.26 追記
スタイルシートの全称セレクタから font-weight プロパティを削除し、見出し用のタイプセレクタを追加しました。またエントリー日付・コメントタイトル・トラックバックタイトルの配色用セレクタをまとめました。

2007.01.02 追記
動作可能バージョンを 2.09R までに変更しました。

Comments [118] | Trackbacks [18]

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

Serene Bach テンプレート修正

ダウンロード

3カラムレイアウト（右サイドバー）の設定方法

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

１．テンプレートの修正

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

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

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

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

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

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

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

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

サイドバーの折りたたみ

１．動作条件

２．機能概要

３．ドネーション

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

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

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

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

Movable Type の場合

Serene Bach の場合

FC2ブログの場合

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

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

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

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

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

８．スタイルシート修正

Serene Bach / sb 公開テンプレートの不具合修正箇所について

１．ベースHTMLテンプレート+スタイルシートでご利用の場合

１．１ div タグの削除

１．２ スクリプトの追加

２．ベースHTMLテンプレート+個別エントリー用HTMLテンプレート+スタイルシートでご利用の場合

２．１ div タグの削除

２．２ スクリプトの追加

Serene Bach / sb 公開テンプレートご利用の方へ

Serene Bach テンプレート

１．動作確認環境

２．利用規定

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

<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カラムレイアウトについて

５．記事の日付表示について

６．XHTML1.0 Transitional valid

７．その他

８．ダウンロード

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

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

１．２スクリプトの追加

２．２スクリプトの追加