カエレバデザインをamazlet風-2(cssカスタマイズ用)・画像大を選択したとき、想定外の縦長画像をAmazonで掲載されてる場合、カエレバの枠から画像が はみ出します。
大画面で見せたい時の対処法として、はみ出した画像をはみ出さないようにCSSで書く必要があります。
- 1つは大画面で表示したいとき:画像の縦領域を指定しないバージョン
注意 コチラは販売目的ではなく、画像が縦長なときのスタイル変更の参考例でしかありません。※スマホ・PCビューの確認用スタイル。
- 1つは画像を左右のどちらかに置いて、その横に概要を置きたい時
どのタイプで表示しているかチェックしてスタイルの変更・追記をしてください^^
カエレバ画像大:はみ出し修正用1:画像を上に置く
画像を上に置いて はみ出した縦長画像大を見せる場合。
以下のリンク先カスタマイズ:目次2.2『スマホ・PC、カエレバ画像を上に表示するCSS』をコピペしてください。※色の調整はご自身でしてください。
LINKカエレバ、デザイン変更CSSカスタマイズ!ほか簡単な登録方法

画像を上に置いたときのスタイル表示
カエレバ画像大:はみ出し修正用2:画像と概要を横並びに
画像のwidth横幅の最大値・heightの最大値を指定する方法です。
- 事前に画像の横幅指定して、画像の高さもautoにしている。
横幅の指定があり、高さを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ビュー:画像とタイトル横並び』
LINKカエレバ、デザイン変更CSSカスタマイズ!ほか簡単な登録方法
さいごに
Amazonに出品されてる画像が超縦長が存在しているに驚きました^^;
でもそんな画像があってもオカシクないし、CSSで調整すれば済む話ですね❦ 運営してると色々あるなぁ笑
カエレバは販売目的ではなく、画像が縦長なときのスタイル変更の参考例です。と念を押しておこう…( ˘ω˘ )
それでは、かうたっくでした❦
Comments