FROM CACHE - jp_header

画像の表示サイズについて

Matsunokisan
新規メンバー
4 0 0

Shopifyのテーマにてカタログを選択すると商品一覧が表示されるのですがすべての商品が画像のサイズがそれぞれ異なっており非常に見栄えが良くないのですが、画像の表示サイズを手間をかけずに自動でそろえる方法は無いのでしょうか?例えば、商品が自動で四角の中に納まるようにするなど・・。

宜しくお願いいたします。

2件の返信2
株式会社フルバランス
Shopify Partner
345 102 314

1.cssなどを調整して縦横サイズが違っても想定の表示になる様に調整する

→知見がない場合、Shopify Partnerなどにご依頼をされると良いかと思います

2.もとの画像の状態で余白をつけてサイズを揃える

余白をつけることで、縦横比が違う画像でも同じ比率で上げる形です。こちらは画像加工のみで対応可能ですので、

比較的実現しやすいと思います

 

株式会社フルバランス(Shopify Experts)
東京・高田馬場 18期目のWebデザイン・システム制作会社です。Shopify / Shopify Plusの制作・運営をサポートしております。
https://fbl.jp/
mk777
遊覧客
36 10 2

お使いのテーマが分からないのですが、assetsの中のcustom.cssの中で、下記のクラス名を探してみてください。

grid-view-item__link grid-view-item__image-container full-width-link

 

横方向のみサイズを指定していると思います。

これを縦方向のみのサイズ指定に、変えてみてください。

width:300px;

height:700x;

のような感じで、書き換えると良いです。

横方向のみ指定では、縦が見切れてしまうことがあります。

縦を指定した方が、収まりが良いと思います。

 

chromやfirfoxの開発者ツールを使って、画像を右クリックして表示されるメニューで、調査や要素を調べるのような項目を選択すると、HTMLやCSS を確認できます。

 

お使いのテーマのクラス名を確認して、試してみてください。

こうした操作が不慣れ場場合は、カスタマイズの相談に応じている方に、ご相談されると良いと思います。