さくらインターネットでの運用(18)プロトタイプテンプレート
<table><!-- 大囲い。 全体の幅が決まる -->
<tr>
<td>
<div>ここはheader</div>
<table><!-- container 用 table -->
<tr>
<!-- レフトブロック -->
<td>
<div このdivで幅を決める>レフトブロックの内容</div>
</td>
<!-- レフトブロック end -->
<!-- コンテンツブロック -->
<td>
<div このdivで幅を決める>センターブロックの内容。
記事とか静的固定ページとか</div>
</td>
<!-- コンテンツブロック end -->
<!-- ライトブロック -->
<td>
<div このdivで幅を決める>ライトブロックの内容</div>
</td>
<!-- ライトブロック end -->
</tr>
</table><!-- container end -->
<div>ここはfooter</div>
</td>
</tr>
</table>
この時、大囲いのwidthの値は、
・左メニューの場合、左メニュー幅+コンテンツ幅
・右メニューの場合、右メニュー幅+コンテンツ幅
つまり、2カラム分のwidthを指定しておいて、
フロントページでは、無理矢理?3カラム分、
表示してしまえというわけ。。tableでのレイアウト
だから出来ると言える。。
デフォルトでは、フロント3カラム、記事などのページ
(便宜上サブページと呼ぶ)は2カラム(左メニュー)になるが、
この場合、上記のソースから、が
丸ごとなくなるわけだ。そして、左ブロック+コンテンツと
いうことになり、大囲いtableで定義したwidthになる。
理屈で理解したかったので、書いたのですが、書くより、
やってみた方が何倍も簡単です。実は、geeklogは、
実にシンプルな作りをしていたのでした。。
ソースが複雑怪奇なので、複雑なのか?と思えたん
だけど。やってみると、こんなにシンプル。。
サブページで右メニューにする場合は、config.phpで
ライトブロックを常に表示するモードにし、左メニューは
フロントページだけに表示すれば、良い。
各ブロックの幅は、自在だ。
あとは、marginやpaddingを取る際、なんか必要に
なるかもしれないけど。。ていうか、IEでみると、
文字が大きいね。笑。。
