EC-CUBE：商品詳細ページのメイン画像の下にサムネイル画像

 <img src="<!--{$arrFile[$key].filepath|h}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" alt="<!--{$arrProduct.name|h}-->" name="remote_image" id="remote_image" />

に変更

<div class="mini">

<!--★拡大する★-->

<a

href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->"

class="cbox"

title="<!--{$arrProduct.name|h}-->"

>

画像を拡大する</a>

</div>

③　上記の下に下記コードを追加

<!--▼ロールオーバー画像▼-->

<!--{if $arrProduct.sub_image1 != "" || $arrProduct.sub_image2 != "" || $arrProduct.sub_image3 != "" || $arrProduct.sub_image4 != ""}-->

<div id="over_image_box">

<div>

<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->

<!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}-->

<!--{assign var=keyl value="sub_large_image`$smarty.section.cnt.index+1`"}-->

<!--{assign var=keyt value="sub_title`$smarty.section.cnt.index+1`"}-->

<!--{assign var=keym value="main_image"}-->

<!--{if $arrProduct[$key] != ""}-->

<div class="over_image">

<a class="cbox" href="<!--{if $arrProduct[$keyl]|strlen >= 1}--><!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$keyl]|h}--><!--{else}--><!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$key]|h}--><!--{/if}-->" title="<!--{$arrProduct[$keyt]|h}-->" onmouseover="chgImg('<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$key]|h}-->','remote_image');" onmouseout="chgImg('<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$keym]|h}-->','remote_image');">

<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct[$key]|sfNoImageMainList|h}-->&amp;width=63&amp;height=63" /></a>

</div>

<!--{/if}-->

<!--{/section}-->

</div>

<br clear="all" /><div id="dummy"></div>

</div>

<!--{else}-->

<!--{/if}-->

<!--▲ロールオーバー画像▲-->

（2）■html/user_data/packages/default/css/contents.css

 /* ロールオーバー画像 */
 div#over_image_box {
 clear:both;
 margin-top:5px;
 margin-bottom:20px;
 padding-top:25px;
 background:url(../img/background/sonota_image.png) no-repeat top center;
 }
 div.over_image {
 float:left;
 }
 div.over_image img {
 border:#ddd 2px solid;
 margin:0 1px;
 }
 div.over_image img:hover {
 border: #F60 2px solid;
 }

div#over_image_box div#dummy {
 height:5px;
 background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
 margin-right:5px;
 }

#detailrightbloc h2 {
 margin: 0 0 10px 0;
 padding: 0 0 15px 0;
 color: #666;
 background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
 font-weight: bold;
 font-size: 160%;
 }
 #detailrightbloc .point,
 #detailrightbloc .relative_cat,
 #detailrightbloc .stock {
 margin: 0 0 10px 0;
 padding: 0 0 10px 0;
 background: url("../img/background/line_dot_01.gif") repeat-x bottom ;
 }
 #detailrightbloc .main_comment {
 margin-bottom: 20px;
 }

（3）sonota_image.pngを、■html/user_data/packages/default/img/background/フォルダに置く。

（4）サブ画像の画質が気になるときは・・・
メイン画像の幅が260pxに対して、サブ画像の幅は200pxになっているため、画像が入れ替わる際、サブ画像はもとのサイズより拡大されて表示されるので画質が落ちる。
拡大サブ画像をリサイズする方法もあるが、このページではすでにリサイズ画像が多いので、あまり多用すると表示が重くなる。また、必ずしも管理者が拡大画像を登録するとは限らない。よって、ベストなのは、メイン画像とサブ画像を同じサイズにする方法でしょう。

①　システム設定＞パラメーター設定で値を変更する。
NORMAL_SUBIMAGE_WIDTH：260（通常サブ画像横）
NORMAL_SUBIMAGE_HEIGHT：260（通常サブ画像縦）

②　サブ画像が既に登録されている場合は、もう一度登録をやり直す。

③　サブ情報エリアのCSSを調整する。パネルスライダーを適用している場合は下記に変更。
■html/user_data/packages/default/css/contents.css

 /* 1カラム用 */
 #one_maincolumn div.subtext {
 margin-bottom: 20px;
 float: left;
 width: 61%; /*パネルスライダー用に変更　69%→61%　*/
 }
 #one_maincolumn div.subphotoimg {
 float: right;
 text-align: right;
 }
 #one_maincolumn p.subtext {
 margin-bottom: 20px;
 }

/* 2カラム用 */
 #two_maincolumn_left div.subtext,
 #two_maincolumn_right div.subtext {
 margin-bottom: 20px;
 float: left;
 width: 61%; /*パネルスライダー用に変更　73%→61%　*/
 }
 #two_maincolumn_left p.subtext,
 #two_maincolumn_right p.subtext {
 margin-bottom: 20px;
 }
 #two_maincolumn_left div.subphotoimg ,
 #two_maincolumn_right div.subphotoimg {
 float: right;
 text-align: right;
 }

/* 3カラム用 */
 #three_maincolumn div.subtext {
 margin-bottom: 20px;
 float: left;
 width: 49%; /*パネルスライダー用に変更　63%→49%　*/
 }
 #three_maincolumn p.subtext {
 margin-bottom: 20px;
 }
 #three_maincolumn div.subphotoimg {
 float: right;
 text-align: right;
 }

↓