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

カエレバ使用でAmazon出品画像が長くてはみ出す原因:CSSで対処した

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

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

  • 1つは大画面で表示したいとき:画像の縦領域を指定しないバージョン

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

  • 1つは画像を左右のどちらかに置いて、その横に概要を置きたい時

Amazonの画像が縦長だったとき対処法CSSでスタイル変更:左画像・右商品概要

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

スポンサーリンク

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

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

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

LINKカエレバ、デザイン変更CSSカスタマイズ!ほか簡単な登録方法

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

カエレバ画像大:はみ出し修正用2:画像と概要を横並びに

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

  • 事前に画像の横幅指定して、画像の高さもautoにしている。

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

横幅に合わせ縦をautoにした長い画像がはみ出した例。※長い商品でも両サイドに白い余白があればはみださない。原因説明の画像

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

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

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

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

LINKカエレバ、デザイン変更CSSカスタマイズ!ほか簡単な登録方法

さいごに

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

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

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

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

トップへ戻る