コンパスでバナーを外すと、以前のコンパスのサイトに戻ってしまう件

Question

いつもお世話になっております。

コンパスの操作とショップページの反映について質問です。

コンパスで貼り付けたスーパーセール用バナーを、コンパスで変更したいのですが
プレビュー画面でPCページ、スマホページ共に以前のコンパスのテンプレートのページが表示されてしまいます。
これをこのまま更新すると、以前のテンプレートになってしまうのではないかと思い更新できません。


前にマラソンの時もバナーを外した際にスマホ用のトップページがコンパスのテンプレートに戻ってしまいました。

現在はPC用トップページ、商品ページと、
スマホ用トップページは独自で作ったテンプレートを使用しているのですが、コンパス内を確認するとテンプレートやらレフトバナーなど、以前使っていた素材が利用中？として登録されていました。

バナーを急ぎ外したいのですが、新しいテンプレートを残したままで
バナーを変更する方法はないでしょうか？ご教授お願いいたします。

Answer

ECマスターズの土屋です。

>バナーを急ぎ外したいのですが、
>新しいテンプレートを残したままで
>バナーを変更する方法はないでしょうか？
>ご教授お願いいたします。

商品画像に下記のバナーが2箇所登録されていますが、
こちらでお間違い無いでしょうか

https://ec-masters.gyazo.com/ca70f13497e106d801748f804271ffbb

お間違いが無ければ、こちらのバナーを
変更する方法としましては、楽天GOLDにある
compass/shop/header.html
と
compass/shop/item-bottom.htmlにある
下記のHTMLを以下の様に変更をお願いします。

■変更前(header.html)


  
   6月 4日(土) 20:00
  ～
   6月11日(土)  1:59


■変更後(header.html)


  
    
  



■変更前(item-bottom.html)


  
   6月 4日(土) 20:00
  ～
   6月11日(土)  1:59


■変更後(item-bottom.html)


  
    
  


注意点としまして「header.html」「item-bottom.html」
のバックアップを行った上、削除の実行を
お願いします。

>前にマラソンの時もバナーを外した際にスマホ用のトップページが
>コンパスのテンプレートに戻ってしまいました。

テンプレートが戻ってしまった事に関しまして
現段階で、原因は２つ考えられます。

(1)
compassにテンプレートの保存に失敗した。

(2)
RMSのテンプレートを直接変更しcompassのテンプレートが
古くなってしまった。

等が考えられます。

現在のデザインをcompassで利用する際は、
RMSに登録されている最新のデザインをcompassで
作り直して頂き、そのテンプレートを
RMSに反映する手順でご利用して頂く事を
オススメいたします。

Answer

丁寧なお返事ありがとうございます。
初心者すぎて申し訳ないのですが、

>お間違いが無ければ、こちらのバナーを
>変更する方法としましては、楽天GOLDにある
>compass/shop/header.html
>と
>compass/shop/item-bottom.htmlにある
>下記のHTMLを以下の様に変更をお願いします。


楽天GOLDにある、というのはどちらから確認、変更できるのでしょうか？

FFFTPから(header.html)の中を探してみましたが、ありませんでした。
(item-bottom.html)というのは、そのファイル自体ありませんでした。

見る場所が間違っているのだと思います。
お忙しいところ初心者過ぎる質問で申し訳ないのですが、
どちらから確認、変更ができるのか今一度ご教授いただけましたら幸いです。
何卒よろしくお願い申し上げます。

Answer

何度もすみません、昨日教えていただいた手順で
https://ec-masters.gyazo.com/ca70f13497e106d801748f804271ffbb
のバナー２か所はなんとか変更できました。

あと、左側についている長ーいバナーも削除したいのですが、
こちらも削除の方法をご教授お願いいたします。

Answer

ECマスターズの土屋です。

>あと、左側についている長ーいバナーも削除したいのですが、
>こちらも削除の方法をご教授お願いいたします。

こちらの画像ですが楽天GOLDにある
compass/shop/css
のフォルダに「style_rms.css」
というCSSファイルが存在しております。

style_rms.cssに記載されている
下記のソースコードを変更して
再度アップロードして頂いてもよろしいでしょうか。

■変更前
body:not(.shops-preview),
body.shops-preview #preview-cont {
  background-image: url("../../design/de8751bf-6ee5-4595-98e9-862d593e5936/80px.jpg?1654205779");
  background-repeat: repeat-y;
  background-attachment: scroll;
  background-position: left top;
}

■変更後
/* body:not(.shops-preview),
body.shops-preview #preview-cont {
  background-image: url("../../design/de8751bf-6ee5-4595-98e9-862d593e5936/80px.jpg?1654205779");
  background-repeat: repeat-y;
  background-attachment: scroll;
  background-position: left top;
} */

補足としまして
/*  */
上記の記号で挟まれたCSSのコードは、
ブラウザに反映されなくなる仕組みとなっております。

どうぞよろしくお願いします。

Answer

ありがとうございました！
縦の長いバナー、消せました！

コンパスでテンプレートを作り直すとありましたが、
RMSでかんたんにPC用の商品ページにバナーが貼れるのであれば
今後はできればコンパスは使わない方向にしていきたいと思っております。

今回のようなバナー位置にRMSでかんたんに入れることはできますか？
HTMLで毎回修正するような感じでしょうか？

お忙しいところ申し訳ございません。
何卒、よろしくお願いいたします。

Answer

ECマスターズの土屋です。

> 今回のようなバナー位置にRMSでかんたんに入れることはできますか？
> HTMLで毎回修正するような感じでしょうか？

おっしゃるとおり、HTMLを
修正いただく必要がございます。

バナー設置に必要なタグの基本は、
2種類となりますので、
覚えていただくとよろしいかと思います。

■画像を表示させるタグ


■リンクをつけるタグ
リンクさせたい文字や画像

例：画像にリンクを付けたい場合


となります。

上記を、表示させたい箇所に、
記載いただくことで、
バナーを表示することができます。


縦のバナーのみ、HTMLではなく、
CSSでの対応が必要となりますので、
追加頂いた/* */ のを削除と、
画像URLを変更にて、ご対応をお願いいたします。

再度非表示にしたい場合は
/* */ の追加をお願いします。

■■compass/shop/css

body:not(.shops-preview),
body.shops-preview #preview-cont {
background-image: url("画像URL");
background-repeat: repeat-y;
background-attachment: scroll;
background-position: left top;
}

Answer

すごく分かりやすいご説明、本当にありがとうございます！
毎回HTML、CSSの編集なのですね、デザインを崩してしまいそうで初心者の私にはリスクが高いように思えました。

かと言って、コンパスで新しいテンプレートを登録する方法が分かりませんでした。
①コンパスのテンプレートの切替→表示非表示並び順の変更から、今のデザインっぽく組み立てていくのでしょうか？

②またこのテンプレートの切替は、PC用、スマホ用と記載がありませんでしたが、共通なのでしょうか？

③因みに、お聞きしたいのですがコンパスは有料なのでしょうか？
有料であればやはりＨＴＭＬの編集に慣れて行った方が良いように思えます。

今後スマホ用のトップページ改善プロジェクトに従って、スマホ用のページは移行していく予定です。
色々聞いてしまい申し訳ありません。
お返事お待ちしております。よろしくお願いいたします。

Answer

ECマスターズの土屋です。

>①コンパスのテンプレートの切替→表示非表示並び順の変更から、今のデザインっぽく組み立てていくのでしょうか？

compassの公式のマニュアルは
公開されていないため、
詳しい操作方法についてはわかりかねますが

今のデザインに沿って、新たにcompassにて
作り直していただくという認識で
お間違いございません。

>②またこのテンプレートの切替は、PC用、スマホ用と記載がありませんでしたが、共通なのでしょうか？

今回の場合ですと「index_sp.html」が
スマートフォン用のトップページの
ファイルになりますので、

「index_sp.html」に、表示させたいバナーを
記載する必要がございます。

>③因みに、お聞きしたいのですがコンパスは有料なのでしょうか？
>有料であればやはりＨＴＭＬの編集に慣れて行った方が良いように思えます。

comapssは有料ツールとなります。

おっしゃるとおりHTMLを学ぶ事により、
webページの編集を自由且つ無料で行うことが
出来る様になりますので、少しづつ慣れてい行く
ことをオススメいたします。