EC-CUBEの商品一覧をCSSで横並びに変更するメモです。（バージョン2.12）

（１）商品写真サイズを任意のサイズに変更する

システム設定　→　パラメーター設定　→　（一覧画像縦）（一覧画像横）という項目があるので数値を変更する。

ここでは、２カラム５列なので、商品写真は大きさは、120px×120pxにセットしました。

（２）contents.cssを変更

デザイン管理　→　CSS設定　→　contents.css　の中で、商品一覧のレイアウトのCSSを変更する。

[css hightlight=”7″]
/* レイアウト
———————————————– */
div.list_area {
/*padding: 0 0 30px 0;　元のCSSをコメントアウト*/
/*width: 100%; 元のCSSをコメントアウト*/
overflow: auto;
overflow:hidden;
float: left; /*（追加）横並びに変更のため*/
width: 20%; /* （追加）2カラムの場合で（横並び５商品/写真サイズ120×120）※任意で数値変更*/
height:260px; /* （追加）1行分の高さを指定 ※任意で数値変更*/
}

div.listphoto {
float: left;
}

/* メインカラム用 1カラム時*/
#one_maincolumn div.listrightbloc {
float: right;
/* width: 74%;元のCSSをコメントアウト*/
width: 100%;/*追記*/
}

/* メインカラム用 2カラム時*/
#two_maincolumn_right div.listrightbloc,
#two_maincolumn_left div.listrightbloc {
float: right;
/* width: 80%;元のCSSをコメントアウト*/
width: 100%;/*追記*/
}

/* メインカラム用 3カラム時*/
#three_maincolumn div.listrightbloc {
float: right;
/* width: 74%;元のCSSをコメントアウト*/
width: 100%;/*追記*/
}
[/css]

（３）任意の部分について

list_areaの、width

列数によって％を変更します。（写真の大きさも列数によって変更）
５列：width:20%
４列：width:25%
３列：width:33%　という風に。。。

IE 6,7をCSSハック

IE 6,7では、list_areaの、widthを少し小さめの数値にしておかないと、横に入りきらず折れてしまいますので、width:20%の場合、IE6,7をCSSハックで19.8%に設定しました。

list_areaのheight

　写真とその下の商品名・値段等が表示された時の高さを記述しておかないと、上手く左端に折れず、歯抜けになってしまいます。そこで仕方なくlist_areaの高さを決めました。
商品登録する際に、商品名・コメントなどを極端に長いものにしなければ問題ないと思います。

[2013.07.20]　この問題は、heightLine.jsというスクリプトで解決できました。
記事[float（フロート）したボックスの高さを揃えてくれるスクリプト　heightLine.js）]

その他の注意点

　私は、商品一覧のレイアウトを２カラムで利用していますが、サイドカラムの幅を広めに変更しているのでメインカラム（商品一覧のエリア）が少し狭くなっています。
デフォルトのテンプレートでは、もう少しメインカラム（商品一覧のエリア）が広いので、写真サイズ：120×120にすると、少し商品と商品の間の隙間が広めになると思います。お好みで、写真の大きさを大きめに変更して調整してください。

（４）商品一覧ページの「カートエリア」と「商品詳細ボタン」「商品コメント」を隠す

デフォルトでは、カートと商品詳細ボタン、また、商品コメントが表示されていますが、できるだけ多くの商品を一覧したいので、私は手っ取り早くCSSで非表示にしてしまいました。
（表示したい場合はボタン画像を小さいものに変更して、CSSで位置調整する必要があると思います）

[php]
.listrightbloc .cart_area {
display:none;
}
.listrightbloc .detail_btn {
display:none;
}
.listrightbloc .listcomment {
display:none;
}
[/php]

あとは、アイコンや金額の表示部分をCSSで調整をします。
contents.cssの中の、商品一覧の部分で、
「レイアウト」の下に続いている「商品情報 各種設定」という部分を変更

[php]
/* 商品情報 各種設定
———————————————– */
/* 商品ステータス */
div.listrightbloc ul.status_icon {
margin-top: 5px;
margin-bottom: 5px;
width: 100%;
}
div.listrightbloc ul.status_icon li {
margin-right: 5px;
float: left;
}

/* 商品名 */
div.listrightbloc h3 {
font-weight: normal;
font-size: 100%;
margin-top: 5px;
margin-right: 12px;
}

/* 価格 */
div.listrightbloc .pricebox {
margin: 0 0px 5px 0;
}

[/php]