2月１７日にロクナナワークショップで開催される「実験！Movable Typeラボラトリー」に参加するので、今日は Movable Type テンプレートのアイデア的ネタを記事にしてみます。

昨年のDevConのライトニングトークでチラッとしゃべったネタの中で、「変数を利用して、３カラムレイアウトの幅を自動で変えるテンプレート」みたいなことを話しました。それがこの「可変な固定レイアウト」です。

[ 980px, Wide-Thin-Thin ]

[ 100%, Thin-Wide-Thin ]

変数の値と変えれば、自動的に幅を計算し、上の画像のようにレイアウトを変えてくれます。

サンプルのHTMLのテンプレート

まず、今回のサンプルのHTMLは以下の通りです。

 
 
 
 


 

 

 
Movable Type で作る可変な固定レイアウト・サンプル
 
 

 

 
ここが primary コンテンツです。
 
 

 
ここが secondary コンテンツです。
 
 

 
ここが extra コンテンツです。
 
 
 

 
ここが footer コンテンツです。
 
 

サンプルのCSSのテンプレート

そして、上記HTMLに適用する可変な固定レイアウトのCSSは以下の通りです。

@charset "";

********** レイアウト: カラムタイプ **********

 Wide-Thin-Thin : wtt　(default)
 Thin-Wide-Thin : twt 




********** レイアウト: コンテンツ全体の幅 **********

 コンテンツ全体の幅 (default : 980）




********** レイアウト: コンテンツ全体の幅 **********

 コンテンツ全体の幅の単位 (default : px）




********** 自動計算（変更不要） **********













/* 各カラムの幅 = primaryWidth:, secondaryWidth:, extraWidth: */

/* ----------------------------------------
 __layout
---------------------------------------- */


* {
 margin: 0;
 padding: 0;
}
body {
 text-align: center;
}
#page {
 position: relative;
 margin: 0 auto;
 width: ;
 text-align: left;
 overflow: hidden;
 background-color: #cccccc;
}
* html #page {
 height: 1%; 
}
#header {
 background-color: #0000FF;
}
#primary {
 background-color: #FF8000;
}
#secondary {
 background-color: #00FF00;
}
#extra {
 background-color: #800080;
}
#footer {
 clear: both;
 background-color: #0C2847;
}


/* ===== Wide-Thin-Thin ===== */

#primary, #secondary {
 display: inline;
 float: left;
}
#extra {
 display: inline;
 float: right;
}
#primary {
 width: ;
}
#secondary {
 width: ;
}
#extra {
 width: ;
}


/* ===== Thin-Wide-Thin ===== */

#primary, #secondary {
 position: relative;
 float: left;
}
#extra {
 position: relative;
 float: right;
}
#primary {
 left: ;
 width: ;
}
#secondary {
 left: -;
 width: ;
}
#extra {
 width: ;
}

解説

レイアウトのタイプを指定する

********** レイアウト: カラムタイプ **********

 Wide-Thin-Thin : wtt　(default)
 Thin-Wide-Thin : twt 

現在は、３カラムレイアウトの２パターンのみに対応しています。

この部分で、変数 column_type の値を「wtt」「twt」に設定することで、カラムの並び順を指定します。

コンテンツ全体の幅を指定する

********** レイアウト: コンテンツ全体の幅 **********

 コンテンツ全体の幅 (default : 980）

この部分で、変数 page_width_value の値を設定することで、コンテンツ全体の幅を指定します。サンプルのHTMLでいえば、div#page の幅になります。

この部分のポイントは「数値のみ」で「単位不要」です。

コンテンツ全体の幅の単位を指定する

********** レイアウト: コンテンツ全体の幅 **********

 コンテンツ全体の幅の単位 (default : px）

この部分で、変数 page_width_unit の値に「px」や「%」を設定することで、先ほどのコンテンツ全体の幅の指定と合わせて div#page の幅が決まります。幅の値を単位を分けたことで、より多くのレイアウトに対応できます。

自動に白銀比で計算する

********** 自動計算（変更不要） **********













/* 各カラムの幅 = primaryWidth:, secondaryWidth:, extraWidth: */

あとは自動で３つのカラムの幅を算出します。このとき、「Wide」カラムと「Thin+Thin」カラムの比率がだいたい白銀比になるように算出してくれます。なので、レイアウトが出来上がった時点でそこそこいい感じになります。

The blog of H.Fujimotoさんが公開している変数の機能を拡張するプラグインを使えばもっとシンプルになるはずですが、ここではあえて使っていません。

算出された値は、指定した単位を付けて次のように変数に格納されますので、あとはそれをCSSのテンプレートに埋め込んでいけばOKです。

• primary_width : 「Wide」カラムの幅
• secondary_width : 「Thin」カラムの幅
• extra_width : 「Thin」カラムの幅

ちなみに、layout_info という変数で、３つのカラムの幅が確認できるようになっています。

完成イメージ

数パターンの完成イメージの画像は次の通りです。

【wtt : 800px】

【wtt : 980px】

【wtt : 99%】

【twt : 750px】

【twt : 980px】

【twt : 100%】

以上です。細かい調整をCSSで行う必要があるかもしれませんが、僕的には便利なアイデアだと思っています。

今後は、もっと対応するレイアウトパターンを増やしたり、計算の完成度を上げていきたいと思っています。そのうち、テンプレートを公開するのが目標です。