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

2013年3月3日(日曜日)

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

Category: WordPress | Posted By at 23:59:47

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;
}

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

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

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

コメントはありません。

コメント





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 ソフマップ・ドットコム