ブログ画像を大きく表示する方法

通常、ブログにテーブルより大きな画像を貼ると、この様にテーブルより右は切れて表示されません。

共通コンテンツ
コンテンツ領域(div#BodyBlockMain)
の
overflow:hidden;
を
overflow:visible;
に変更すると、テーブルを越えても表示される様になります。

しかし、左のスペースが空いてて、サイドメニューにかかるのを少しでも減らす為に、本文、画像共に左に寄せる為に

ブログ
ブログ画像(div.blogMemo img)
を一旦すべて削除して
margin:0px 0px 0px -0px;
position:relative;
z-index:0;
を貼り付け


ブログ
ブログ本文(div.blogMemo)
に
margin:0px 0px 0px -20px;
を追加すると

本文、画像共に、テーブルの端まで寄ります。


ちなみにこれの前ではサイドメニューの下に表示されてたブログ画像ですが、ここでは上になってます。
理由ははっきりとは分かりませんが、ブログ画像の
position:relative;
z-index:0;
を外すとサイドメニューの下に表示されるので、これに理由がある様です。

z-index:0;
の0は本来は画像等の優先順位らしく、数字が小さいほど下になり0にすると、他の下に入るはずなのですが効いてない様で一番上に来てます。

どなたか、分かる方は教えて下さい(^^ゞ

しかし、左に寄った事により、右に左と同じだけあったスペースが倍に…
なので、表示出来る範囲を増やす為に先ほどの
ブログ
ブログ本文(div.blogMemo)
に
width:620px;
を追加すると、テーブル幅いっぱいに表示されます。

さて、テーブル越えても画像は表示出来る様にはなりましたが、極端に大きな画像を貼り付けるとサイドメニューまではみ出し広告表示まで隠しみんカラの規則に抵触する恐れがあるので、以前はせいぜい横幅がせいぜい650pxまでの画像しか載せてなかったのですが、本文・サイドメニューの位置で左右選択出来るのに気づいてませんでした。

と言う事で、サイドメニューを左に持って来て、右の何もないスペースまで画像を表示出来る様になりました。

この仕様で780pxの幅くらいまで普通に表示出来ます(PCが変わると違うのかもしれませんが…)



実は、このサイドメニューの位置変えた事で、さらに変更の余地がある事が分かり後日もう少しレイアウト変更予定(検証済)です。