商品ページ作成について

Question

商品ページを作成する際に項目選択肢の横軸が多数ある場合ですが
商品ページが右側にずれてしまいますが、この場合は横軸と縦軸の項目数を
調整するしか方法がないでしょうか？
参考例
http://item.rakuten.co.jp/capi/nb0038/

Accepted Answer

ECマスターズの田中です。


＞商品ページを作成する際に項目選択肢の横軸が多数ある場合ですが
＞商品ページが右側にずれてしまいますが、この場合は横軸と縦軸の項目数を
＞調整するしか方法がないでしょうか？

スタイルシートを利用して、
項目選択肢別在庫のを囲むタグを、
内部で横幅何pxとして扱うかを調整することで
ページ幅の拡がりを抑え、商品ページのズレを改善することができます。

下記のスタイルシートを
ヘッダー・フッター・レフトナビ、もしくは共通説明文（大）に
追記してください。

===== この下の行から ================

table[id^="normal_basket_"] > tbody > tr:nth-of-type(3) > td { max-width: 430px; overflow: visible; }

===== この上の行まで ================

上記タグの場合、430ピクセルとして扱われます。
完全に解決しない場合は、数字を減らすことで改善できる可能性があります。



＞参考商品のように買い物かご下段の目玉商品とフッターの位置が
＞横ずれしていますがこの場合もどこを修正すればよいのでしょうか

https://ec-masters.club/forum/post_view.php?id=1436
以前いただいた、上記URLのご質問と同様のケースですが、

PC用販売説明文の中、「商品説明」にあたる
タグの終了を示すタグがないため、
全体のレイアウトが崩れておりますので、

終了位置にタグを挿入していただくか、
再度、ホームページビルダーより
正しいソースをコピー＆ペーストしてください。

また、ホームページビルダーでソースを作成した場合ですが、
ソースに含まれる各タグは、
ページ全体の構造を表すタグであり、
ページの途中に書くと、ブラウザの解釈により意図しない表示になる可能性があるので、
 と  の間にあるソースだけを貼付けて
ご利用いただきますようお願いいたします。

Answer

同じような状態ですが参考商品のように買い物かご下段の目玉商品とフッターの位置が
横ずれしていますがこの場合もどこを修正すればよいのでしょうか

http://item.rakuten.co.jp/capi/uni5052-01-6/

Answer

今回ようやく『ブックマークレット』の使い方がわかりINDEXで111ケのエラーがありましたが、すべて解消しましてTAGUのエラーがなくなりましたので今後も利用していきます。
ありがとうございます。

ところが今度はヘッダー部分が左側になってしまいました。

商品検索窓の上部分に隙間ができてしまいましたがこちらも教えていただけますでしょうか

Answer

ECマスターズの田中です。

エラーはなくなっておりますが、
本来の開始・終了タグの対応を無視して終了タグが入れられているため、
中央揃えを担当する

上記タグが直後で閉じられていたり、
ヘッダーの内容を囲むはずのタグが、
ヘッダーカテゴリボタンや検索ボックスを囲んでいなかったりと
内部の構造が大幅に崩れております。

取り急ぎ修正する場合は、
との間に
タグを中身ごと移動させ、
移動させたタグの中に
、タグを中身ごと移動させ、
タグに対応するタグの直後に
タグを中身ごと移動させることで
中央揃えの位置に表示させることができます。

Chromeの開発者ツールで移動後の構造を表示すると
このようになる、という画像を添付いたしますので、
ご参考いただいた上で、タグの移動を行ってください。

このように、HTMLタグの構造が崩れた状態ですと、
今後手直しをしようとした際に、
ページの表示が大幅に崩れる可能性があります。

一部、崩れた構造のまま、見た目では正しく表示するよう調整されている部分もあり、
本来の構造に戻そうとすると逆に表示が崩れることもあるため、
ホームページビルダーのようなWebページ作成ソフトをお持ちでしたら、
一から作成しなおしていただくのも有効だと思いますので、
ご検討いただきますようお願いします。

Answer

DWを半年ほど前からつかいはじめましたが、私には使いこなせない部分もあったのかもしれません
ホームページビルダーで本日修正等をすることで、とりあえずheaderの横ずれ等は修正しました。
まだまだ課題が沢山ありそうですが、今回は修正前DATEを保存しまいままでもとに戻すこともできなく
あせりましたが、仮DATE登録をまめにしながらがんばってみます。
Chromeの開発者ツールに関してはよくわからないので、もう少し勉強してみます