楽天商品ページのセンタリング方法について

Question

限りなく真ん中よりになっているので、わかりづらいのですが、PCの商品ページの全体が若干左寄りになり、
気になっている状況です。
ヘッダー、レフト、フッターにそれぞれ
は入れているのですが、ズレています。
販売説明文や商品説明文に大きい画像を使うとズレるということは承知しているのですが、そういった画像を使っていない商品ページもずれているので、お手数ですが、対応方法を教えてください。

Answer

ECマスターズの田中です。

大きい画像を使われた時と同様、
ページ内の要素によって
幅が拡げられていることが原因です。

一番横幅の長い要素は
「商品をかごに追加」「ご購入手続きへ」ボタン
（以下、買い物かごボタンと表記）なので、

たとえば、既存のタグの中に

= この下の行から ====================
.floatingCartSplitButtons {
    width: 400px;
}
= この上の行まで ====================

上記タグを入れていただき、
買い物かごボタンの入れ物の横幅を制限する、
といったような対策を行っていただくことで、
買い物かごボタンが拡げていた横幅を無効にすることができます。

次に、共通説明文大のタグの中で
.sale_desc および .sale_desc img に
横幅760pxが設定されておりますが、
ページ内容をヘッダーのiframeの横幅、980pxに合わせるには
これを20ピクセル狭める必要がございますので、
740pxを指定、もしくは指定の削除をお願いします。

Answer

ご返信ありがとうございます。
CSSの追加とimgの740pxに変更しましたが、直りません。

.sale_desc および .sale_desc img に横幅760pxを設定している理由は、
全体の大きさ、wrapのwidth:980px;で
レフトナビがwidth：200px;
なのでレフトナビの隣に存在する20pxのを差し引いて
760pxとしていましたが間違っているのでしょうか。

質問の仕方が悪かったかもしれません。状況としてはゴールドで作成したトップページ以外の商品ページ及びカテゴリページの全体が左よりになっています。

Answer

追記：sale_desc および .sale_desc img に横幅740pxにするとヘッダーの右側の面に揃わなくなります。

Answer

ECマスターズの田中です。

販売説明文の画像とヘッダーの右端を合わせることが目的でしたら、
.sale_desc および .sale_desc img の横幅は760pxのまま操作せず、
CSSの追加のみを行っていただければ結構です。

なお、実際の商品ページを確認したところ、
ソースは既にご変更いただいておりましたが、
追加していただいたCSSが動作しておりませんでした。

ソースを確認したところ、
追加していただいたCSSと同じタグの中にある
「td.inventory font」規則のとじカッコが
全角の｝になっておりましたので、
まずはこちらを半角の}に修正していただけますでしょうか。

Answer

失礼しました。再度訂正し、更新などして確認しましたが変更されません。

Answer

ECマスターズの田中です。

私にて、アダルトさんの商品ページを
Chrome, Firefox, InternetExplorerにて確認したところ、
いずれのブラウザでも

レフトナビ　200px
余白　20px
コンテンツ（販売説明文など）　760px
余白　20px

以上1000pxの内容が、中央揃えで表示されていることが
確認できましたが、
さらに厳密に中央揃えすることをご希望でしょうか。

Answer

ご返信ありがとうございます。
楽天領域で表示されている、スーパーポイントアッププログラムのバナーが中央表示されている物と考え、
弊社ページがそのバナーに対して左にずれており、ページ両サイドの余白をみても若干ではありますが、ズレがあることがわかり気になっています。
これ以上の修正はmarginなどで無理矢理ずらさなければならないようであればこのままで構いません。


また、ページ全体幅を980pxで指定していたつもりだったのですが、1000pxとの指摘を受け訂正し、再度cssをアップロードしなおした所、大きさが変わりませんでした。
該当箇所はpickup itemからrankingまでです。

Answer

ECマスターズの田中です。


＞楽天領域で表示されている、スーパーポイントアッププログラムのバナーが中央表示されている物と考え、
＞弊社ページがそのバナーに対して左にずれており、ページ両サイドの余白をみても若干ではありますが、ズレがあることがわかり気になっています。
承知しました。

現在、アダルトさんの商品ページのコンテンツは、
先述の1000pxの領域の中で、左寄せ・横幅980pxで
配置されている状態ですので、
1000pxの領域の左側に20pxの余白を作ることで、
厳密に中央寄せを行うことができます。

仰るとおり、無理やりずらす形にはなりますが、
現状の商品ページの構造ですと、
下記スタイルシート規則を適用していただくことで
ご希望どおり中央寄せを行っていただくことができます。

table[width="800"][cellspacing="0"][cellpadding="0"][border="0"]{
margin-left: 20px;
}

楽天にて仕様変更した拍子に規則が適用されなくなり、
うまく表示されなくなる可能性もございますので、
まずは一度ご確認いただいた上で、導入するかご検討いただければと思います。


＞また、ページ全体幅を980pxで指定していたつもりだったのですが、1000pxとの指摘を受け訂正し、再度cssをアップロードしなおした所、大きさが変わりませんでした。

私にてページを確認したのですが、
変更箇所は特にみあたりませんでした。
特にこのままでも大きな影響はないようですが、
気になるようでしたら、具体的にご変更いただいた箇所をお知らせいただければ
問題ないかどうか確認させていただきます。

Answer

1000px→980pxへ変更した箇所は

ランキング部分のstyle.css内にある、
#ranking ul{
width:980px;
｝
を変更しました。

Answer

ECマスターズの田中です。

＞ランキング部分のstyle.css内にある、
＞#ranking ul{
＞width:980px;
＞｝
＞を変更しました。

center_contents.html に含まれる
ランキング部分に適用される規則ですね。

ランキング部分の横幅が980pxになっていること、
またトップページのヘッダーの横幅も980pxであることを
確認いたしましたので、問題はないと思います。

Answer

center_contents.htmlのページ全体幅が1000pxになっているのですが、980pxにするにはどのようにすればいいですか？

Answer

ECマスターズの田中です。

私にて、実際にcenter_contents.htmlが
トップページに埋まっている様子を確認したのですが、

傍線を引くために見出しの要素がウィンドウ幅に広がっている中、
各section内のulの横幅は980pxで表示されており、
特に問題ないように思います。

具体的に、どのような見方をした時に全体幅が1000pxになるなど
ございますでしょうか。

Answer

商品ページ及びカテゴリページ内にiframeで表示されるwidthです。
クロームで要素の検証するとcenter_contents.htmlが1000pxあります。これをヘッダーやフッターのiframeと同様980pxに落としたいのです。
見た目的にはランキング部分のbackground-colarがグレーに入ってる部分がわかりやすいと思います。左右10pxずつ広がってます。

Answer

ECマスターズの田中です。

＞商品ページ及びカテゴリページ内にiframeで表示されるwidthです。

こちら、確認いたしました。
ヘッダー・フッター・レフトナビ内「フッターコンテンツ」にて、
ID属性が「iframe_content」のタグの
width="100%" を width="980" に
修正していただきますようお願いいたします。

楽天 商品ページのセンタリング方法について

楽天商品ページのセンタリング方法について