楽天 PC 表示のズレと動作不良

Question

下記のHTMLをトップページ及び商品ページで読み込んでいるのですが、
下記のページ単体で見ると政情なのですが、トップページ及び商品ページでは不具合が出てしまします。
NEW ITEMの部分が上にずれてしまいます。また、それに伴ってマウスカーソルを合わせると
文字が出てくる仕様なのですが、出てこなくなってしまいました。
https://www.rakuten.ne.jp/gold/yamaguchi-seni/center_contents.html



また、商品ページに移ると、ヘッダー以下が若干左に寄ってしまいます。
カテゴリページではキレイに収まってるようなのですが、これをヘッダーの両端の面でそろえるように表示させたいです。
画像添付いたします。###HR######IMG07b102473c4a470b36a22682872bd40d2.jpegIMG0###

Answer

ECマスターズの伊藤です。

> 下記のページ単体で見ると政情なのですが、トップページ及び商品ページでは不具合が出てしまします。
> NEW ITEMの部分が上にずれてしまいます。また、それに伴ってマウスカーソルを合わせると
> 文字が出てくる仕様なのですが、出てこなくなってしまいました。

トップページをWindows、MacのChromeで確認いたしましたが
該当の箇所が見当たりませんでした。

シークレットモードで一度、ご確認を頂き
それでも崩れている場合は
詳細な箇所と、環境をお伺いできますでしょうか。

シークレットモードの起動方法は、下記URLをご参照ください。
https://bit.ly/2Uup9r7


> また、商品ページに移ると、ヘッダー以下が若干左に寄ってしまいます。
> カテゴリページではキレイに収まってるようなのですが、これをヘッダーの両端の面でそろえるように表示させたいです。

価格の少し下にある、「キャッシュレス5%還元」の箇所が
枠を押し広げているようでした。

下記を、商品共通説明文などに
追加をお願いします。



body .cashlessPtBack{
    width:100%;
}



また、「商品についてのお問い合わせはこちら」の画像も
枠を押し広げる原因となっています。

https://www.rakuten.ne.jp/gold/yamaguchi-seni/css/favorite_icon.css
の59行目辺り
body #rakutenLimitedId_aroundCart button.rAskBtn
にて、横幅の調整をお願いします。

Answer

トップページの件は解決しました。

＞また、「商品についてのお問い合わせはこちら」の画像も
＞枠を押し広げる原因となっています。

＞https://www.rakuten.ne.jp/gold/yamaguchi-seni/css/favorite_icon.css
＞の59行目辺り
＞body #rakutenLimitedId_aroundCart button.rAskBtn
＞にて、横幅の調整をお願いします。

こちらを調整すると、キレイに収まるようになるのですが、
お気に入り商品の画像と
お気に入りショップの画像が二段になってしまいます。

今は買い物籠に入れる、購入手続きのボタンと面で揃うようにしているのですが、
「商品についてのお問い合わせはこちら」を調整してしまうと揃わなくなってしまうと思うのですが、
良い方法はないでしょうか。

Answer

ECマスターズの伊藤です。

> 今は買い物籠に入れる、購入手続きのボタンと面で揃うようにしているのですが、
> 「商品についてのお問い合わせはこちら」を調整してしまうと揃わなくなってしまうと思うのですが、
> 良い方法はないでしょうか。

商品名下の部分のレイアウトは
変更されたくないというようであれば

店舗設定 ＞ デザイン設定 ＞ 商品画像サイズの設定

こちらで、商品画像のサイズを変更していただく
方法はいかがでしょうか。

Answer

ありがとうございます。
商品画像サイズの変更でしっかりそろえることが出来ました。