http://cart1.fc2.com/cart/sample/?tplid=4046
↑
商品が横に1列しかないこのテンプレートを、
http://cart1.fc2.com/cart/sample/?tplid=107246
↑
このように、商品を横に3つ並べたいのです。
HTMLとCSSをチェックして色々試してみたのですが、どこをどうすればいいかさっぱりわからず困っています。
(各ボックスの幅を変えることのみできました。)
誰か、どうすれば良いか教えていくれませんか。
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
このカートを手直ししてあげた経験がありますが、
一般的なカートでHTMLで全商品枠があってCGIで処理してあるのなら
質問者さんがやったように数値変更するだけで良いのですが、
このカート、
1列のカートは、商品のテーブルを作りTRの1行目だけつくり、
IF文で2つ目の以降の商品があった場合に
TR以降を生成し縦に商品数列で配置するようになっています。
3列のカートは、商品枠の1/3幅のDIVを1つ作りfloat:leftで
(同じくIF文で)2つ目以降の商品を流します。
4つ目以降の商品は勝手にカラム落ちして2行目左側から配置されます。
つまり、幅とか配置の問題ではなく、
tabale を div に変更しなければいけないという事です。
この意味がわからなければ、触らない方がいいでしょう。
<div class="item_list">
<div class="item">
<div class="name"><a href=""></a></div>
<a href=""><img src=""></a>
<div class="comment"></div>
<div class="other"></div>
<div class="other">注文数:
<select name='order_su'><option value='1'>1</option></select>
</div>
<div class="other">
<input type="hidden" name="Submit_cart" value="true">
<input type="hidden" name="" value="11">
<input type="image" src="">
</div>
</div>
</div>
ご希望のHTMLで表面上のFORM内テンプレートは、上記です。
これに、各変数、URI、画像パス、JS、を割り当て
CSSで幅や大きさを調整すれば完成します。幅は33%で良いでしょう。
この回答への補足
すみません、もう一つ質問させていただきたいのですが。。。
このページはカートなどの画像は変更できないのでしょうか?
初歩的な質問で申し訳ございません。
ありがとうございます!
細かい質問のためなかば諦めていたのですが、具体的な回答でとても嬉しいです。
この機会にじっくり読んで理解してから実行したいと思います!
No.2
- 回答日時:
#1です。
補足への回答ですが、可能です。
HTMLで<img を入れるか、既存のCSSの画像を入れ替えるか、どちらかです。
HTML,CSS,が編集出来るという事は、
見た目部分のデザインを全て変更出来ます。
しかし、フォーム部分のCGIでの動作までは、変更出来ません・・・
1、適当な大きさの画像を作り、
2、管理画面からその画像を保存。
3、CSS(スタイルシート)編集で既存の画像を入れ替える。
ただ、
http://cart1.fc2.com/cart/sample/?tplid=4046
のテンプレートは、上部の花柄の画像が4.5枚で構成されているので
削除の部分もあるので初心者にはわかり難いかもしれませんね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- その他(住宅・住まい) 私の自宅にも、全く同じ型式のロスナイが取り付けられています。 これって実際に業者に依頼したら費用は幾 2 2022/09/19 18:11
- X(旧Twitter) Twitter 1 2023/05/10 16:33
- X(旧Twitter) Twitter RTについて 1 2023/07/20 21:36
- アイドル・グラビアアイドル 日系CA(キャビンアテンダント)になったらK-POPアイドルと繋がれるか? 1 2022/09/16 17:57
- X(旧Twitter) ツイートとリツイートの時間の差って 1 2023/08/14 11:00
- その他(プログラミング・Web制作) このpythonコードの意味教えて下さい! 2 2022/08/26 00:52
- 数学 0 a b a b 0 A= b 0 c B= b 0 c c a 0 0 c a を使って | a 2 2023/06/08 08:48
- X(旧Twitter) Twitter 1 2023/05/12 12:06
- FC2ブログ FC2ブログでプロフィールが2つ表示されます。 2 2023/08/14 17:05
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
html の divとtable の役割
-
HTML5 iframe の代わり
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
1時間30分を簡単に表したいで...
-
標題<h1>に、網掛けはできますか?
-
背景画像に全体または部分的に...
-
要素間、要素内に隙間が空く
-
divの中に外部のHTMLを埋め込む
-
inline-blockをネストすると表...
-
開閉式の隠し要素が一瞬表示さ...
-
html divボックスの入れ子で中...
-
スライド部分のリンクが貼れな...
-
ヘッダーとフッターだけ背景を...
-
divを追加すると下に隠れてしまう
-
HTMLの文法がめちゃくちゃらし...
-
<div id="container">の使いか...
-
IFRAMEでポートレット作成
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
複数のボタンを等間隔に、かつ...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
html の divとtable の役割
-
<div id="container">の使いか...
-
divとpの使いわけ
-
HTML5 iframe の代わり
-
ヘッダーとフッターだけ背景を...
-
3カラムレイアウトで「常に残り...
-
min-heightとheightの違いについて
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
-
グリッドレイアウトで"auto-fit...
-
divの中に外部のHTMLを埋め込む
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
iframeを使わずに上下50%ずつに...
-
html5でheaderの中にnav
-
hタグの右横に画像を表示
おすすめ情報