★増刷第2版出版!!
Serene Bach > Customize > Layout
Layout
sb.Vicuna専用スキンでのレイアウトの変更方法を解説します。
クラスによる切り替え
sb.Vicuna専用スキンでは、各テンプレートソースのbody要素に付加されたクラスによってレイアウトが切り替わる仕組みになっています。
これは、スキンによって用意されたレイアウト用のクラスによって各テンプレートを好みのレイアウトに変更できることを意味しています。
double class
例としてメインページのテンプレートのレイアウト変更を見てみましょう。管理ページからテンプレート編集ページにいき、テンプレートソースのbody要素を確認します。
<body class="page double">
初期状態では上記のソースのように、class属性によってpageとレイアウト用クラスのdoubleがスペースで区切られ、2つの値としてセットされています。pageクラスはテンプレートを識別するためのクラスで、変更する必要はありません。
doubleではdiv#utilitiesは本文の横に配置されるサイドバーとなります。
single class
では次に、同じくメインページのbody要素のクラスをsingleに変更してみます。
<body class="page single">
singleクラスではdiv#utilitiesは本文の下に2列で配置されます。
multi class
スキンによっては3カラムを構成することができるマルチカラムモジュールが組み込まれているものがあり、モジュールをONにした後、テンプレートソースのbody要素のクラスをmultiにすることで3カラムレイアウトが実現できます。
<body class="page multi">
multiクラスではdiv#utilitiesは本文の左右に展開され、左がメインナビゲーションになります。(スキンによっては他の構成のマルチカラムが可能なものもあります。)
他のテンプレート
ここでは、例としてメインページのレイアウト変更について解説しましたが、これは各テンプレート共通で同じ仕組みになっています。つまり、body要素のクラスによって各テンプレートの生成するページは別々のレイアウトを設定できます。例えば、トップページを3カラム、カテゴリーを2カラム、個別ページを1カラムといったページの特性にあわせた機能的なレイアウトをサイト内で設定することができます。
for Stricter
このような仕様にしたのは、どのレベルの方でもレイアウトの変更が容易にできるようにしてテンプレートとして汎用性を高めたかったという理由があるのですが、見栄えをあらわすclass名をXHTML文書に記述するのを気持ち悪く感じる方がいるかもしれません。
CSSの知識がある程度あればbody要素のレイアウト用のクラスを削除してもテンプレートを識別するためのもう１つのクラスを利用して同じことができますのでお試しください。
スキンファイル内、4-layout.cssの次のような指定を
body.single {
float: right;
width: 30%;
}
以下のように書き換えてレイアウトを適用させます。
body.mainIndex {
float: right;
width: 30%;
}
同一レイアウトを各テンプレートで指定するには、複数セレクタで以下のように記述してください。
body.mainIndex,
body.individual {
float: right;
width: 30%;
}