朝から前から気になっていたカレンダーのスタイルと構造を見直してみました。

この見直しでFluidになり、センターに配置するのも楽々です。元のスクリプト（リンク切れでどこにあるのか？）を改造して拡張したものですが、幅とかが固定になっていて（それはそれで背景画像が一枚で良いので楽ですが）可変な横幅にはどうもしっくり来ないと常々思ってはいました。

ですが、なかなかどうして改造直後は、それ以上触れる気にもならずそのままでいましたが、やっと見直してこの状態です。可変な横幅に対応しているので横長画面にすると横長になります。

テンプレートを作成する際、

mosLoadModules( 'module position' );

または、

mosLoadModules( 'module position', 数字 );

などと書きますが、この数字部分には意味があります。

0の場合
Module毎にtableタグを使って出力されます。

<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<th valign="top">Module Title</th>
</tr>
<tr>
<td>Module output</td>
</tr>
</table>

１の場合
これもtableタグですが、親のtableタグを出力し、それぞれのModule毎にtdタグの中にtableタグに囲まれ出力されます。よって水平（横）に並びます。

<!-- Module wrapper -->
<table cellspacing="1" cellpadding="0" border="0" width="100%">
<tr>
<td align="top"> <table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<th valign="top">Module Title</th>
</tr>
<tr>
<td> Module output</td>
</tr>
</table>
</td>
<td align="top"> <!-- ...the next module... -->
</td>
</tr>
</table>

-1の場合
Moduleがはき出すもののみが出力されます。

Module Output

-2の場合
divタグで出力されます。0の時のdivタグ版と思ってください。Module毎にdivタグで囲まれて出力されます。

<div class="moduletable">
<h3>Module Title</h3>
Module output
</div>

-3の場合
-2より複雑なデザイン向きで（例えば角丸なデザイン）出力されます。 この時、class名がmoduletableではなく、moduleであることに注意してください。

<div class="module">
<div> <div> <div>
<h3>Module Title</h3>
Module output
</div> </div> </div>
</div>

以上は、Joomla Template Tutorialから引用しています。

私自身よく忘れるので書いてみました。