質問 > フロント機能 > TOPページに表示される「おすすめ商品」の2列表示を3列に変更したいのですが。 |
フロント機能
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
bipod |
投稿日時: 2011/11/1 17:20
対応状況: −−−
|
新米 登録日: 2011/11/1 居住地: 投稿: 2 |
TOPページに表示される「おすすめ商品」の2列表示を3列に変更したいのですが。 TOPページに表示される「おすすめ商品」の2列表示を3列に変更したいのですが、ブロック編集画面もみなさんが話しているようにはなっておらず、data/Smarty/templates/default/bloc/best5.tplもみつかりませんでした。
どのなたかご教授ねがえませんでしょうか。 よろしくお願い致します。 EC-CUBEバージョン 2.11.4 PHPバージョン PHP 5.2 DBバージョン MySQL 5.0.51a ブロック編集画面は以下のようになっていました。 ======================= <!--{if count($arrBestProducts) > 0}--> <div class="bloc_outer clearfix"> <div id="recommend_area"> <h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_bloc_recommend.jpg" alt="*" class="title_icon" /></h2> <div class="bloc_body clearfix"> <!--{foreach from=$arrBestProducts item=arrProduct name="recommend_products"}--> <div class="product_item clearfix"> <div class="productImage"> <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->"> <img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->&width=155&height=168" alt="<!--{$arrProduct.name|h}-->" /> </a> </div> <div class="productContents"> <h3> <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->"><!--{$arrProduct.name|h}--></a> </h3> <p class="sale_price"> <!--{$smarty.const.SALE_PRICE_TITLE}-->(税込): <span class="price"><!--{$arrProduct.price02_min|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}--> 円</span> </p> <p class="mini comment"><!--{$arrProduct.comment|h|nl2br}--></p> </div> </div> <!--{if $smarty.foreach.recommend_products.iteration % 2 === 0}--> <div class="clear"></div> <!--{/if}--> <!--{/foreach}--> </div> </div> </div> <!--{/if}--> ============================== |
seasoft |
投稿日時: 2011/11/1 19:40
対応状況: −−−
|
神 登録日: 2008/6/4 居住地: 投稿: 7367 |
Re: TOPページに表示される「おすすめ商品」の2列表示を3列に変更したいのですが。 <!--{if $smarty.foreach.recommend_products.iteration % 2 === 0}-->
を <!--{if $smarty.foreach.recommend_products.iteration % 3 === 0}--> に あとは、CSS です。 bloc.css だったかな。
|
bipod |
投稿日時: 2011/11/2 17:43
対応状況: −−−
|
新米 登録日: 2011/11/1 居住地: 投稿: 2 |
Re: TOPページに表示される「おすすめ商品」の2列表示を3列に変更したいのですが。 本当にありがとうございます。
引用:
上記のように書いて CSSを修正して、管理画面>コンテンツ管理>おすすめ商品管理から商品を追加したら表示されました。 本当にありがとうございました。 |
have |
投稿日時: 2011/11/5 20:00
対応状況: −−−
|
一人前 登録日: 2010/11/4 居住地: 東京都 投稿: 83 |
Re: TOPページに表示される「おすすめ商品」の2列表示を3列に変更したいのですが。 引用:
お世話になります。 上記のやり方で、オススメ商品が縦に表示されました。(縦になってるおすすめ商品の画像) 横並びたいんですが、bloc.cssでいくら編集しても、うまくいけなかった。どれに修正すればいいですか? 宜しくお願いいたします。 ----------------------------------------------------- /* =============================================== ▼おすすめ商品 =============================================== */ /* tplファイルのマークアップが同じ項目 メインカラム用 2カラム時 [two_maincolumn_left] [two_maincolumn_right] メインカラム用 3カラム時 [three_maincolumn] サイドカラム用 [side_column] 商品詳細のオススメ商品 [whobought_area] =============================================== */ /* 共通 ----------------------------------------------- */ #recomend_area .bloc_body , #whobought_area .whobought_bloc { margin-bottom: 10px; padding: 10px 0 10px; border: none; width: 100%; background: url("../img/background/line_dot_01.gif") repeat-x bottom; } #recomend_area .bloc_body p , #whobought_area .whobought_bloc p { margin: 0 0 5px 0; } #recomend_area .bloc_body img , #whobought .whobought_bloc img { display: block; float: left; margin: 0 5px 0 0; } #recomend_area .bloc_body h3 , #whobought_area .whobought_bloc h3 { font-size: 100%; font-weight: normal; } /* 画像 ----------------------------------------------- */ #recomend_area .bloc_body .productImage , #whobought_area .whobought_bloc .productImage { margin-bottom: 10px; float: left; width: 90px; } /* 左右の振り分け ----------------------------------------------- */ #one_maincolumn #recomend_area .recomendleft , #two_maincolumn_right #recomend_area .recomendleft , #two_maincolumn_left #recomend_area .recomendleft , #three_maincolumn #recomend_area .recomendleft , #whobought_area .whobought_bloc .whobought_left { float: left; width: 47.5%; } #one_maincolumn #recomend_area .recomendright , #two_maincolumn_right #recomend_area .recomendright , #two_maincolumn_left #recomend_area .recomendright , #three_maincolumn #recomend_area .recomendright , #whobought_area .whobought_bloc .whobought_right { float: right; width: 47.5%; } /* 商品説明テキスト ----------------------------------------------- */ /* メインカラム用 1カラム時*/ #one_maincolumn #recomend_area .bloc_body .productContents { float: right; width: 74%; } /* メインカラム用 2カラム時*/ #two_maincolumn_right #recomend_area .bloc_body .productContents , #two_maincolumn_left #recomend_area .bloc_body .productContents , #two_maincolumn_right #whobought_area .whobought_bloc .productContents , #two_maincolumn_left #whobought_area .whobought_bloc .productContents { float: right; width: 74%; } /* メインカラム用 3カラム時*/ #three_maincolumn #recomend_area .bloc_body .productContents , #three_maincolumn #whobought_area .whobought_bloc .productContents { float: right; width: 67%; } /* サイドカラム用 (幅px固定) */ .side_column #recomend_area .bloc_body { margin-top: 5px; margin-right: 0; width: 157px; padding: 0; } .side_column #recomend_area .bloc_body .productContents { padding: 0; margin: 0; width: 80px; } .side_column #recomend_area .recomendleft { padding: 0; width: 70px; float: left; } .side_column #recomend_area .recomendright { margin: 0; padding: 0; width: 70px; float: right; } |
seasoft |
投稿日時: 2011/11/5 22:47
対応状況: −−−
|
神 登録日: 2008/6/4 居住地: 投稿: 7367 |
Re: TOPページに表示される「おすすめ商品」の2列表示を3列に変更したいのですが。 出力 HTML ソースを見ていないのでよく分かりませんが、「float: right;」が混在している辺りは怪しいですね。
|
have |
投稿日時: 2011/11/5 23:38
対応状況: −−−
|
一人前 登録日: 2010/11/4 居住地: 東京都 投稿: 83 |
Re: TOPページに表示される「おすすめ商品」の2列表示を3列に変更したいのですが。 有難うございます。
出力 HTML ソース: <!-- ▼おすすめ商品 --> <div class="bloc_outer clearfix"> <div id="recommend_area"> <h2> <img src="/eccube/user_data/packages/2011114/img/title/tit_bloc_recommend.jpg" alt="*" class="title_icon" /> </h2> <div class="bloc_body clearfix"> <div class="product_item clearfix"> <div class="productImage"> <a href="/eccube/products/detail.php?product_id=2"> <img src="/eccube/resize_image.php?image=nabe130.jpg&width=155&height=168" alt="おなべ" /> </a> </div> <div class="productContents"> <h3> <a href="/eccube/products/detail.php?product_id=2">おなべ</a> </h3> <p class="sale_price"> 販売価格(税込): <span class="price">1,733 円</span> </p> <p class="mini comment">たまには鍋でもどうでしょう。</p> </div> </div> <div class="product_item clearfix"> <div class="productImage"> <a href="/eccube/products/detail.php?product_id=1"> <img src="/eccube/resize_image.php?image=ice130.jpg&width=155&height=168" alt="アイスクリーム" /> </a> </div> <div class="productContents"> <h3> <a href="/eccube/products/detail.php?product_id=1">アイスクリーム</a> </h3> <p class="sale_price"> 販売価格(税込): <span class="price">980 円</span> </p> <p class="mini comment">お口直しに。</p> </div> </div> <div class="product_item clearfix"> <div class="productImage"> <a href="/eccube/products/detail.php?product_id=3"> <img src="/eccube/resize_image.php?image=recipe130.jpg&width=155&height=168" alt="おなべレシピ" /> </a> </div> <div class="productContents"> <h3> <a href="/eccube/products/detail.php?product_id=3">おなべレシピ</a> </h3> <p class="sale_price"> 販売価格(税込): <span class="price">105 円</span> </p> <p class="mini comment">あの、秘伝のお鍋レシピです。</p> </div> </div> <div class="clear"></div> </div> </div> </div> <!-- ▲おすすめ商品 --> |
seasoft |
投稿日時: 2011/11/6 0:13
対応状況: −−−
|
神 登録日: 2008/6/4 居住地: 投稿: 7367 |
Re: TOPページに表示される「おすすめ商品」の2列表示を3列に変更したいのですが。 やはり、recomendright などありますので、float: right; が適用されていそうですね。
|
have |
投稿日時: 2011/11/6 0:55
対応状況: −−−
|
一人前 登録日: 2010/11/4 居住地: 東京都 投稿: 83 |
Re: TOPページに表示される「おすすめ商品」の2列表示を3列に変更したいのですが。 引用:
指導いただき、有難うございました。 recomendright float: left; にしても、変わらないです。 /* 左右の振り分け ----------------------------------------------- */ #one_maincolumn #recomend_area .recomendleft , #two_maincolumn_right #recomend_area .recomendleft , #two_maincolumn_left #recomend_area .recomendleft , #three_maincolumn #recomend_area .recomendleft , #whobought_area .whobought_bloc .whobought_left { float: left; width: 47.5%; } #one_maincolumn #recomend_area .recomendright , #two_maincolumn_right #recomend_area .recomendright , #two_maincolumn_left #recomend_area .recomendright , #three_maincolumn #recomend_area .recomendright , #whobought_area .whobought_bloc .whobought_right { float:left; width: 47.5%; } |
seasoft |
投稿日時: 2011/11/6 1:55
対応状況: −−−
|
神 登録日: 2008/6/4 居住地: 投稿: 7367 |
Re: TOPページに表示される「おすすめ商品」の2列表示を3列に変更したいのですが。 一般論となりますが、実際の URL にて、各種ブラウザの開発者向けツールで分析するのが早いかと思います。
|
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |