カラーミー　商品ページについて

Question

いつもお世話になります。
カラーミーを利用しております、TOPページから商品ページのレイアウトなどのテンプレートはオープン時に業者に作成してもらいました。今までは画像1のように商品詳細画像サイズが横長のため、他のサイトと画像を共有できないため、正方形に変更したく、カラーミーに確認したところ、「HTML・CSS編集によるデザインカスタマイズが影響している」とのことでCSSにて変更しました。
画像2が変更後のページですが、横幅を小さくしたため、拡大用商品画像が右横に配列されてしましました。
画像1のように商品詳細画像の下に拡大用商品画像を配列したいのですがどうすればいいのでしょうか。
また、商品詳細画像も拡大画像にすることはできないでしょうか？

HTML・CSSのことはほとんどわからないのですが、CSS編集に商品詳細レイアウトがありましたので下記にサイズ変更しました。
---------------------------------------------------------------------
#detail .main_img {
	width395px;
	height395px;
---------------------------------------------------------------------

下記は
商品詳細レイアウトの部分の詳細です。

#detail {
	text-align:center;
	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: 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;
	}

作ってもらった業者にお願いするのが一番早いのですが、今後、出来るだけ自分で出来ればと思っておりますのでご指導をお願いいたします。

Answer

ECマスターズの田中です。

＞画像1のように商品詳細画像の下に拡大用商品画像を配列したいのですがどうすればいいのでしょうか。
商品詳細画像、および拡大用商品画像、
ともに「float:left;」のスタイルシート属性がついているため
左上から詰めて表示されるようになっているのですが、
仰るとおり、商品詳細画像の幅を小さくしたおかげで
右側に空白ができ、拡大用商品画像がそこに入り込んでしまっておりますので、

商品詳細画像の左右に余白（マージン）を取るように設定して、
拡大用商品画像が入り込めないようにしてください。

商品詳細画像の新しい横幅、395ピクセルに対して、
画像上のパンくず・商品名の横幅が565ピクセルなので、
(565-395)/2=85ピクセルずつ、左右に余白を設定してください。
具体的には、

#detail .main_img {
width: 395px;
height: 395px;
margin: 0 85px 15px;
}

のようにご設定ください。
（余白の値は左から上・左右・下方向の余白です。
　上方向と下方向は、既存の設定から0と15ピクセルを引用しています）

＞また、商品詳細画像も拡大画像にすることはできないでしょうか？
商品詳細画像部分のHTMLが編集できるのであれば、
 と  で囲んで
リンクを張っていただければ
拡大用商品画像と同様、クリックすると拡大画像が表示されるようになります。

Answer

ＥＣマスターズ　田中さま

早々のご連絡をありがとうございました。
新しく掲載したい正方形画像の商品のページは商品詳細画像はほぼセンターに拡大用商品画像はその下に表示されました。
その新しい商品の商品詳細画像は白抜きしているのではっきりとはわかりませんが、背景のある画像だとやや右寄りに表示されていると思います。

また、今まで掲載している横長画像の商品の商品詳細画像だけがすべて右にずれてしまいました。

デザインの商品詳細で変更するのかとHTML・CSSをみてみましたがどれなのか分かりません。
全体的に中央に表示するには、どこをどのように変更すればいいのでしょうか。

商品詳細画像の拡大画像にするにあたり「商品詳細画像部分のHTML編集」ですが、商品画像はファイルより選んでアップしているので、編集の仕方を教えてください。

スマートフォンでも商品詳細画像を拡大画像にしたいのですが、変更の仕方を教えてください。

Answer

ECマスターズの田中です。


＞全体的に中央に表示するには、どこをどのように変更すればいいのでしょうか。
すみません、最初のご質問にて指摘し忘れていたのですが、
商品詳細画像の横幅・高さの書式が間違っており
正常に指定できておりません。

スタイルシートでは、「プロパティ: 値;」のように
プロパティの名前とその値を、コロンやセミコロンで正しく区切る必要があるので、

width395px;　→　width: 395px;
height395px;　→　height: 395px;

それぞれ、このようにご変更をお願いします。

また、私が記載した内容だけでは、
既存の枠線や位置の指定が不足しておりますので、

#detail .main_img {
width395px;
height395px;
float:left;
padding: 4px;
border:1px #dacdb9 solid;
margin-bottom:15px;
}

最初にいただいた上記の状態から、
widthとheightを正しい記述に修正し、
さらに余白の指定（margin）を加えて、

#detail .main_img {
width:395px;
height:395px;
float:left;
padding: 4px;
border:1px #dacdb9 solid;
margin-bottom:15px;
margin:0 85px 15px;
}

このようにご変更いただきますようお願いします。


＞商品詳細画像の拡大画像にするにあたり「商品詳細画像部分のHTML編集」ですが、商品画像はファイルより選んでアップしているので、編集の仕方を教えてください。

まずは、「■ＣＳＳ編集」の直上にある「■ＨＴＭＬ編集」より
商品詳細画像の部分を探してください。


の２行下に、

のようなタグがあると思います。

通常のHTMLであればURLが入っているはずの部分に
見慣れない文字列が入っておりますが、
これはカラーミー独自のタグで、
商品ページを実際に表示する時に、
該当商品用の画像URLに置き換えられる仕組みになっています。

同じURLにリンクを張りたいということなので、
上記の

を、

と

で囲んでいただければ結構です。
（{$*****}の部分は、商品詳細画像のものと同じ文字列をご利用ください）


＞スマートフォンでも商品詳細画像を拡大画像にしたいのですが、変更の仕方を教えてください。

PCとほぼ同様の手順となりますが、
https://shop-pro.jp/manual/s_design_tmpl_lst_sub2
上記マニュアルで紹介されている「HTML・CSS編集」の中にある
「■ＨＴＭＬ編集」欄にて、


のようなタグを探していただき、

と

で囲んでいただければ結構です。
（{$*****}の部分は、商品詳細画像のものと同じ文字列をご利用ください）

Answer

ECマスターズ 田中さま

お世話になります。商品ページでの画像は、
スタイルシートを教えていただいたように変更しましたところ、綺麗に中央にきました。
ですが、今までの掲載済の横長の画像も四角くなって、今までの画像が縦長に間延びしましたため、以前の状態に戻しております。
現状掲載しています画像はそのままで新しく掲載する分を正方形で表示する方法はないでしょうか。
横長や正方形が混載していますと見にくくなりますが、現在掲載済商品画像は、元の画像を探したりしないといけませんので、順次四角く変更予定です。
掲載済みの画像を正方形に変更したものを用意してから、設定を変更後、順番変更する方がベストでしょうか？

Answer

ECマスターズの田中です。

スタイルシートでは、条件を判断してスタイルを出し分けることはできません。
また、JavaScriptを利用する場合も、
一律の条件がないため、対象商品（正方形の商品、または横長の商品）をリストアップしておく必要があり、
正方形の商品が増える度にJavaScriptのソースを修正する作業が発生いたしますので、
予め、掲載済みの画像を正方形に変更したものをご用意いただく方が良いと思います。

Answer

ECマスターズ　田中さま

お世話になります。
ご返信ありがとうございます、掲載済み画像の変更にてしてみます、ありがとうございました。

カラーミー 商品ページについて

カラーミー　商品ページについて