キャシュレス消費者還元バナーについて

Question

お世話になり有難うございます。
・Ｅストアーのスマホページにキャシュレス消費者還元バナーを設置したいのですが、全商品ページに設置する箇所が有ればお教えいただけますでしょうか。
・またＰＣの左側にタテバナーを設置したいのですが、どこに、どのように設置すれば宜しいでしょうか。

ご教授お願いいたします。

Answer

ECマスターズの伊藤です。

> ・Ｅストアーのスマホページにキャシュレス消費者還元バナーを設置したいのですが、全商品ページに設置する箇所が有ればお教えいただけますでしょうか。

商品ページ限定での設定はないようでしたが
すべてのページのヘッダーに設定する方法がございました。

設置箇所については、Eストアーのマニュアルをご覧くださいませ。

すべてのページ上部に画像を表示する
https://help.shopserve.jp/manual/043/


> ・またＰＣの左側にタテバナーを設置したいのですが、どこに、どのように設置すれば宜しいでしょうか。

Eストアーで作成されたページへの設置でよろしかったでしょうか。

実際のページを拝見できないため、他のタグと競合する可能性がございますが
下記を編集後、CSSに追加していただき、表示されるかどうかお試しくださいませ。

＝＝＝＝以下をCSSに追加＝＝＝
body{
background-image:url("バナーのURL");
background-repeat:repeat-y;
background-position:left;
background-color:transparent;
}
＝＝＝＝以上をCSSに追加＝＝＝

上記CSSにてうまく表示されない場合
お手数ですがURLをご連絡くださいませ。

Answer

ご返信有難うございます。
失礼いたしました。
https://www.hako-senmonten.com/
になります。

ご返答いただきました
・すべてのページ上部に画像を表示する
https://help.shopserve.jp/manual/043/
ですが、こちらはＰＣの設定だと思うのですが、ＳＰの全ページ表示はないでしょうか。

> ・またＰＣの左側にタテバナーを設置したいのですが、どこに、どのように設置すれば宜しいでしょうか。

body{
background-image:url("https://www.hako-senmonten.com/pic-labo/simg/kyasyutate.jpg");
background-repeat:repeat-y;
background-position:left;
background-color:transparent;
}

のＣＳＳは何処に設置すればいいのでしょうか？
画像のＵＲＬを入れるだけで宜しかったでしょうか。

基本的な事で申し訳ありません。
宜しくお願い致します。

Answer

お世話になり有難うございます。
ＳＰの表示に関しては分かりましたので、大丈夫です。
ＣＳＳの方、お願いいたします。

Answer

ECマスターズの伊藤です。

> ＳＰの表示に関しては分かりましたので、大丈夫です。

失礼いたしました、PCの方のご案内をしておりました。
解決されたようで良かったです。


> のＣＳＳは何処に設置すればいいのでしょうか？

CSSの編集箇所は、マニュアルにて詳細な説明がございますので
下記URLをご参照ください。
https://help.shopserve.jp/manual/177/#01

ご利用頂いているテンプレートへの設置が必要となりすので、
テンプレートを間違えないよう、ご注意くださいませ。


> 画像のＵＲＬを入れるだけで宜しかったでしょうか。

ページを確認させていただいたところ
一部、デザインを変更してしまう箇所がございましたので
下記CSSをご利用頂ますよう、お願いいたします。
※background-color:transparent;を削除しています。

＝＝＝＝以下をCSSに追加＝＝＝
body{
background-image:url("https://www.hako-senmonten.com/pic-labo/simg/kyasyutate.jpg");
background-repeat:repeat-y;
background-position:left;
}
＝＝＝＝以上をCSSに追加＝＝＝

Answer

お世話になります。
ご返信ありがとうございます。
やってみましたが、私には難しいのかうまくいきませんでした。
取り合えず、今のままにしておきます。
有難うございました。

Answer

ECマスターズの伊藤です。

> やってみましたが、私には難しいのかうまくいきませんでした。
> 取り合えず、今のままにしておきます。

改めて確認したところ、
CSSの記述場所によっては、競合してしまう可能性がございました。

今のままにされるとのことでしたが、
CSSの上部に記載されている内容を
下記のとおりに編集をしていただくと
反映できるかと思いますので
よろしければお試しくださいませ。

＝＝＝修正前＝＝＝
body{
	font-family:"ＭＳ Ｐゴシック", Osaka,monospace;
	margin:0px auto;
	padding:0px;
	font-size:84%;
	line-height:135%;
	color:#333333;
	background:#66CCFF;
}
＝＝＝＝＝＝
↓↓↓
＝＝＝修正後＝＝＝
body{
	font-family:"ＭＳ Ｐゴシック", Osaka,monospace;
	margin:0px auto;
	padding:0px;
	font-size:84%;
	line-height:135%;
	color:#333333;
	background:#66CCFF;
    background-image:url("https://www.hako-senmonten.com/pic-labo/simg/kyasyutate.jpg");
    background-repeat:repeat-y;
    background-position:left;
    background-color:transparent;
}
＝＝＝＝＝＝

Answer

お世話になり有難うございます。
ご返信が遅くなり申し訳ありません。
試してみました処、表示はされたのですが両サイドのバックの水色が消えてしまいました。
全体的に見えにくくなってしまったため、やはり元に戻しました。
色々有難うございました。

Answer

ECマスターズの伊藤です。

> 試してみました処、表示はされたのですが両サイドのバックの水色が消えてしまいました。
> 全体的に見えにくくなってしまったため、やはり元に戻しました。

大変失礼いたしました。
ご案内しておりました内容が間違っており
両サイドの色を消してしまう設定となっていました。

両サイドが水色で表示されるように
修正したものを、下記に記載いたしましたので
よろしければご確認くださいませ。


body{
font-family:"ＭＳ Ｐゴシック", Osaka,monospace;
margin:0px auto;
padding:0px;
font-size:84%;
line-height:135%;
color:#333333;
background:#66CCFF;
background-image:url("https://www.hako-senmonten.com/pic-labo/simg/kyasyutate.jpg");
background-repeat:repeat-y;
background-position:left;
}

Answer

有難うございました。
設定できました。
今後ともよろしくお願いいたします。