カエレバでAmazon写真が超縦長で、画像大にするとはみ出すときの2つの対処法

カエレバデザインをamazlet風-2(cssカスタマイズ用)・画像大を選択したとき、想定外の縦長画像をAmazonで掲載されてる場合、カエレバの枠から画像がはみ出します。

大画面で見せたい時の対処法として、はみ出した画像をはみ出さないようにCSSで書く必要があります。

グリーンハウス 2017-04-03

注意コチラは販売目的ではなく、画像が縦長なときのスタイル変更の参考例でしかありません。※スマホ・PCビューの確認用スタイル。

どのタイプで表示しているかチェックしてスタイルの変更・追記をしてください＾＾

カエレバ画像大：はみ出し修正用1：画像を上に置く

画像を上に置いてはみ出した縦長画像大を見せる場合。

以下のリンク先カスタマイズ：目次2.2『スマホ・PC、カエレバ画像を上に表示するCSS』をコピペしてください。※色の調整はご自身でしてください。

画像を上に置いたときのスタイル表示

画像のwidth横幅の最大値・heightの最大値を指定する方法です。

横幅の指定があり、高さをautoにしているので、縦にながーーーい画像があるとはみだす原因になります。

両サイドに白い余白があれば、画像が長すぎない為、autoにしてもはみ出さないワケです。

追記するCSSの説明
- 画像縦サイズの最大値max-heightをはみ出さない任意のサイズに指定。
- 同時に縦サイズにあわせて、横幅をwidth: auto;に指定

@media screen and (min-width : 600px) {
	.booklink-image img,
	.kaerebalink-image img {
		max-height: 230px;
		width: auto;
	}
}

色んなスタイルが出回っているので、上記リンク先ページのスタイルを元に変更してるので、メディアクエリなど指定しますが、不要な場合は取っ払ってください。

元に戻さず、カエレバカスタマイズをやり直す場合、以下のリンクをチェックしてください。目次：2.1『カエレバのデザインCSS。PCビュー：画像とタイトル横並び』

Amazonに出品されてる画像が超縦長が存在しているに驚きました＾＾；

でもそんな画像があってもオカシクないし、CSSで調整すれば済む話ですね❦　運営してると色々あるなぁ笑

カエレバは販売目的ではなく、画像が縦長なときのスタイル変更の参考例です。と念を押しておこう…( ˘ω˘ )

それでは、かうたっくでした❦