[EC-CUBE] 2.11.1
[レンタルサーバ] EC-CUBEクラウドサーバ
[PHP] PHP 5.2.17
[データベース] MySQL 5.0.67-log


最近サイト構築を始めた初心者です。

http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=8406&forum=10&post_id=40836#forumpost40836

http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=8129&forum=10&post_id=39295#forumpost39295

などのスレッドを参考に、商品一覧は3列にはなったのですが、商品の高さが合わずレイアウトが崩れてしまいます。

http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=8406&forum=10&post_id=40836#forumpost40836

に書かれていたCSSをそのまま利用しようとしているのですが、『list.php』のCSSがどこの事なのかが分からなくて困っています。

/www/eccube/html/products/list.phpの事なのかと思い開いてみましたが、


<?php
/*
* This file is part of EC-CUBE
*
* Copyright(c) 2000-2011 LOCKON CO.,LTD. All Rights Reserved.
*
* http://www.lockon.co.jp/
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
*/

// {{{ requires
require_once '../require.php';
require_once CLASS_EX_REALDIR . 'page_extends/products/LC_Page_Products_List_Ex.php';

// }}}
// {{{ generate page

$objPage = new LC_Page_Products_List_Ex();
register_shutdown_function(array($objPage, "destroy"));
$objPage->init();
$objPage->process();
?>


と、

http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=8406&forum=10&post_id=40836#forumpost40836

に書かれていた


----------------------------
list.php

<!--▼商品-->
<form name="product_form<!--{$id|h}-->" action="?" onsubmit="return false;">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<div class="list_area clearfix">
<a name="product<!--{$id|h}-->"></a>
<div class="listphoto">
<!--★画像★-->
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->" class="over"><!--商品写真--><img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->" alt="<!--{$arrProduct.name|h}-->" class="picture" /></a>
</div>
<div class="listrightbloc">
<!--▼商品ステータス-->
<!--{if count($productStatus[$id]) > 0}-->
<ul class="status_icon clearfix">
<!--{foreach from=$productStatus[$id] item=status}-->
<li>
<img src="<!--{$TPL_URLPATH}--><!--{$arrSTATUS_IMAGE[$status]}-->" width="65" height="14" alt="<!--{$arrSTATUS[$status]}-->"/>
</li>
<!--{/foreach}-->
</ul>
<!--{/if}-->
<!--▲商品ステータス-->

<!--★商品名★-->
<h3>
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->"><!--{$arrProduct.name|h}--></a>
</h3>
<!--★価格★-->
<div class="pricebox sale_price">
<!--{$smarty.const.SALE_PRICE_TITLE}-->(税込)：
<span class="price">
<span id="price02_default_<!--{$id}-->">
<!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
<!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{else}-->
<!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->〜<!--{$arrProduct.price02_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{/if}-->
</span><span id="price02_dynamic_<!--{$id}-->"></span>
円</span>
</div>

<!--★コメント★-->
<div class="listcomment"><!--{$arrProduct.main_list_comment|h|nl2br}--></div>
</div>
</div>
</form>

<!--▲商品-->



<!--{if $smarty.foreach.arrProducts.last}-->
<div style="clear:both;"></div>


とは違っていました。

書き換えるのか、そもそも違う所を直すのか、ご教示いただけると幸いです。

よろしくお願い致します。

FUDO　様　こんにちは

fukap様の解決策である
div.list_area {
をお探しでしたら以下のファイル内にあります。
html/user_data/packages/default/css/contents.css

また、seasoft様が提示されている
<!--{if $smarty.foreach.arrProducts.last}-->
をお探しでしたら、
data/Smarty/templates/default/products/list.tpl
の中に記述されています。

参考までに。

tanaca 様 ご返信ありがとう御座います。

html/user_data/packages/default/css/contents.css

と

data/Smarty/templates/default/products/list.tpl

を書き換えました所、高さが揃いレイアウトの崩れがなくなりました。

しかし、販売価格や上部ナビの文字が文字化けしてしまいました。

変更したのは



/* レイアウト
----------------------------------------------- */
div.list_area {
padding: 0 0 30px 0;
width: 33%;
overflow: hidden;
　　position: relative;
float: left;
}

div.listphoto {
padding: 0px 0 30px 0;
text-align: center;
}

/* メインカラム用 1カラム時*/
#one_maincolumn div.listrightbloc {
float: right;
width: 100%;
}

/* メインカラム用 2カラム時*/
#two_maincolumn_right div.listrightbloc ,
#two_maincolumn_left div.listrightbloc {
float: left;#script tag escaped#;
width: 100%;
}

/* メインカラム用 3カラム時*/
#three_maincolumn div.listrightbloc {
float: right;
width: 90%;
}


と


<!--▼商品-->
<form name="product_form<!--{$id|h}-->" action="?" onsubmit="return false;">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<div class="list_area clearfix">
<a name="product<!--{$id|h}-->"></a>
<div class="listphoto">
<!--★画像★-->
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->" class="over"><!--商品写真--><img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->" alt="<!--{$arrProduct.name|h}-->" class="picture" /></a>
</div>
<div class="listrightbloc">
<!--▼商品ステータス-->
<!--{if count($productStatus[$id]) > 0}-->
<ul class="status_icon clearfix">
<!--{foreach from=$productStatus[$id] item=status}-->
<li>
<img src="<!--{$TPL_URLPATH}--><!--{$arrSTATUS_IMAGE[$status]}-->" width="65" height="14" alt="<!--{$arrSTATUS[$status]}-->"/>
</li>
<!--{/foreach}-->
</ul>
<!--{/if}-->
<!--▲商品ステータス-->

<!--★商品名★-->
<h3>
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->"><!--{$arrProduct.name|h}--></a>
</h3>
<!--★価格★-->
<div class="pricebox sale_price">
<!--{$smarty.const.SALE_PRICE_TITLE}-->(税込)：
<span class="price">
<span id="price02_default_<!--{$id}-->">
<!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
<!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{else}-->
<!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->〜<!--{$arrProduct.price02_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{/if}-->
</span><span id="price02_dynamic_<!--{$id}-->"></span>
円</span>
</div>

<!--★コメント★-->
<div class="listcomment"><!--{$arrProduct.main_list_comment|h|nl2br}--></div>


</div>
</div>
</form>
<!--▲商品-->

<!--{if $smarty.foreach.arrProducts.last || $smarty.foreach.arrProducts.iteration % 3 === 0}-->
<div style="clear:both;"></div>

<!--{/if}-->

<!--{foreachelse}-->
<!--{include file="frontparts/search_zero.tpl"}-->
<!--{/foreach}-->

</div>


と、いう様に変更しました。

よろしければ、どこが原因となっているのかご教示いただければ幸いです。

よろしくお願いいたします。

FUDO 様　こんばんは。

両方とも変更を加えて文字化けするようになったとのことですので、一度元に戻して文字化けが直ったのを確認のうえ、
contents.cssだけ変更を加えて高さを統一させてみてはどうでしょうか？
list.tplは変更せずに。

tanaca 様 再度ご返信ありがとう御座います。

contents.cssとlist.tplを変更前に戻し文字化けを確認した所、1列表示には戻ったのですが、文字化けはそのままでした。

念の為、Internet ExplorerとFirefoxで確認致しましたが、どちらも文字化けしています。

文字化けしているのは、上部ナビ、販売価格、規格1、規格2、下部ナビです。

よろしければ原因、解決法をご教示いただけると幸いです。

よろしくお願い致します。



変更前（元に戻した）CSS↓

contents.css

/* レイアウト
----------------------------------------------- */
div.list_area {
padding: 0 0 30px 0;
width: 100%;
overflow: auto;
}

div.listphoto {
float: left;
}

/* メインカラム用 1カラム時*/
#one_maincolumn div.listrightbloc {
float: right;
width: 74%;
}

/* メインカラム用 2カラム時*/
#two_maincolumn_right div.listrightbloc ,
#two_maincolumn_left div.listrightbloc {
float: right;
width: 80%;
}

/* メインカラム用 3カラム時*/
#three_maincolumn div.listrightbloc {
float: right;
width: 74%;
}


list.tpl

<!--▼商品-->
<form name="product_form<!--{$id|h}-->" action="?" onsubmit="return false;">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<div class="list_area clearfix">
<a name="product<!--{$id|h}-->"></a>
<div class="listphoto">
<!--★画像★-->
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->" class="over"><!--商品写真--><img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->" alt="<!--{$arrProduct.name|h}-->" class="picture" /></a>
</div>

<div class="listrightbloc">
<!--▼商品ステータス-->
<!--{if count($productStatus[$id]) > 0}-->
<ul class="status_icon clearfix">
<!--{foreach from=$productStatus[$id] item=status}-->
<li>
<img src="<!--{$TPL_URLPATH}--><!--{$arrSTATUS_IMAGE[$status]}-->" width="60" height="17" alt="<!--{$arrSTATUS[$status]}-->"/>
</li>
<!--{/foreach}-->
</ul>
<!--{/if}-->
<!--▲商品ステータス-->

<!--★商品名★-->
<h3>
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->"><!--{$arrProduct.name|h}--></a>
</h3>
<!--★価格★-->
<div class="pricebox sale_price">
<!--{$smarty.const.SALE_PRICE_TITLE}-->(税込)：
<span class="price">
<span id="price02_default_<!--{$id}-->">
<!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
<!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{else}-->
<!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->〜<!--{$arrProduct.price02_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
<!--{/if}-->
</span><span id="price02_dynamic_<!--{$id}-->"></span>
円</span>
</div>

<!--★コメント★-->
<div class="listcomment"><!--{$arrProduct.main_list_comment|h|nl2br}--></div>

<!--★商品詳細を見る★-->
<div class="detail_btn">
<!--{assign var=name value="detail`$id`"}-->
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->" onMouseOver="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_detail_on.jpg','<!--{$name}-->');" onMouseOut="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_detail.jpg','<!--{$name}-->');">
<img src="<!--{$TPL_URLPATH}-->img/button/btn_detail.jpg" alt="商品詳細を見る" name="<!--{$name}-->" id="<!--{$name}-->" /></a>
</div>

<!--▼買い物かご-->
<input type="hidden" name="product_id" value="<!--{$id|h}-->" />
<input type="hidden" name="product_class_id" id="product_class_id<!--{$id|h}-->" value="<!--{$tpl_product_class_id[$id]}-->" />

<div class="cart_area clearfix">
<!--{if $tpl_stock_find[$id]}-->
<!--{if $tpl_classcat_find1[$id]}-->
<div class="classlist">
<dl class="size01 clearfix">
<!--▼規格1-->
<dt><!--{$tpl_class_name1[$id]|h}-->：</dt>
<dd>
<select name="classcategory_id1" style="<!--{$arrErr.classcategory_id1|sfGetErrorColor}-->">
<!--{html_options options=$arrClassCat1[$id] selected=$arrProduct.classcategory_id1}-->
</select>
<!--{if $arrErr.classcategory_id1 != ""}-->
<p class="attention">※ <!--{$tpl_class_name1[$id]}-->を入力して下さい。</p>
<!--{/if}-->
</dd>
<!--▲規格1-->
</dl>
<!--{if $tpl_classcat_find2[$id]}-->
<dl class="size02 clearfix">
<!--▼規格2-->
<dt><!--{$tpl_class_name2[$id]|h}-->：</dt>
<dd>
<select name="classcategory_id2" style="<!--{$arrErr.classcategory_id2|sfGetErrorColor}-->">
</select>
<!--{if $arrErr.classcategory_id2 != ""}-->
<p class="attention">※ <!--{$tpl_class_name2[$id]}-->を入力して下さい。</p>
<!--{/if}-->
</dd>
<!--▲規格2-->
</dl>
<!--{/if}-->
</div>
<!--{/if}-->
<div class="cartin clearfix">
<div class="quantity">
数量：<input type="text" name="quantity" class="box" value="<!--{$arrProduct.quantity|default:1|h}-->" maxlength="<!--{$smarty.const.INT_LEN}-->" style="<!--{$arrErr.quantity|sfGetErrorColor}-->" />
<!--{if $arrErr.quantity != ""}-->
<br /><span class="attention"><!--{$arrErr.quantity}--></span>
<!--{/if}-->
</div>
<div class="cartin_btn">
<!--★カゴに入れる★-->
<div id="cartbtn_default_<!--{$id}-->">
<input type="image" id="cart<!--{$id}-->" src="<!--{$TPL_URLPATH}-->img/button/btn_cartin.jpg" alt="カゴに入れる" onClick="fnInCart(this.form); return false;" onMouseOver="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_cartin_on.jpg', this);" onMouseOut="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_cartin.jpg', this);" />
</div>
<div class="attention" id="cartbtn_dynamic_<!--{$id}-->"></div>
</div>
</div>
<!--{else}-->
<div class="cartbtn attention">申し訳ございませんが、只今品切れ中です。</div>
<!--{/if}-->
</div>
<!--▲買い物かご-->
</div>
</div>
</form>
<!--▲商品-->

<!--{if $smarty.foreach.arrProducts.last}-->
<!--▼ページナビ(下部)-->
<form name="page_navi_bottom" id="page_navi_bottom" action="?">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<!--{if $tpl_linemax > 0}--><!--{$smarty.capture.page_navi_body|smarty:nodefaults}--><!--{/if}-->
</form>
<!--▲ページナビ(下部)-->
<!--{/if}-->

<!--{foreachelse}-->
<!--{include file="frontparts/search_zero.tpl"}-->
<!--{/foreach}-->

</div>
<!--▲CONTENTS-->

FUDO　様　こんにちは

contents.cssとlist.tplの内容を変更する際に何のソフトで編集されましたでしょうか？
変更を一切加えていないcontents.cssとlist.tplで再度、上書きしてみてください。

tanaca 様 再度ご返信ありがとう御座います。

CSSの変更はFTPクライアント FFFTP Ver1.97bを使い、contents.cssとlist.tplをメモ帳で開き全文をコピーし、Dreamweaver MX 2004に貼り付けてから変更しております。

変更前のcontents.cssとlist.tplはメモ帳にコピーをしていて、それらをコピーし、Dreamweaver MX 2004に貼り付けてからCSSを上書きし、そのファイルをFFFTPで上書きたのですが、それでは変更を一切加えていないcontents.cssとlist.tplにはなりえないのでしょうか。

変更前のCSSはメモ帳にコピーした物しか残っておりません。

ご返答いただけると幸いです。

よろしくお願い致します。

FUDO　様

メモ帳とDreamweaverで編集されたのであれば文字コードや改行コードが正しくないものに変わっているのではないでしょうか。

＞それでは変更を一切加えていないcontents.cssとlist.tplにはなりえないのでしょうか。

文字コードが適切ではないままで上書きしている状況だと思います。

＞変更前のCSSはメモ帳にコピーした物しか残っておりません。

再度、同じバージョンのEC-CUBEをダウンロードして入手してはどうでしょか。

tanaca 様 度重なる質問にお答え下さいまして、誠にありがとうございます。

同じバージョンのEC-CUBEをダウンロードして上書きを行った所、文字化けが修復されました。

そしてDreamweaverではなくサクラエディタで編集を行いましたら、無事レイアウトが崩れていない3列表示に変更できました。

重ね重ねお礼を申し上げます。

本当にありがとう御座いました。

FUDO 様

問題解決されたようでよかったです。

当コミュテニティとは関係ありませんが、DreamweaverでEC-CUBEのファイルを修正する場合は
環境設定で文字コードを　UTF-8　に設定して改行タイプを　LF　にしておかれると大丈夫かと思います。