るるろぐ 2008 新着記事

この記事1件を表示

さくらインターネットでの運用(18)プロトタイプテンプレート

img.php.gif

<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でみると、
文字が大きいね。笑。。

コメントを書く

コメントの掲載は、管理者の承認が必要な場合があります。すぐに掲載されない場合は、少しお待ち下さい。また、内容によっては掲載しない場合、掲載後、削除する場合もございます。ご了承下さい。

 必須

 必須


トラックバック

このエントリーのトラックバックURL:

http://www.liolion.info/MovT/LULUL/mt-tbon.cgi/634

都合により、上記URLの「mt-tbon.cgi」は、全角で表示しています。TBの際は、恐れ入りますが、半角に直して送信してください。

またこのブログは、トラックバックを受け付けても、それがすぐに反映されない仕組みになっています。管理者が確認後、公開しますので、少しお待ち下さい。尚、内容によっては、公開しない場合もあります。ご了承下さい。また内容に問題がないと思えるのに、いつまで経っても公開されない場合は、なんらかの事情で、pingが届いていない可能性があります。よろしければ再度送信してください(このブログに関してコメントをする?)。

MODx本出版

ここからカテゴリ一覧、記事一覧を表示

CATEGORY

RSS1.0 RSS2.0