解決していただいた方に500ポイントさしあげます。


HTMLに関する質問なのですが、楽天のページを作っていまして
ブラウザ(IE)をお店トップページの幅ぎりぎりに合わせた状態で
商品ページを表示すると右に若干ズレてしまいます。
ズレないように直したいのですが、どの部分を直せばよろしいでしょうか。

トップページ
http://www.rakuten.ne.jp/gold/hammerstyle/

商品ページ
http://item.rakuten.co.jp/hammerstyle/f373-f374-f375/
http://item.rakuten.co.jp/hammerstyle/f335/
http://item.rakuten.co.jp/hammerstyle/f361-f362-f363/
など

回答の条件
  • 1人5回まで
  • 登録:2008/03/14 10:51:59
  • 終了:2008/03/19 06:20:26

回答(6件)

id:tukihatu No.1

牛乳先生(tukihatu)回答回数180ベストアンサー獲得回数322008/03/14 11:11:07

ポイント500pt

商品詳細ページのソース(htmlをノートパッドで開くと出てくる文字)の

<br>
<div align="center">
<table width="100%" cellspacing="20" cellpadding="0" border="0">
<tr>
<td align="center">

<br>
<div align="center">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">

に置き換えてみてください。

下層商品ページだけ、テーブルに20のcellspacingが入っているのが原因と思います。

id:rupopon

すみません。その部分は楽天側で設定されているので編集できませんでした。

編集できるのは、下記部分から下になります。

逆にトップページにcellspacing="20"を入れてみたのですが、うまくいきませんでした。

2008/03/14 14:38:59
id:saitoh1983 No.2

saitoh1983回答回数20ベストアンサー獲得回数02008/03/14 12:51:03

何回もやってみましたが全然ずれません。

どうしてでしょうか。

もう直しましたか?


従来から何かと、楽天のページは右にずれることが多いようです。

それは他店のページで経験が何回もあります。

多少のことずれでもそういうものだと諦めています。

諦めてるというか、購入に差し支えなければ気にしません。



むしろ購入に懸命な時は、多少のずれなど気にしていられない心理ではないですか?

ズレより商品で勝負というか、よけいなことでしょうが頑張ってください。

id:rupopon

ズレですが、ブラウザ(IE)をお店トップページの幅ぎりぎりに合わせた状態に

顕著に発生します。

応援ありがとうございます。

2008/03/14 14:42:50
id:tukihatu No.3

牛乳先生(tukihatu)回答回数180ベストアンサー獲得回数322008/03/14 16:27:38

下コメントの続きです。

勉強のためにやってみました。

結果は、できるけどちょっと…という結果に…

いじれる一番上の部分の

<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>

<script type="text/javascript">
<!--//
document.body.style.display = "none";
window.onload = function(){
document.body.innerHTML = document.body.innerHTML.replace(/cellspacing=.*20.*/gi,'cellspacing="0"');
document.body.style.display = "inline";
}
//-->
</script>
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>

に置換えてみてください

すべてをロードするまで待つので、表示が若干遅くなります。

ie、firefoxでは動きました。

いじれない部分をjavascriptで無理やり変更しているので、根本的な解決になってないという点であまり好きな手法ではないですが…やるならこれしかないかなと

もしかしたら楽天規約に違反してるかもしれないし…非表示じゃないから大丈夫かな。

id:rupopon

すみません。これもまた楽天側で使えるタグが決まっているので、

商品ページ編集では<script>2008/03/14 16:40:13

id:maverick100s No.4

maverick100s回答回数15ベストアンサー獲得回数12008/03/15 09:11:59

ローカルにページを落として試したところ、1で述べられているtukihatuさんの方法ですんなり直りましたよ。

それを試したのは昨日の、まだ他に書き込みがない時でしたが、もう解決しちゃってるんだなってことで、何も書き込みませんでした・・・。が、まだ解決していないんですねw

ちなみに、「その部分は楽天側で設定されている」に少し不信感を抱いています。というのは、楽天側で設定されているなら、なぜページごとにその設定が変わるのか?と、いうことです。

お手数ですが、もう一度ご確認してみていただけませんか?


てか、答える人たちがわかりやすいように、自分で触れる部分には

<!-- ********************** my part start **************************** -->

自分で書いたHTML部分

<!-- ********************** my part end ****************************** -->

と、いう風にしていただけると、早く解決できるかもしれませんよ。


それから、http://validator.w3.org/ のバリデーションにかけたら、HTMLのバランスが崩れていることがわかりましたので、まず、すべてのHTML構文ミスを解決すると、たいていこのような問題は自ずと直っちゃうものですので、試していただければと思います。

ピンポイントの解決方法でなくて申し訳ありません^^;

id:rupopon

ありがとうございます。200行目前後の cellpadding="20" は

全てのページでそうなっていると思うのですが、違うページがありましたら

教えていただけると嬉しいです。

2008/03/15 09:46:03
id:maverick100s No.5

maverick100s回答回数15ベストアンサー獲得回数12008/03/15 09:49:44

全てのページでそうなっていると思うのですが、違うページがありましたら

教えていただけると嬉しいです。

Top ページには cellspacing="20" はありませんよ。

id:rupopon

すみません。商品ページの全てのページという意味です。

トップページは全てこちら側でHTML編集が出来ます。

商品ページに入っているcellspacing="20"は楽天側で設定されているので

編集は出来ません。

2008/03/15 10:09:38
id:jacketjackson No.6

jacketjackson回答回数2ベストアンサー獲得回数02008/03/15 16:26:33

商品の詳細のイメージが大きすぎるようです。

http://item.rakuten.co.jp/hammerstyle/f028-f029-f030-f031-f032/]

のページであれば、商品詳細中段の

ブラック×ホワイト

レッド×ブラック

ブルー×ブラック

オレンジ×ブラック

ピンク×ブラック

の画像幅を小さくすることで、解決できます。

画像を変更するか、サイズを指定( img width=”500” ...)にすれば大丈夫でしょう。

サイズを変更した場合、若干縦長になるので、比率を合わせてサイズ指定する必要があります。

しかし、画質が悪くなるので、若干小さい画像を利用するのが吉です。

  • id:ayalist
    どの部分が「右に若干ズレている」のか、よく分かりません。
    直さなくても、記事が中央にあってバランス的にきれいだと思うのですが。
  • id:rupopon
    ズレですが、ブラウザ(IE)をお店トップページの幅ぎりぎりに合わせた状態に
    顕著に発生します。
  • id:rupopon
    tukihatuさんへ。返答のHTMLが変換されてしまったので、再度書きます。
    編集できるのは下記部分から下になります。
    <table width="800" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="6"><a href="http://www.rakuten.ne.jp/gold/hammerstyle/"><img src="http://www.rakuten.ne.jp/gold/hammerstyle/images/ttl01.gif" width="800" height="33" border="0"></a></td>
    </tr>
    <tr>
  • id:tukihatu
    >編集できるのは下記部分から下になります。
    えええ!つらいですね><
    原因はその20だと思うのですがいじれないとなると…うーむ、調べてみます。
    一応確認ですが、トップページの一番左の余白と、商品ページの一番左の余白が違うから同じにしたい、ということですよね?
    原因がその20の場合、こっちから触れないのでトップページの方を商品ページの方とあわせてしまうのが一番現実的かもしれません
    いちおう↓
    topの方を変えるには

    <body>
    <center>
    <table width="800" border="0" cellpadding="0" cellspacing="0">

    <body>
    <center>
    <table width="100%" border="0" cellpadding="20" cellspacing="0">
    <tr><td>
    <table width="800" border="0" cellpadding="0" cellspacing="0">
    に置換え

    さらに下の方の
    <img height="10" src="images/ft-btm.gif" width="800"><br><br>

    &copy; 2008 EFREET All rights reserved
    <br><br>
    </center>
    </body>

    <img height="10" src="images/ft-btm.gif" width="800"><br><br>

    &copy; 2008 EFREET All rights reserved
    <br><br>
    </td></tr>
    </table>
    </center>
    </body>
    に置換え

    で一応できると思います。
  • id:rupopon
    ありがとうございました。
    ブラウザの幅を広げた状態では正常なので、ブラウザの幅を狭めたときに
    右側から押されてる?ような感じです。
    トップページを編集しましたら、かなりいい感じになりました。ありがとうございました。
    すみませんが、もうしばらく募集させてください。
  • id:rupopon
    またすみません。商品ページでは<script>が使えません。
  • id:tukihatu
    >商品ページでは<script>が使えません。
    なんとっ!
    技術者泣かせな仕様ですね><
  • id:rupopon
    4の返答を間違えました。cellspacing="20"です。
  • id:naleringar
    rupoponさま、お気を悪くされたらすみません。

    楽天の仕様によるちょっとしたピクセルのズレより、

    「お客様がページにジャンプしてきた時にすぐに目に入って欲しい」、「買っていただきたい商品の写真」が、相当にスクロールダウンしないと画面に入ってこなくて、見るのがもう面倒くさくなって帰りたくなるほうがずっと気になります…。ハゲしくスレ違いだと思いますすみませんすみません…。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません