2009年2月の夢実現のためのアファメーション

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

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

テーブルレイアウトと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。

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

アファメーションの宝庫！→あの独立・起業ネタの情報ランキング！

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

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）っていいなーｗ

関連サイト

• MTSetVars | テンプレートタグリファレンス
• MTSetVarBlock | テンプレートタグリファレンス

アファメーションの宝庫！→あの独立・起業ネタの情報ランキング！

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

集合かかりましたー

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

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

んがっ！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ギラギラしましょう！

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

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

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

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

さすがに眠いっすｗ

アファメーションの宝庫！→あの独立・起業ネタの情報ランキング！