「ページ修正について」

Question

お疲れ様です。
シャケです。
お店の前の公園にヤエザクラが咲き
公園を眺めるとその桜のもとにいるカップルや
桜の写真をとっている人を眺めまたこの光景がみれるとほっこりしています。

今回は、ページ修正の件で教えて貰いたく投稿しました。

通常は白バック背景でこんな感じですが・・・
https://soko.rms.rakuten.co.jp/otaru/10001221/

ここのお店みたく白バック背景でなくしたいのです
https://item.rakuten.co.jp/otsumami-gallery/10000495/

考えた結果。
ヘッダー・フッター・レフトナビのテンプレート設定に
一つ黒バック背景をつくりました。


html{
background-image:url("https://image.rakuten.co.jp/otaru/cabinet/08106755/black.jpg");
background-repeat:repeat-y;
background-position: 0px;
}
body{
background-image:url("https://image.rakuten.co.jp/otaru/cabinet/08106755/black.jpg");
background-repeat:repeat-y;
background-position: calc(100% - 0px);
background-color:transparent;
}


すると他の文字がすごくどきつい赤になり
少し気持ち悪い感じのページになったのです。

ここのお店は、どうやって工夫しているか解ったら教えて下さい。
https://item.rakuten.co.jp/otsumami-gallery/10000495/

Accepted Answer

ECマスターズの土屋です。

>ヘッダーのバナー比率が解っていましたら
>教えてもらえないでしょうか？

下記の画像の余白を解消したいという認識で
お間違いないでしょうか。
https://ec-masters.gyazo.com/4c75c3acb545b0307b922874a6cf5f49

お間違い無いようでしたら
バナーの横幅に商品画像の横幅を合わせる方法。

商品画像の横幅にバナー画像の横幅を合わせる方法。

商品画像をセンタリングして余白を均等にする方法。

上記３つの方法で当てはまる方法を
ご教示頂けますと幸いです。

Answer

ECマスターズの田中美帆です。

いただいたご質問ですが、確認いたしますので、
恐れ入りますが、ご回答まで今しばらくお待ちいただきますよう
お願いいたします。

Answer

ECマスターズの田中美帆です。

> ここのお店は、どうやって工夫しているか解ったら教えて下さい。
> https://item.rakuten.co.jp/otsumami-gallery/10000495/

参考のショップ様では、
ページ全体にネイビーの背景を適用し、
商品説明部分には白の背景を適用することで、
文字が読みやすくなるような工夫をされています。

商品説明部分のHTMLには
#pagebody というID名が付いており、
こちらに~で
背景を指定することで実装可能です。

PC用商品説明文など、
HTMLが利用可能な箇所へご記述ください。

———————————————


body {
background-color: #000;
}

#pagebody {
background-image: url("ここに背景画像URLを記述");
background-repeat: repeat-y;
background-position: center;
}


———————————————

参考のショップ様では、
以下の画像が使用されておりました。
https://www.rakuten.ne.jp/gold/otsumami-gallery/page/common/bg_2.jpg

こちらの画像をダウンロードして使用されると
著作権上の問題が発生する可能性がございますので、
必ずご自身で作成をお願いいたします。

Answer

田中さんお疲れ様です。

ちなみに、やってみたんですが、
こうなってしまうんです。
テスト
https://item.rakuten.co.jp/otaru/10001229/

白ベースでつくっていたけど
少しでも高級感をだしたくての黒よせだったのですが、
文字が消えたり、フォントがすごく赤くなったり
するのです。

何度か試したんですが解決なかなかできません。
なんかよい解決策ありましたらよろしくお願いいします。

Answer

ECマスターズの伊藤です。

> 白ベースでつくっていたけど
> 少しでも高級感をだしたくての黒よせだったのですが、
> 文字が消えたり、フォントがすごく赤くなったり
> するのです。

お試しいただき、ありがとうございます。

ページを確認させていただいたところ、
背景に用意していた画像が、真っ黒の画像のため、
黒い文字が背景と同化し、消えているように
見えております。

そのため、参考サイトのように
https://www.rakuten.ne.jp/gold/otsumami-gallery/page/common/bg_2.jpg
白い部分が中央にある画像をご用意くださいませ。

もし、こちらの加工がむずかしいようであれば、
横幅1200pxの、真っ白の画像をでもご対応いただけます。

上記の画像をご用意いたしましたので、
よろしければ下記リンクをクリック後、
表示される画像を保存してご利用くださいませ。

https://strage.ec-masters.net/img.php?h=25ed6c9fc5170c1d487188b64cbd2519.gif

Answer

伊藤さん
ありがとうございます。

こんな感じになって自分的には、満足していますが
転換率がなまら悪いので改善を考えています。
https://item.rakuten.co.jp/otaru/10001060/

あと、楽天に問い合わせて一度聞いてみたのですが、
バナーの横幅サイズの比率が解らないとの回答でした。

多分、バナーを大きく作ったからこう言うページに
なったと思っています。

ヘッダーのバナー比率が解っていましたら
教えてもらえないでしょうか？

デザイン的に崩れてしまうので
ちなみにこんな感じになります
https://item.rakuten.co.jp/otaru/10001217/

Answer

土屋さん
無事に解決できました。
ありがとうございました。