とりあえず、

イメージの表示位置をスタイルでフレームの外に出す。

 

バックグラウンドでやってみる。

背景画像ってわけだから、フレームの下ってことになる。なので、これはだめ。やっぱ img で画像を移動させる必要がある。
 

画像と文字を横に並べる

 
 
 
わっ！フレームの高さがなくなった。それはそうか、div で、実態を隠している。さて、どうしよう。
 
最初ので高さが発生していたのは、img の下に文字がきていたからだな。
じつは、この中に説明文を書きたいとおもっているので・・・　でも、それは、色抜きフレームの中。
とりあえず、色抜きフレームをこの中に書いてみよう。
 

色抜きフレームを中に入れる

ふむ、いい感じ・・・だけど、クラウン+商品名と説明文の間が空きすぎだな。
なんでだろう？　こういうときは、ファイヤーフォックスでCSSの影響範囲を確認すればいいのだな。
 
なるほど、クラウンのボックスの高さがでかくなってる。divブロックを移動させたとおもってたけど違うのか。
頭が伸びるってかんがえるのが正解か。クラウンのボックスに高さを指定してためしてみよう。
 

クラウンのDIVに高さを与えてみる(クラウン画像のサイズ80×67)

変化なし・・・ top:-30 で頭が伸びた？　あら？ bottom の位置はかわってないってことか？ bottomも-30にしてみよう
 

クラウンのDIVで底の位置も移動させる

ふむ、だめだな。イメージで移動させてるからかな？ position:relative;top:-30px;bottom:-30px; を div に対してかけてみよう。
&nbsp

クラウンの位置移動を div 側にかけてみる

DIVのブロックサイズは、小さくなった。。。回り込みクリアの <br clear=”all”><div style=”clear:both;”></div> が、なぜその位置から始まるのかって問題なのか。一応、div のheight:67px;は、外したけど変わらず。なんでだ？
 
ん？試しに商品名の </div> の後ろに文字をいれてみたら・・・　くっつく。つまり float:left が効いているってことだな。 もしかして、 <br clear=”all”><div style=”clear:both;”></div> が大きく改行してるってことか？  

商品名の</div>の後ろに文字を書いてみた。

 

<br clear=”all”><div style=”clear:both;”></div>をとっぱらった

あらあら、いい感じじゃん。説明文の<div> をmarginでやや下に移動させる。ついでに最後のところに回り込みクリアを入れてみる。
 

位置調性と回り込みクリアをいれる

ん？・・・そか、回り込みが効いているからマージンが効かないのか。。。さて、どうしたものか。
 
そしたら、商品名のブロックに高さを与えてみるか。

位置調性と回り込みクリアをいれる

相対位置指定の画像と商品名を一塊のブロックにして・・・　そすると実態がなくなるので、説明文は、ぎゅいんと上に上がる。
それを margin を使ってぐぐぐと下へ移動させる。。。　
最後に、クリアブロックをいれているので、下の行間がやや広い感じはするけど、そこはあきらめてこれを原型としよう。
そのソースがこれだ。

<div style="margin:30px 0 0 0;background-color:#ffffcc;padding:2px 10px 0px 10px;border:solid 2px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;">
 <div>
  <div style="float:left;position:relative;top:-30px;bottom:-30px;"><img src="<?php echo home_url(); ?>/img/clown_01.png"></div>
  <div style="float:left;font-size:24px;text-decoration:bold;position:relative;top:10px;">なんちゃらかんちゃら商品名</div>
 </div>
 <div style="margin:40px 10px 0px 10px;padding:20px;background-color:#ffffff;border:solid 1px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;">説明文がはいるよていでごわす</div>
 <br clear="all"><div style="clear:both;"></div>
</div>

・・・　あの～・・・　systaxhilighter 役に立たないんですけど～・・・（－－；
なして、変換が逆向きなんだろう？　これ時々起るんだよね。わけわかんね。
自作するのが一番かな？・・・　とりあえず、こっちで。

あれ？ syntaxhilighter 動いてるじゃん・・・　わけわからんプラグインだ。
 
⇒次へ(2/3)