アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション: 2009年2月

2009年2月21日

テーブルレイアウトとCSSのハイブリッドでの注意(FireFox)

成功者になるための必読ブログとは?

今更ながら引っかかったこと。

テーブルレイアウトとCSSの混在(いわゆるハイブリッド?)でサイトを作る…なんて、実際の仕事ではもうあんまりやらないけど、久々にやってみたら意外なところに落とし穴が。(ちなみに、DOCTYPEはXHTML1.0 Trandisional)

heightとpaddingの解釈。

例えば、ヘッダー(#header)の枠組みを2行1列のテーブルで作って、それぞれにロゴなどを配置する「#headertop」、ヘッダー画像を入れる「#headerimg」とIDを割り振る。

<table cellspacing="0" cellpadding="0" id="header">
<tr>
<td id="headertop">ヘッダートップ</td>
</tr>
<tr>
<td id="headerimg"><img src="hoge.jpg" width="780" height="300" alt="hoge" /></td>
</tr>
</table>

んで、CSSを以下のように設定。

#header {
width: 780px;
height: 380px;
}

#headertop {
background: #999999;
width: 760px;
height: 60px;
padding: 10px;
}

#headerimg {
width: 780px;
height: 300px;
background: #00FFCC;
}

要は、headertop(headerの中のtd)にpaddingを10px設定したいので、その分heightから20pxマイナスして60pxに。
つまり、全体の高さは380pxで、内側のtdの高さ(padding含む)の合計も380px。

計算は合ってるし、IEではそのとおりに表示されるので問題ないと思ったら、FFでheaderimgを設定したセル(td)に変な隙間が。

どうやら、headertopのpaddingが解釈されずに、heightが60pxになってしまい、計算が合わなくなっているみたい。

回避方法

回避策は、以下のように#headertopに「display: block;」を指定するとOK。

#headertop {
background: #999999;
width: 760px;
height: 60px;
padding: 10px;
display: block;
}

こうするとtdが強制的にブロックレベル要素になり、ちゃんとpaddingを認識して60px+10pxで80pxになる模様。

これが正しいのかどうかまだ未確認だけど、IE、FFどちらでも同じように表示されているので、たぶんOK。

※いろいろと調べたけど、解決方法が見つからなかったので備忘録として。

 

投稿者 kuro : 02:51 | 固定リンク | コメント (0) | トラックバック(0) | ID:363

ページトップ△

2009年2月 1日

MT4(Movable Type4)でカテゴリごとに“効率的に”ヘッダー画像を差し替える方法。

成功者になるための必読ブログとは?

MTIfCategoryでカテゴリごとの処理を記述。

Movable Type4でコンテンツごとにヘッダー画像とかを変えたい場合、便利なのが

<MTIfCategory>タグ。

特定のカテゴリだけで何か処理をしたいような場合、

<MTIfCategory>
~実行したい処理
</MTIfCategory>

と書けばいい。

んで、カテゴリごとに画像を変えたいのなら、

<MTTopLevelParent>
<MTIfCategory name="カテゴリ名1">
<h2><img src="<$MTBlogURL$>shared/img/headerimg_<$MTSubCategoryPath$>.jpg" alt="<$MTCategoryLabel$>" width="910" height="180" /></h2>
</MTIfCategory>

<MTIfCategory name="カテゴリ名2">
<h2><img src="<$MTBlogURL$>shared/img/headerimg_<$MTSubCategoryPath$>.jpg" alt="<$MTCategoryLabel$>" width="910" height="180" /></h2>
</MTIfCategory>



</MTTopLevelParent>

みたいな感じで、カテゴリ毎に処理を書いて、後は画像を用意すればいい。
(headerimg_products.jpgとか、headerimg_price.jpgとか)

でも…

MTタグの中(モディファイア)では、MTタグは使えない

このやり方だとそもそもMTIfCategoryのnameモディファイアの値が違うだけなのに、コンテンツ(カテゴリ)が増えるたびに同じ処理を記述(追加・修正)しなきゃいけない。

んじゃあ、どうせカテゴリごとに<$MTCategoryLabel$>を使うんだったら、nameの値に<$MTCategoryLabel$>を入れりゃ一個でいいじゃん!と思って、こう↓記述したら…

<MTTopLevelParent>
<MTIfCategory name="<$MTCategoryLabel$>">
<h2><img src="<$MTBlogURL$>shared/img/headerimg_<$MTSubCategoryPath$>.jpg" alt="<$MTCategoryLabel$>" width="910" height="180" /></h2>
</MTIfCategory>
</MTTopLevelParent>

エラー…というか、なにも表示されず。...orz

いろいろ調べると、どうやらMTタグの中(モディファイア)ではMTタグは使えないらしい。(泣)

んじゃ、コンテンツ(カテゴリ)増えるごとに修正しろっつーのかっ!
うーん、めんどくせぇ…っ!!

MTタグの中(モディファイア)でMTタグを使う方法。

と、思っていたら、MTタグの中(モディファイア)でMTタグを使う方法を発見。
(たぶん…みんなそうしてたんだろうけど。汗)

まぁ、厳密に言うとMTタグの中でMTタグを書くわけじゃなくて、MTSetVar系のタグを使って、変数に<$MTCategoryLabel$>を代入して、その変数をnameモディファイアで指定するやり方です。

通常、MTSetVarは

<MTSetVar name="foo" value="bar">

と書いて、valueの値(bar)を変数fooに代入するんだけど、これじゃ結局さっきと同じ(MTタグの中でMTタグを使うことになる)なのでできない。

そこで

MTSetvarBlock、もしくはMTSetVarsを使うことで実装。

MTSetvarBlockの場合は、

<MTSetVarBlock name="name_foo">
変数name_fooに代入したい値
<MTSetVarBlock>

MTSetVarsの場合は、

<MTSetVars>
変数1=値1
変数2=値2


</MTSetVars>

といった感じで複数の変数を同時指定することができる。

んで、設定した値は$マークをつけて呼び出すことで利用することができるので、さっきのカテゴリごとに画像を切り替える例をとると、

<MTTopLevelParent>
<MTSetVarBlock name="category_name"><$MTCategoryLabel$></MTSetVarBlock>
<MTIfCategory name="$category_name">
<h2><img src="<$MTBlogURL$>shared/img/headerimg_<$MTSubCategoryPath$>.jpg" alt="<$MTCategoryLabel$>" width="910" height="180" /></h2>
</MTIfCategory>
</MTTopLevelParent>

もしくは

<MTTopLevelParent>
<MTSetVars>
category_name=<$MTCategoryLabel$>
</MTSetVars>
<MTIfCategory name="$category_name">
<h2><img src="<$MTBlogURL$>shared/img/headerimg_<$MTSubCategoryPath$>.jpg" alt="<$MTCategoryLabel$>" width="910" height="180" /></h2>
</MTIfCategory>
</MTTopLevelParent>

とすることでOK。

こうしておけば、仮にコンテンツ(カテゴリ)が増えたとしても、規定のディレクトリに「headerimg_カテゴリパス名.jpg」という名前の画像さえ用意すれば自動的にヘッダー画像が差し替えられます。

いやー、いままでのめんどくささが一気に解消!

やっぱMT(Movable Type4)っていいなーw

関連サイト
 

投稿者 kuro : 15:32 | 固定リンク | コメント (0) | トラックバック(0) | ID:369

ページトップ△

浪漫飛行な夜は更けて。久しぶりの…。

成功者になるための必読ブログとは?

集合かかりましたー

昨日は黒岩組○期生の新年会…だったんだけど、数年ぶりに大学時代の連中が急遽集まることになっちゃって、幹事にわびを入れてそっちにいくことに。(に○にんスマン 汗)
(連絡来たのが急なんだもん。泣)

みんな37歳のおっちゃんおばちゃん…のはずなんですが…

んがっ!

ますますパワー全開でっす!

残念ながら全然変わってない...orz

…っつか、むしろますます“やんちゃ度”が増してる感じw
(もう…人前じゃ話せないような話ばっかw)

相変わらず集まりもバラバラで、7時集合なのに、全員が集まったのが夜の10時過ぎ。
次の日(今日)授業もあったので電車のあるうちに帰るつもりが…案の定朝帰りで。

まじめにふざける仲間たち。

やっぱりいいね。まったく気を使わなくていい仲間って。

出会ったのが18の時(キュンッ!)だから、もう倍以上年月は経ってるのに、話をしていると一瞬であのころに戻れる。

※ちなみにこんな連中とつるんで遊んでました。
⇒文学座で舞台やってる浅野のブログに昨日の写真がUPされてた

大学のころの悪さ(?)の話や、恋愛の話や、みんなで行った某店でぼったくられた話や、まじめな話や、不真面目な話や、お金の話や、卒業旅行で行ったハワイの話や、車の話や…。

数年ぶりに会ったとは思えないほど、あのころと同じようにすっごく盛り上がった。

2件飲みに行って(ボクはウーロン茶だけどね)、そのあと、これも久々にカラオケに行ったけど、入れる曲入れる曲…とにかく古い。(80年代~90年代中ごろがメイン)

※チェッカーズ、complex、X、ユニコーン、米米クラブ、BUCK-TICK、ブルーハーツ、ZIGGY…

でも…このころの曲はすごくいいっ!!w
(この辺刺さる人、またいつかカラオケ行きましょうw)

もちろんブルーハーツでは、大の大人が部屋を壊さんばかりに飛びまくりです!w

ギラギラしましょう!

みんなそれぞれ別の道を歩んでいて、んでがんばっていて…会うだけですごく刺激になる…そんな連中です。

ちょっと前に今年遅めのアファメーションを書いたけど、大学生のころのギラギラ(?)として血気盛んな気持ちに戻って、ますますテンションあがりましたっ!!

よしゃ!がんばるにゃーっ!!!

…ってことで、朝、家に帰ってから1サイト制作。

さすがに眠いっすw

 

投稿者 kuro : 01:12 | 固定リンク | コメント (0) | トラックバック(0) | ID:370

ページトップ△