• 締切済み

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} 画像の大きさを合わせたり、色々試したのですが解決できません どなたか、詳しい方おりましたらお力を貸してください

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

みんなの回答

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.3

NO.1での回答者です（補足拝見済み） 予想通り、２枚の画像は別々ですよ。 ---------- 商品詳細画面での花画像 http://cart-imgs-1.fc2.com/user_img/p/peak19/item_3_1.jpg?u=1307849801 10.72 KB (10,977 バイト) 300px × 225px (300px × 225px で表示) ---------- 商品一覧画面での花画像 http://cart-imgs-1.fc2.com/user_img/p/peak19/item_3_1_s.jpg?u=1307849801 3.7 KB (3,790 バイト) 120px × 90px (300px × 225px で表示) ---------- 商品一覧画面での花画像は、 小さな画像を強制的に大きく引き伸ばしているからボケるのが当然です。 つまり、 商品詳細の画像を商品一覧でも使えば良いだけで、 具体的には、 PHPソースで、 商品詳細の画像タグ部分をコピーして 商品一覧の画像タグ部分に貼り付けて変更しましょう。 ---------- PHPも見れないし試せないので、詳しい回答は出来ないけど、 {ItemImg.img_s} {ItemImg.img} の部分の修正や理解が出来ていないのでは？ このタグ、どっちがどっちかは知らないけれど、 独自タグだから、何度か試したり確認したりすれば出来るでしょう。

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.2

NO.1での回答者です（補足拝見済み） ------------------ 登録前のパソコン内の画像の横幅値が300pxですか？ その画像で登録しましたか？ 登録時に強制的にリサイズして登録されるシステムもありますから、 その辺を要確認。（その場合なら画像がボケる） というか、それなら 同じ詳細画像もボケてるはずですが、 詳細画像が綺麗で一覧画像がボケるのであれば、有り得ない話ですね・・・ サイトのURLを提示できませんか？　これ以上は検証しないとわかりません。

peak19
質問者

補足

ご回答ありがとうございます 下記のページになります http://peak19.cart.fc2.com/ 宜しくお願いしますｍ（_　_）ｍ

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

登録時の元のサイズが分かりませんが、 width=" "で強制的にサイズを指定変更すると、ボケるのは当然の事です。 各商品画像の登録前に全ての画像の大きさを 幅 300pxに統一でリサイズしてから、 画像登録すれば良いんじゃないですか？ そうすれば、 元画像幅300pxを100%の大きさのまま表示してくれるので、 ボケる事は無くなるはずです。

peak19
質問者

補足

ご回答ありがとうございます。 画像は３００PXで保存しております 他に何か方法ありますでしょうか？ ご存知でしたらアドバイスお願いします

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

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

  • 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のショッピングカートでネットショップをしているのですが、表示される画像が小さいので大きくしたいのですが、どこをいじっていいのかわからなくて、困っています。 商品説明のページの写真（画面上で表示されている写真幅約2×3cm）を少し大きくしたいのですが。。。 使用しているテンプレートは　custam　です。 下のどこかをいじればよいのかな？とおもっておりますが、いかがでしょうか？ 大変申し訳ありませんが、素人ですのでわかりやすく教えていただけると、とっても嬉しいです。 いろいろ検索して調べましたが、わからなくて困っています（涙） どなたか、わかる方教えて頂けると助かります。 /*--盾妬亥風--*/ .sort{ width:460px; margin-top:10px; text-align:left; padding-left:20px; } .sort a{ margin:0px 10px; } .pagelinks{ width:460px; padding-left:20px; } .pagelinks .a{ width:460px; text-align:left; } .pagelinks .b{ width:460px; margin-top:3px; } .pagelinks .b .ahead{ width:20%; float:left; } .pagelinks .b .pageno{ width:60%; float:left; } .pagelinks .b .next{ width:20%; float:right; } .item_list{ float:left; width:33%; padding-left:0px; } .item{ width:150px; text-align:center; overflow:hidden; padding-left:20px; } .item a img{ border:solid #dcdcdc 1px; } .item .name{ text-align:left; margin:3px; } .item .comment{ text-align:left; margin:3px; } .item .other{ margin:3px; text-align:right; } /*--盾妬傷亨ヘ-*/ .item_detail{ text-align: center; font-size: 12px; width: 480px; } .item_detail .thumb{ float:left; margin-top:10px; width:33%; } .item_detail .thumb img{ border:solid #dcdcdc 1px; padding:0px; margin:0px; } .item_detail .thumb a img { background-color:none; display:block; } .item_detail .img-comment{ padding:3px; } .item_detail .comment{ padding:3px; text-align:left; } .item_detail .about{ text-align:right; } .item_detail .about .other{ padding:3px; } /*--チェック--*/ #subtitle{ margin:15px auto 5px; } .check{ margin:0; padding:0 0 30px; width:452px; } .pickupbase { font-size:10px; font-family:Osaka, Verdana, "ＭＳ Ｐゴシック"; margin-right:15px; padding-bottom:15px; width:130px; float:left; overflow:hidden; } .pickupbase a img{ border:solid #dcdcdc 1px; padding:0px; margin:0px; } .pickupname { font-weight:bold; text-align:center; padding-bottom:3px; overflow:hidden; } .pickupprice { text-align:center; padding-top:5px; overflow:hidden; }

    • 締切済み
    • CSS
  • ウインドウを狭めてもレイアウトが崩れない方法

    ウインドウを狭めてもレイアウトが崩れない方法を教えて下さい。 内容は、一番上にタイトルとしての画像を表示させて、その下に画像を３列で何列ものせる。 ウインドウを大きく広げたときは、それらの画像を中央に表示させてレイアウトを崩さないようにする。 下のような感じでは、ウインドウを狭めると画像が勝手に移動してしまいます。 全てを固定にしたいです。 お手本を教えて頂きたいです。よろしくお願いいたします。 添付画像が理想です。 ウインドウを狭めても画像が固定されている瞬間をイメージ化したものです。 <img src="" border="0" width="300" height="60" /> <br> <br> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>

    • ベストアンサー
    • HTML
  • IEとFirefoxでリンクの「hover」の状態が異なります。

    IEとFirefoxでリンクの「hover」の状態が異なります。 メニューに画像を使っているのですが、IEとFirefoxでは「hover」時のbackground-colorのかかり方が異なります。 IEだと画像全体にかかるのですが、Firefoxでは画像の下の方だけにしか色がつきません。 画像をテキストに変更すると、テキスト全体にきちんとかかります。 画像に問題があるのでしょうか？ どうすれば解決するのか教えてください。 以下にメニューのソースを載せておきます。 （HTML） <table width="100%" height="40" cellspacing="0"> <tr> <td width="100" ><a href="page1.html"><img src="menu1.gif" border="0" alt=""></a></td> <td width="100" ><a href="page2.html"><img src="menu2.gif" border="0" alt=""></a></td> <td width="100" ><a href="page3.html"><img src="menu3.gif" border="0" alt=""></a></td> <td width="100" ><a href="page4.html"><img src="menu4.gif" border="0" alt=""></a></td> <td width="100" ><a href="page5.html"><img src="menu5.gif" border="0" alt=""></a></td> <td width="100" ><a href="page6.html"><img src="menu6.gif" border="0" alt=""></a></td> <td width="100" ><a href="page7.html"><img src="menu7.gif" border="0" alt=""></a></td> </tr> </table> （CSS） a:hover { background-color: #000000;} どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • ＦＣ２　ショッピングカートについて

    FC2　ショッピング無料カートを使っています。質問ですが「簡単ページを利用する」を使用していますがこのページでもどのテンプレートでも商品の画像が小さく困っています。 どこを変えれば画像が大きくなりますか？ ちなみにクリックすると画像が大きくなるようですがクリック前の画像を大きく表示したいです。

  • ＣＳＳレイアウトの配置ずれについて

    本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。 以下、htmlとcssです。 html↓ <body> <div id="newBook"> <div class="item"> <ul id="slideItems"> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--2ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--3ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> </ul> </div> <div class="leftBtn"> <a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div> <div class="rightBtn"> <a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div> </div> </body> css↓ #newBook { margin: 30px; position: relative; } .item { height: 115px; width: 500px; padding: 10px 0px; overflow: hidden; position: absolute; left: 40px; top: 0px; } .leftBtn,.rightBtn { text-align: left; width: 40px; position: absolute; top: 0px; } .leftBtn { text-align: left; left: 0px; } .rightBtn { text-align: right; left: 540px; } .item ul { width: 1500px; position: absolute; left: 0px; top: 0px; } .item li { background-color: #999999; height: 100px; width: 100px; list-style-type: none; padding: 10px 0px 5px; float: left; text-align: center; } #slideItems { position: absolute; left: 0px; top: 0px; }

  • お世話になっております。fc2でblogを運営しているものです。

    お世話になっております。fc2でblogを運営しているものです。 テンプレートをいじってロールオーバーボタンを作ってみたいのですがどうしてもできません。 以下ソースになります。 HTML： <!--navi--> <div id="navi"> <div class="navi01"> <a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　トップ" border="0" width="120" height="30" /></a> </div> <div class="navi02"> <a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　イラスト" border="0" width="120" height="30" /></a> </div> <div class="navi03"> <a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　マンガ" border="0" width="120" height="30" /></a> </div> <div class="navi04"> <a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　その他" border="0" width="120" height="30" /></a> </div> <div class="navi05"> <a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　掲示板" border="0" width="120" height="30" /></a> </div> <div class="navi06"> <a href="○○○○○○"><img src="○○○○○○" alt="blog　ボタン　メール" border="0" width="120" height="30" /></a> </div> </div> <!--navi--> CSS： #navi { margin : 0 auto; margin-top : 5px; width : 800px; } .navi01 { float : left; margin-left: 15px; } .navi02 { float : left; margin-left: 10px; } .navi03 { float : left; margin-left: 10px; } .navi04 { float : left; margin-left: 10px; } .navi05 { float : left; margin-left: 10px; } .navi06 { float : left; margin-left: 10px; } です。navi01～navi06までがボタン。それをnaviでグループ化しているイメージです。 ○○○○○○には当然ソースが書いてあります。各ボタンのロールオーバー用ボタンは用意してあります。 どのようなHTML、CSSを書けばよろしいでしょうか。よろしくお願いいたします。

  • 画像の様なテーブルレイアウトにするには？

    画像の様なテーブルレイアウトにするにはどうすればいいのでしょうか IE9なら正しく表示されます。 何処を修正したかも教えて下さい ＊＊＊＊＊＊＊＊＊＊＊＊＊＊index.html＊＊＊＊＊＊＊＊＊＊＊ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="css/base.css" > </head> <body> <div id="page"> <div id="header"> <p>header</p> <!-- /#header--></div> <div id="contents"> <!--メインコンテンツ（商品リスト）--> <div id="main"> <ul id="products-list"> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> <!-- 商品情報 --> <li class="products"> <dl> <dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt> <dd>商品名</dd> <dd>価格：&yen;200,000</dd> <dd><a href="#">商品詳細ページ</a></dd> <dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd> </dl> </li> <!-- // 商品情報 --> </ul> <!-- /#main--></div> <!--メインコンテンツ（商品リスト）--> <div id="sub"> <p>sub</p> <!-- /#sub--></div> <!-- /#contents--></div> <div id="footer"> <p>footer</p> <!-- /#footer--></div> <!--/#page --></div> </body> </html> ＊＊＊＊＊＊＊＊＊＊＊＊＊base.css＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ /* CSS Document */ body{ text-align:center; } #page{ width:860px; height:600px; margin:0 auto; background:#690; text-align:left; } #header{ width:860px; height:100px; background:#D1D1DE } #contents{ width:840px; height:380px; margin:10px; padding-left:0; background:#690; } #main{ float:right; width:570px; height:380px; background:#fff; } #sub{ float:left; width:260px; height:380px; background:#fff; } #footer{ width:860px; height:100px; clear:both; background:#fff; background:#D1D1DE } .products{ list-style-type:none; float:left; width:130px; margin:10px 0px 0px 10px; padding:0px; height:170px; background:#F3F59C } .product-img{ margin:0px; padding:0px; width:50px; height:50px; text-align:center; border:none; } #products-list{ margin:0px; padding:0px; }

    • 締切済み
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する