[EC-CUBE] 2.4.3
[レンタルサーバ] WADAXサーバー
[OS] Windows XP
[PHP] Version PHP 5.2.13
[データベース] MySQL 4.1.22
[ブラウザ] IE8とIE6

オススメ商品をデフォルトの2列から3列に変更したいのですが、
下記のサイトのとおりにしてもうまくできませんでした。
http://www28.atwiki.jp/lucier/pages/14.html

レイアウトは左と真ん中のみにブロックを配置、右は空欄。
『オススメ商品』のブロックは真ん中においてあります。
各ブロックの幅などは全てデフォルトの状態です。

どのようにしたらよいのか、ご指摘をお願いします。

ちなみにサイトのとおりにしたら、

・3列目の商品の価格のみが3列目のもので、
　画像とコメントは2列目の商品のものが表示される。
・3列目の商品の位置が2列目の商品の下に少しずれて表示される。

商品を数字にした簡単な図にすると、

1.2.
　3.（価格は3のもの、画像とコメントは2のもの）
4.5.
　6.（価格は6のもの、画像とコメントは3のもの）
7.8.
　9.（価格は9のもの、画像とコメントは8のもの）

上記サイトの説明では
２つめの商品ブロック　<div class="recomendright">〜</div>の recomendright を recomendleft に変更し、

<!–{assign var=price01 value=`$arrBestProducts[cnt].price01_min`}–>
<!–{assign var=price02 value=`$arrBestProducts[cnt].price02_min`}–>

の[cnt]を[$cnt2]に変更と書いてありましたが、私の使っているECCUBEでは初めから[$cnt2]になっていましたのでそのままにしました。


どなたか、ご教授お願いします。




　

参照先のサイトの通りで動きそうですが・・・
各Smarty上の変数の参照が正しく割り当てられているか確認されると良いでしょう。※詳細はSmartyのマニュアルを確認されると良いと思います。

ずれて表示されるのは単純にデザインレベルのＣＳＳの指定の問題ですので、ＣＳＳの修正をして３列に収まるように修正する必要があると思います。（参照先サイトではＣＳＳ修正は前提として省略されているようです）

----------------
EC-CUBE公式エヴァンジェリスト
EC-CUBEインテグレートパートナー (株)スピリット・オブ
移転・拡張・高速化・問題解決
各種カスタマイズ・支援依頼承ります。
[url=h

AMUAMU様　返信ありがとうございます。

http://www28.atwiki.jp/lucier/pages/14.html
上記サイトには3列目の商品ブロックの作り方として、
『２つ目の商品ブロックをコピーして追加。<div class="recomendleft">〜</div>の recomendleft を recomendright に変更し、
<!–{assign var=price01 value=`$arrBestProducts[$cnt2].price01_min`}–>
<!–{assign var=price02 value=`$arrBestProducts[$cnt2].price02_min`}–>

の[$cnt2]を[$cnt3]にすれば完成と書いてありますが、
上記の部分だけでなく他の部分の[$cnt2]も[$cnt3]に変更したら、3列目の商品欄が価格、画像、コメント全て正常に表示されました。もしかして、これも変更するのはあたりまえなんでしょうか？　　
当方、まったくの初心者で、わけもわからず、偶然うまくできたんですが、これであっていますか?　


<div class="recomendright">
<!--{assign var=cnt3 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-1` }-->
<!--{if $arrBestProducts[$cnt3]|count > 0}-->
<!--{if $arrBestProducts[$cnt3].main_image != ""}-->
<!--{assign var=image_path value="`$arrBestProducts[$cnt3].main_image`"}-->
<!--{else}-->
<!--{assign var=image_path value="`$smarty.const.NO_IMAGE_DIR`"}-->
<!--{/if}-->

<a href="<!--{$smarty.const.URL_DIR}-->products/detail.php?product_id=<!--{$arrBestProducts[$cnt3].product_id}-->">
<img src="<!--{$smarty.const.SITE_URL}-->resize_image.php?image=<!--{$image_path|sfRmDupSlash}-->&width=160&height=160" alt="<!--{$arrBestProducts[$cnt3].name|escape}-->" /></a>
<h3>
<a href="<!--{$smarty.const.URL_DIR}-->products/detail.php?product_id=<!--{$arrBestProducts[$cnt3].product_id}-->"><!--{$arrBestProducts[$cnt3].name|escape}--></a>
</h3>

<!--{assign var=price01 value=`$arrBestProducts[$cnt3].price01_min`}-->
<!--{assign var=price02 value=`$arrBestProducts[$cnt3].price02_min`}-->

<p>価格<span class="mini">(税込)</span>：<span class="price">
<!--{if $price02 == ""}-->
<!--{$price01|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{else}-->
<!--{$price02|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{/if}-->円</span>
</p>

<p class="mini"><!--{$arrBestProducts[$cnt3].comment|escape|nl2br}--></p>
<!--{/if}-->
</div>

不安なので3列目の作り方があっているかどうか、教えていただければ助かります。

『表示のずれ』のＣＳＳの修正に関してもどこをどう修正すればよいかよくわからないんですが、なんとか調べてみます。行き詰ったら、また質問させていただきたいと思います。

３列目の作り方、修正の方向ともにバッチリだと思います。

解説サイトは本ではないですから、言葉足らずのところがあるのは致し方ないでしょう。読者ターゲット層の違いもあると思います。

いろいろな所のヒントを頼りに、トライ＆エラーで、それっぽいところを直すことを続けていれば自然と身についてきますので、頑張ってください。

ＣＳＳのズレはFirebug等を使うと原因が分かりやすいです。

----------------
EC-CUBE公式エヴァンジェリスト
EC-CUBEインテグレートパートナー (株)スピリット・オブ
移転・拡張・高速化・問題解決
各種カスタマイズ・支援依頼承ります。
[url=h

AMUAMU 様　

index.cssの『おすすめ』の
div#recomendareaとdiv.recomendblockのwidthを変更したら、
3列全てうまく表示されました。

また、Firebugというのも教えていただきありがとうございました。FireFoxのブラウザもインストールしてIEとの表示の違いも今後のサイトデザインに生かしたいと思います。

ありがとうございました。