パソコンサポートの00H ～社長BLOG～

WordPress › Custom Field Template « WordPress Plugins

ほったらかしにしていたわけではありません。
他に書かないといけないネタが多かったからです。
じゃあ、ネタが切れたから書いてる？
お客さん、鋭いですねぇ～（ぉぃっ）。
（ここまでコピペ）

今日は昨日の続きで管理画面で複数カラムです。

その前に複数カラムの作り方ってご存知でしょうか？
というかカラムってわかりますか？
例えば、このブログは左にタイトルやカテゴリのリストとか、
右には Twitter やら Amazon へのリンクやらがあります
こういう枠のことをカラムと言います。
昔々はテーブルタグで実現していたのですが、
現在では div タグを使い、スタイルシートで処理する…
というのが構造と見た目を分離するという HTML 4 以降の定番です。

具体的には HTML で

<div id="left">
　：
</div>
<div id="center">
　：
</div>
<div id="right">
　：
</div>

というようなものを作り、CSS 側で

#left, #center, #right {
    float: left;
}

というように作っていくことで 3 カラムを実現していきます。
float: left; を使うと自分自身を左に配置し、
それ以降の要素を右に回り込ませようとします。
その際、自身の高さは親要素に反映されずに破棄されてしまうので
注意してください。
普通は clearfix 等の処理をして回り込みを解除するのですが
Custom Field Template ではこの技は使えません。

先程のコードを、それぞれ

<div id="left">
　：
</div>
<div id="center">
　：
</div>
<div id="right">
　：
</div>
<div class="clear"></div>

#left, #center, #right {
    float: left;
}

.clear {
    clear: both;
}

のようにして実現していきます。