商品ページのサムネイルを2列にする方法

Question

お世話になっております。

添付画像のように商品ページの２枚目以降の画像を
２列にしている方法を知りたいです。

当店は上にカートを持って来ているので、こうするのが
いいかは分かりませんが、まずは方法を知りたいです。

ご教授下さい。###HR######IMG007354dfae87256fedd0f69cfef4c2f94.jpegIMG0###

Answer

ECマスターズの伊藤です。

商品ページのサムネイルを2列にする方法ですが、確認いたしますので、
恐れ入りますが、ご回答まで今しばらくお待ちくださいますよう
お願いいたします。

Answer

ECマスターズの伊藤です。

> 当店は上にカートを持って来ているので、こうするのが
> いいかは分かりませんが、まずは方法を知りたいです。

下記CSSにて、ご対応いただくことができますので、
お試しくださいませ。


    /* PC版サムネイルを縮小表示 */
#pagebody .rakutenLimitedId_ImageMain1-2{
display:inline-block;
    float: left;
}
#pagebody .rakutenLimitedId_ImageMain1-3:nth-child(1) img {
    width: 380px;
    height: auto !important;
}

#pagebody .rakutenLimitedId_ImageMain1-3 img {
    width: 185px;
    height: auto;
    float: left;
    margin: 5px;
    }

Answer

伊藤さん

ありがとうございます。

当ソースを商品ページのどこに入れるといいでしょうか？

PC用商品説明文やPC用販売説明文でしょうか？

よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> 当ソースを商品ページのどこに入れるといいでしょうか？
> 
> PC用商品説明文やPC用販売説明文でしょうか？

PC用商品説明文や、ヘッダーなど、
ページ内に読み込まれてる箇所であれば、
どちらでも構いません。

Answer

伊藤さん

商品説明文に入れたら２列になりました。

後はこれが有効かどうかですね。

さすがにスマホには関係ないですよね？

何か取り入れるか入れないかの判断材料があれば
ありがたいです。

Answer

ECマスターズの伊藤です。

> さすがにスマホには関係ないですよね？

はい、スマホは編集することができません。

> 何か取り入れるか入れないかの判断材料があれば

クリック数を取るなど、詳細な判断材料を
取得することができないため、
見た目上、ご納得いただけるかどうかに
なるかと思います。