• ベストアンサー

FC2ショッピングカートのカスタマイズ方法について

公式テンプレートのcosmeticを使用してHPを作る予定です。 http://sample.cart.fc2.com/?style=cosmetic 真ん中画面下のおすすめ商品の並びが横2つずつになっているのですが、横3つずつに変更したいです。 HTMLやCSSを色々変更してみたのですが結局上手くいかず・・・ どうすれば変更できるのか教えていただけないでしょうか。よろしくお願いします。

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ご提示のサンプルはアイテムが1個しかないので、複数並べた時にどのようなソースが生成されるのかを想像しての回答なので、違うかも知れませんが… 「おすすめ商品」の部分は、外枠<DIV class=MainCenter>(幅410px)の中に、アイテム<DIV class=PickUpBase>(幅205px)をフロートさせて並べているものと思われます。 (↑この想定が違えば、以下の回答は意味がないことになります) したがって、横に2個並びで自動的に改行されて下に並んでゆくというしくみになっていると思われます。 3個を並べる方法としては、全体の横幅を広げてあげるか、または、全体はそのままでアイテム1個の幅を小さくしてあげるかのどちらかでしょう。 とりあえず、後者で考えるならPickUpBaseの幅を410/3=136pxに指定してあげるだけで、IE以外は一応3個並びになります。 ただし、現状では画像(幅120px)と値段・詳細表示とをテーブルで横並びになるようなソース構成になっているので、結果的に136pxに納まりきらずレイアウトが乱れます。 この対策としては 1)HTMLソースの変更が可能なら、テーブル部分の画像と値段・詳細が縦並びになるように行を変えてしまう。(</tr><tr>を挿入する) 2)画像サイズを小さくする。 CSSで .PickUpImg img { width:70px; } などを追加 3)PickUpBaseにoverflowを設定する などで可能になります。 1)は縦並びに変えているので、画像サイズも現状のままで可能です。 2)はレイアウトはほぼ現状のままですが、画像サイズが小さくなります。 3)は、あまり現実的な方法とは言えないでしょう。

legendhgss
質問者

お礼

アドバイス有難うございます。「アイテム1個の幅を小さくして、テーブル部分の画像と値段・詳細が縦並びになるように行を変える」のやり方で横3つずつのレイアウトにできました!本当に感謝しております。教えていただき、有難うございました!

関連するQ&A

  • FC2のショッピングカートをカスタマイズしたいのですが。。。

    http://cart1.fc2.com/cart/sample/?tplid=4046 ↑ 商品が横に1列しかないこのテンプレートを、 http://cart1.fc2.com/cart/sample/?tplid=107246 ↑ このように、商品を横に3つ並べたいのです。 HTMLとCSSをチェックして色々試してみたのですが、どこをどうすればいいかさっぱりわからず困っています。 (各ボックスの幅を変えることのみできました。) 誰か、どうすれば良いか教えていくれませんか。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • FC2ショッピングカートのカスタマイズ

    FC2ショッピングカートのカスタマイズで悩んでおります。 最近リニューアルをしまして テンプレートを変更しました。 以前のテンプレートはきちんと表示されていたんですが 今回のベーシックウッドというテンプレートにすると 商品名が途中で切れて表示されたり カートボタンが半分見えなかったりします。 ヘルプでは 商品一覧箇所に高さの上限が設定されており テンプレートのカスタマイズにて 高さの調節は可能であるということでした。 必死でさがしているのですが。。 どのHTMLを触れば 商品名が切れず表示され 写真の大きさが統一出来て カートボタンが切れず 表示されるか お教え頂ければありがたいです。

  • FC2ショッピングカートのサイドバーについて

    FC2ショッピングカートのテンプレートhttp://sample.cart.fc2.com/?style=custamを利用して、サイトを作成しております。 テンプレートのように、右サイドバーに『おすすめ商品』や『売れ筋商品』『リンク』を表示させたいのですが、商品登録画面で"おすすめ商品"に登録しても、サイドバーに表示されません。。。 どうしたら良いのか分からず・・・ どなたかお分かりになる方がおりましたら宜しくお願いいたします。

  • FC2ショッピングカートにて・・・

    お世話になります FC2の無料ショッピングカートを利用しておりますが 提供されています公式テンプレートを使っていますが 公式テンプレートの一部など変更することは可能なのでしょうか? 恐れ入りますがご利用の方、お詳しい方、アドバイス願います。

    • 締切済み
    • CGI
  • FC2ショッピングカートのカスタマイズ方法について、

    FC2ショッピングカートのカスタマイズ方法について、 再びのお尋ねです。 FC2ショッピングカートの無料版を使用しています。 デザインは公式テンプレートのdefaultです。 このカスタマイズ方法についてお教えください。 「プラグイン」で「フリーエリア」を選択しました。 画像をクリックすると別のサイトに飛ぶ仕掛けにするため、 「プラグインの管理」でHTML編集を試み、 以下のタグを書き入れました。 <p class="plugin-freearea" &align> <a href="別のサイトのURL" target="_blank"><img style="float: left;" src="画像のURL" alt="" ></a> </p> これで目的の仕掛けは機能しました。 しかし、貼り付けた画像の周囲に3ピクセルほどの 紫色の囲み罫が残ってしまっています。 クリック、オーバーマウスしても色は変わりません。 グーグルでもBloggerのカスタマイズで同じ現象が出ています。 どちらも呼び出している画像の拡張子はgifです。 この紫色の囲み罫を削除したいのですが、 どなたか方法をご存知の方はいらっしゃらないでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • FC2ショッピングカートの背景画像変更ができません

    FC2ショッピングカートのカスタマイズをしたいのですが、 公式テンプレートのCSS、bodyのbackground:url( )内にアップロードした画像のURLをいれても 反映されません。 ずっと前にカスタマイズした時はそれでうまくいったのですが… どうしてなのかわからず困っています。 誰か教えていただけませんか?

    • ベストアンサー
    • HTML
  • FC2ショッピングカートのカスタマイズ

    FC2ショッピングカートのテンプレートを利用しているのですが 商品一覧の画像が大きくできず困っております 商品詳細ページの画像は{ItemImg.img_s}から{ItemImg.img}での変更で解決したのですが 商品一覧の画像は下記の様にサイズ指定だけですと、画像がぼけてしまいます {if item.list_img}<a href="{item.item_url}"><img src="{item.list_img}" alt="{item.name}"width="300" border="0"></a>{/if} 画像の大きさを合わせたり、色々試したのですが解決できません どなたか、詳しい方おりましたらお力を貸してください

  • FC2ショッピングカートのカスタマイズ方法について

    FC2ショッピングカートのカスタマイズ方法について FC2ショッピングカートの無料版を使用しています。 デザインは公式テンプレートのdefaultです。 このカスタマイズ方法についてお教えください。 「リンク」の「プラグイン」の追加で バナー画像をクリックするとメーラーが立ち上がるようにしたいのですが うまくいきません。 「デザイン設定」→「プラグインの追加」→「リンク」を設定しました。 「プラグインの管理」でHTML編集を試みました。 以下、のタグが表示されました。 <ul> {foreach link} <li &align> <a href="{link.url}" target="{link.blank}"> {if link.banner_url}<img src="{link.banner_url}" border='0' alt="{link.title}" width="{link.banner_width}" height="{link.banner_height}">{/if} {!if link.banner_url}{link.title}{/!if} </a> </li> {/foreach link} </ul> そこで <ul> {foreach link} <li &align> <a href="mailto:メールアドレス" target="_blank"> {if link.banner_url}<img src="バナー画像のURL" border='0' alt="{link.title}" width="{link.banner_width}" height="{link.banner_height}">{/if} {!if link.banner_url}{link.title}{/!if} </a> </li> {/foreach link} </ul> としましたが、クリカブルにもならず、バナー画像も表示できません。 どなたか正しい記述の仕方をお教えいただけませんか。

    • ベストアンサー
    • HTML
  • FC2ブログの共有テンプレートのカスタマイズについてお伺いしたく

    FC2ブログの共有テンプレートのカスタマイズについてお伺いしたく ご質問させて頂きました。どうぞ宜しくお願いします。 こちら↓にて配布しております http://makeatemplate.blog95.fc2.com/ 「Honeymomo3c-b」(水色系のテンプレートです)を 使用したいのですが右サイドバーを上からではなく 左サイドバーと同じ高さからにしたいのですが HTML及びCSSの変更の仕方がわかりません。 ヘッダーの幅をフッダーと同じにする事はできたのですが 右サイドバーがヘッダーと重なった状態で表示されてしまいます。 どこを変更したら良いのかアドバイスお願い致します。

  • FC2レンタルカートでHTMLにてTOPページ編集

    困っています。 FC2レンタルカートで、通販サイトをはじめたいと思っております。 マニュアルhttp://cart.fc2.com/tpl_var.php に書いてあることは読みました。 HTMLを調べていたのですが、一日探しても良く分からないので質問いたしました。 作成ショッピングサイトの一番初めに表示されるHOMEページに商品の説明をテンプレートのHTMLの編集で行いたいのです。 問題は、どの部分にHTML文章を挿入すれば良いのかが全く分かりません。 さまざまな場所に挿入を試みました。TOPのタイトル下に挿入されて、横のプラグインが下にズレてしまったりと。 ズレずに、説明をお読みいただいた後に、購入の判断をしていただきたいのです。

専門家に質問してみよう