Custom Field Template を使う～管理画面で複数カラムその 3

ackie

12年前

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

昨日はどちらかというとカラムの実現するための
HTML と CSS についてでしたから、
これからは実際の記述に焦点を当てていきます。

昨日の

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

このソースを実現したいのですが id での指定はできません。
class を使ってうまく回避していきましょう。

[foo]
type = break
class = left

[bar]
type = break
class = center

[hoge]
type = break
class = right

[clear]
type = break
class = clear

とやると

</dev>
<div class="left">
</dev>
<div class="center">
</dev>
<div class="right">
</dev>
<div class="clear">

というソースが出力されます。

これを ADMIN CSS を変更することでできるようになります。

.left, .center, .right {
    float: left;
}
.clear {
    clear: both;
}

とこんな感じで。
色々とアレンジの効く技ですので、是非マスターしてください。