Top > CMS・ブログ > Serene Bachテンプレート > 2005年11月
2005年11月18日

Serene Bach テンプレート

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

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

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 用としています。

2.利用規定

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

3.カラムレイアウト変更方法

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

  • 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">

Serene Bach・3カラムテンプレート3カラム

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

Serene Bach・3カラムテンプレート・リキッドレイアウト3カラム・リキッドレイアウト

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

Serene Bach・2カラムテンプレート(左サイドバー)2カラム(左サイドバー)

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

Serene Bach・2カラムテンプレート・リキッドレイアウト(左サイドバー)2カラム・リキッドレイアウト(左サイドバー)

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

Serene Bach・2カラムテンプレート(右サイドバー)2カラム(右サイドバー)

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

Serene Bach・2カラムテンプレート・リキッドレイアウト(右サイドバー)2カラム・リキッドレイアウト(右サイドバー)

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

Serene Bach・1カラムテンプレート1カラム

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

Serene Bach・1カラムテンプレート・リキッドレイアウト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カラムに変更される場合は左右両方のカラムをごっそり削除してください。

4.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,'月別アーカイブ');

としてください。

5.記事の日付表示について

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>

を削除してください。

6.XHTML1.0 Transitional valid

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

7.その他

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

8.ダウンロード

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

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

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

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

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

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

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

Comments [121] | Trackbacks [18]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3