質問: カラーミー 商品ページについて いつもお世話になります。カラーミーを利用しております、topページから商品ページのレイアウトなどのテンプレートはオープン時に業者に作成してもらいました。今までは画像1のように商品詳細画像サイズが横長のため、他のサイトと画像を共有できないため、正方形に変更したく、カラーミーに確認したところ、「html・css編集によるデザインカスタマイズが影響している」とのことでcssにて変更しました。画像2が変更後のページですが、横幅を小さくしたため、拡大用商品画像が右横に配列されてしましました。画像1のように商品詳細画像の下に拡大用商品画像を配列したいのですがどうすればいいのでしょうか。また、商品詳細画像も拡大画像にすることはできないでしょうか?html・cssのことはほとんどわからないのですが、css編集に商品詳細レイアウトがありましたので下記にサイズ変更しました。---------------------------------------------------------------------#detail .main_img { width395px; height395px;---------------------------------------------------------------------下記は商品詳細レイアウトの部分の詳細です。#detail { text-align:center; color:<{$font_color}>; }#detail .expl { line-height:150%; text-align: left; margin: 10px 10px 5px 10px; }#detail .main_img { width395px; height395px; float:left; padding: 4px; border:1px #dacdb9 solid; margin-bottom:15px; }#detail .sub { float: left; width: 188px; text-align: center; }#detail .sub img { width: <{$productimg_border}>px; padding: 4px; border:1px #dacdb9 solid; }#detail .table { width: 400px; background:transparent url(http://img.shop-pro.jp/tmpl_img/26/detail_table_bg.jpg) left top repeat-y; text-align:left; margin:20px auto 30px; }#detail .table .cell_1 { width: 130px; height: 28px; color: #6d2916; font-weight:bold; border-right: 2px #ffffff solid; border-bottom:2px #ffffff solid; }#detail .table .cell_2 { width: 270px; height: 28px; color: #6d2916; background:#f2ebe0; border-bottom:2px #ffffff solid; }#detail .table .cell_mar { margin: 0px 5px 0px 15px; }作ってもらった業者にお願いするのが一番早いのですが、今後、出来るだけ自分で出来ればと思っておりますのでご指導をお願いいたします。
回答: ecマスターズの田中です。>画像1のように商品詳細画像の下に拡大用商品画像を配列したいのですがどうすればいいのでしょうか。商品詳細画像、および拡大用商品画像、ともに「float:left;」のスタイルシート属性がついているため左上から詰めて表示されるようになっているのですが、仰るとおり、商品詳細画像の幅を小さくしたおかげで右側に空白ができ、拡大用商品画像がそこに入り込んでしまっておりますので、商品詳細画像の左右に余白(マージン)を取るように設定して、拡大用商品画像が入り込めないようにしてください。商品詳細画像の新しい横幅、395ピクセルに対して、画像上のパンくず・商品名の横幅が565ピクセルなので、(565-395)/2=85ピクセルずつ、左右に余白を設定してください。具体的には、#detail .main_img {width: 395px;height: 395px;margin: 0 85px 15px;}のようにご設定ください。(余白の値は左から上・左右・下方向の余白です。 上方向と下方向は、既存の設定から0と15ピクセルを引用しています)>また、商品詳細画像も拡大画像にすることはできないでしょうか?商品詳細画像部分のhtmlが編集できるのであれば、 と で囲んでリンクを張っていただければ拡大用商品画像と同様、クリックすると拡大画像が表示されるようになります。