xoops123さあ、いっしょに XOOPS はじめましょう！

　では、どうするのが良いのでしょうか？

　ヒントは、theme_centercolumn.htmlにある中央左右ブロックのＩＤ指定されたDIVにあります。

　そこでは、中央左右ブロックの個別のブロックにＩＤが指定されている訳ではなく、中央左ブロックが入るための枠（中央左のDIV ＩＤ：CenterLColumn）と中央右ブロックが入るための枠（中央右のDIV ＩＤ：CenterＲColumn）を設けて、その中で左ブロックと右ブロックが展開されるようにして、それぞれ中央左右のDIVの幅を４９パーセントとして、フロートで左右に表示する設定としていることで、中央ブロックの中で半分ずつの幅で表示するようになっているのです。

　これと同じことを、中央ブロックと左ブロックに指定してあげると良いのではないでしょうか？

　でも、ブロックひとつひとつにＩＤやクラスを指定してフロート指定するのは、どうなんでしょ？
（ＩＤについてはユニーク、つまり唯一無二としなければならないので、何個もあるブロックに設定するのはおかしいので、もし使うとしてもクラスしか利用できないのですが・・・）



　この場合、中央に表示されるブロックを包む「中央カラム（center-column）」と左ブロックを包む「左カラム（left-column）」を作ってあげて、表示幅とフロートの指定を行う作業が必要となりますね。（このような、ブロックを包む要素のことをラッパーと言ったりします。）

　ということで、サクッと作業。
　左ブロックを包む <div id="left-column">（左カラム）と中央ブロックを包む <div id="center-column">（中央カラム）を追記してみました。ここでは、それぞれ１個ずつしか出現しないのでクラスではなくＩＤとしています。

　そして、次はＣＳＳの追加。


　センターを７３％幅、左を２５％幅にしてみました。　（ここでのコツは、両方を足して１００％にしないことです。marginとかpaddingのことを考えないと表示崩れなどもでますし、ね。）

　ブラウザをリロードしてみると、こんな感じになりました。（先に、altsysでキャッシュもクリアした方が良いかも。）



　なんとか３カラムになったようですけど、ちょっと中央カラムが左に寄って見えますよね～？？？
 

　では、ＣＳＳをゴニョゴニョ・・・



　中央カラムの右側にマイナスマージンを設定してみました。
　再びブラウザをリロード・・・



　これでなんとか見栄えが整ったような気がしますね。

　ＯＫ！　出来上がった～！？　　いえいえ、まだまだ。。。