整備手帳とフォトギャラリーの画像を大きく表示される様にする方法

今回は前回のブログに続き、整備手帳とフォトギャラリーの画像を大きく表示される様にする方法です。

方法は至って簡単です。
愛車紹介のギャラリー写真(div.galleryPhoto)とギャラリー本文(div.galleryMemo)にそれぞれ
width:50%;
と言う、横幅を決めるタグが入ってます。

これは、テーブル内を半々で使うと言う意味なので通常は写真の様に表示されてます。

なのでこの%を変更してやると表示され方が変わります
一番簡単でバランスが良いのは
ギャラリー写真
width:100%;
ギャラリー本文
width:100%;
にするとイイ感じで大きく表示される様になります。

これで満足って方はここまでで充分です。

自分は、まだ画像の右に若干のスペースがあるのが気になったので、画像のみもう少し広げます。
ギャラリー写真
width:114.5%;
ギャラリー本文
width:100%;
にすると、テーブルギリギリまで画像が表示される様になります。

これまで、自分はこの仕様でした。

ちなみに、自分は前回のアップ
『共通コンテンツ
コンテンツ領域(div#BodyBlockMain)
の
overflow:hidden;
を
overflow:visible;
に変更すると、テーブルを越えても表示される様になります』
で紹介した様に、ブログ同様、愛車紹介でも、テーブルを越えても表示される様になってるので
ギャラリー写真
width:130%;
だとこんな感じです。

さて、これも前回、酷似の内容を載せてますが、ギャラリー写真に
margin:0 0 15px 0;
と言う位置を決めてるタグを
margin:0 0 15px -20px;
にすると、写真が左ギリギリに寄るので寄せた分だけ幅を広げて
width:118.5%;
にするとテーブル丁度に納まります。
(後日テーブルを広げた際に何故か少しはみ出したので、width:117%;に変更しました)


今回、いい機会だったので、この仕様に変更しました。


文字も同じ要領で調節出来るので気になる方は試してみてください。



追記
画像が少し見にくかった気がしたので、見やすそうなフォトギャラの写真に変更しました。