エプソンダイレクト株式会社

2013年3月4日(月曜日)

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

Category: WordPress | Posted By at 22:52:15

WordPress › Custom Field Template « WordPress Plugins

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

昨日はどちらかというとカラムの実現するための
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;
}

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

コメント&トラックバック

トラックバックは締め切りました。

コメントはありません。

コメント





XHTML: 以下のタグが利用可能です。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

HP Directplus -HP公式オンラインストア- デル株式会社 東芝ダイレクト 富士通パソコンFMVの直販サイト富士通 WEB MART ソフマップ・ドットコム