ページ(ヘッダー、レフトナビ+トップページor共通説明文など)の横幅をそろえたい

Question

試行錯誤をしてみたのですが、うまくすることができません。

今、当ショップのページですが、
　　ヘッダー部分とレフトナビ+トップページor商品ページの横幅がそろっていません。

例をヘッダー部分に、ECステーションさんのにぎわいランキングをiframeで入れて、
レフトナビには画像などを、
共通説明文にはECステーションさんのにぎわいRMIXを入れています。

看板とナビボタンは未着手ですが、ヘッダーとレフトナビ＋商品ページorトップページなどの
横をそろえたいと思っています。

なぜかヘッダーが下のレフトナビ＋トップページに比べると右にずれてしまいます。

一時的にヘッダーをcenterではなく、leftで設定しましたが、
看板とナビボタンのサイズをそろえたときに同じことになってしまうと思っています。

基本的な質問で申し訳ございませんが、ご回答よろしくお願いします。

Accepted Answer

ECマスターズの田中です。

（以下、数値の単位「ピクセル」を省略して記載します）

現在、トップページor商品ページの幅は789になっておりますが、
これを785に揃えたとしてご案内いたします。

楽天のページの仕組みにおいて、
レフトナビ＋ページ内容の部分は、４つのタグで構成されており、

レフトナビ　220
左余白　20
ページ内容　785
右余白　20

以上、横幅計1045となっております。

そのため、ページ内容の右端に横幅を合わせる場合は、
ヘッダーの内容を横幅1025で作成し、右側に20の余白を作る、
という処理を行う必要があります。

にぎわいランキングで言いますと、
width="1045" を、 width="1025" style="margin-right:20px;"
に変えていただくと実現できます。

あるいは、
ヘッダーの部分は、自然に横幅1045に拡張されておりますので、
ヘッダーの内容を1025ピクセルで作成し、
左寄せにしていただいても結構です。

にぎわいランキングで言いますと、
width="1045" を width="1025" に、
にぎわいランキングの上にあるタグの
style="text-align: center;" を style="text-align: left;" に
変えていただくと実現できます。

看板およびナビボタンは、楽天によって強制的に中央揃えになっておりますので、
看板画像を横幅1025で作成し、うち右端20を白色のみにしていただく、
ナビボタンでは列の右端に横幅20の、白または透明のボタンを置いていただく、
という工夫をしていただく必要があります。

Answer

ECマスターズの田中です。

kbtkさんのショップの商品ページ・トップページを確認したところ、
「レフトナビ＋トップページor商品ページ」の横幅が
合計1049ピクセルとなっているのに対して、
ヘッダー（看板・茶色のメニュー・ブランド名）の横幅は960ピクセル（＋余白左右各5ピクセル）、
にぎわいランキングは1026ピクセルとなっております。

これらの横幅を完全にそろえられる際は、
レフトナビ、及びトップページ（商品ページ）の内容を狭めるのは難しいと思いますので、
ヘッダーの内容を横幅1049ピクセルで作成していただきますようお願いします。

Answer

きれいにそろいました！感動です。

これから看板とナビボタンの横幅もそろえていきたいと思います。

いつも迅速、かつ的確にご回答いただきありがとうございます。

Answer

すみません、再度質問させてください。

お昼ヘッダー部分のサイズを1049に変更後、両サイドがそろっているように見えたのですが、
ヘッダー部分の右端（にぎわいランキング）と、トップページのバナーがずれていました。

トップページor商品ページの幅ですが、一部医療関係製品のページ幅が785のため、
785でそろえたいと思っています。

レフトナビとトップページの幅の両サイドと
ヘッダーの両サイドをそろえるにはどうすればよいでしょうか。

よろしくお願いします。

Answer

ご回答ありがとうございます。

ヘッダーのにぎわいランキングを左寄せにして横幅をそろえてはいたのですが、
看板部分が強制的に中央寄せになっているので何とかしたいと思っていました。

>看板画像を横幅1025で作成し、うち右端20を白色のみにしていただく、
>ナビボタンでは列の右端に横幅20の、白または透明のボタンを置いていただく、

その手があったんですね。。。
ありがとうございました。