該当箇所の画像サイズを指定している項目を変更して、再度画像を登録し直してください。
(1)
以下項目のピクセル数の指定を変更してください。
ショップデザイン / 機能・設定 / ショップページ表示設定 「サムネイル画像生成サイズ」
(2)
画像を登録し直してください。
(1)のサイズを変更しても、すでに登録された画像のサイズは変わりません。再登録が必要です。
商品管理 / 商品一覧 / 商品編集 「メイン画像」
商品数が多い場合は、CSVを利用して画像を登録し直すことも可能です。
商品管理 / 商品一覧 / アップロード・ダウンロード / 商品一括登録
※CSSで変更する場合
| 従来よりも画像を小さく表示する場合や、元画像が大きく、表示サイズを変更しても画質に問題が出ない場合には、上記の手順を踏まずにCSSで個別に好みのサイズを指定して変更することもできます。 |
例として、【Complete】のカテゴリーページにあるサムネイル画像の表示サイズを
変更する方法をご紹介します。
※テンプレートによってclassが異なりますので、テンプレートごとにご確認ください。
(1)
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通
「CSS欄」内で「Ctrl+F」キーを押し、表示される検索窓に
.item-list li img
と入力し、Enterキーを押して以下のソースを探してください。
.item-list li img {
width: 100%;
margin-bottom: 4px;
position: relative;
}
(2)
(1)の箇所を以下へ変更してください。
「width: ○○px;」のピクセル数の値を変更することにより、表示サイズを調整することができます。
/* PC向け */
@media screen and (min-width: 769px) {
.item-list li img {
width: 180px;
margin-bottom: 4px;
position: relative;
}
}
/* スマートフォン向け */
@media screen and (max-width: 768px) {
.item-list li img {
width: 167px;
margin-bottom: 4px;
position: relative;
}
}


