楽天スマホページカテゴリ表示について

Question

お世話になります。
こちらの店舗様のようにスマホカテゴリをわかりやすく表示したいのですが、
どのようにしたらよろしいでしょうか？###HR######IMG02b3ccca91c6d6a6f149c7421f08f74a5.pngIMG0###

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

いただいたスクリーンショットのショップでは、
https://www.rakuten.ne.jp/gold/paty/css/smp.css
上記、外部スタイルシートファイルを読み込ませることで
実現されております。

他にも、複数の外部CSSファイルが読み込まれており、
上記ファイルだけでは不完全な可能性もございますが、
少なくともいただいたスクリーンショットの部分につきましては、
上記「smp.css」の９〜１６０行目、
「#sCSLContainer」や「.sCLToggleCont」に関連する規則が
対応しておりますので、

この部分を外部スタイルシートファイルとして
デニムダックさんの楽天GOLDに保存していただき、
スマートフォン用のカテゴリページ共通説明文に


※保存した外部スタイルシートファイルのURLは、実際のURLに置き換えて下さい。

上記タグを記載することで、
同じ見た目を再現することができます。

Answer

ありがとうございます！できました。

Answer

お世話になります。以前質問させていただきスタイルシートをいれることにより解決したのすが、PATYさんのページに比べると当店のページの画像がとても荒く表示されます。

画像をきれいに表示させることはできますでしょうか？

Answer

ECマスターズの田中です。

＞画像をきれいに表示させることはできますでしょうか？

はい。JavaScriptを利用して、
画像URLを変更し、縮小サイズを変更していただくことで可能です。

最初に、下記の内容を
テキストエディタ（メモ帳など）に貼り付けた後、
ファイル名の末尾を「.js」にし、外部JavaScriptファイルとして保存の上、
楽天GOLD内に設置してください。
===== この下の行から ============
jQuery(function($){
$('#sCSLContainer img').each(function(){
$(this).attr('src', 
$(this).attr('src').replace("90:90","200:200")
);
});
});
===== この上の行まで ============

次に、スマートフォン用共通説明文に
下記のHTMLタグを貼り付けることで、
独自バナーの表示切替を行うことができます。
===== この下の行から ============

===== この上の行まで ============
※外部JavaScriptファイルのURLは、実際のURLにご変更ください。

Answer

できました！ありがとうございます。

Answer

お世話になります！以前、上記アドバイスにてきれいに画像が表示されるようになったのですが、最近なぜか画像が小さくなってしまいました。
PATYさんのように画像を枠いっぱいに表示させる方法を教えてください。

Answer

ECマスターズの田中です。

https://www.rakuten.ne.jp/gold/paty/css/smp.css
上記CSSファイルと、デニムダックさんのショップのCSSを
比較したところ、

#sCSLContainer .inLeft img に対する規則の中に
    max-width: 100% !important;
    max-height: 100% !important;
上記２行が加わっており、
これによって画像を最大限大きく表示することができておりましたので、
同様に「sp-category-waku.css」内の規則に追記していただきますようお願いします。

Answer

お世話になります！以前、上記アドバイスにてきれいに画像が表示されるようになったのですが、最近なぜか画像が小さくなってしまいました。
ここの店舗さんのように画像を枠いっぱいに表示させる方法を教えてください。

https://item.rakuten.co.jp/spu/c/0000000211/

Answer

ECマスターズの塚本です。

技術的なご質問になりますので
担当の田中より回答させていただきますが、

田中が休みをとっておりまして、
回答までお時間がかかる予定です。

早くて16日（木）の回答となりお時間いただきますが、
今しばらくお待ちいただければと思います。　

どうぞよろしくお願いいたします。

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

楽天の仕様変更により、HTMLタグの構造が変わっているため、
挿入されたスタイルシートを変更に合わせて
修正していただく必要がございます。

カテゴリページ共通説明文に挿入された「sp-category-waku.css」を
下記のように修正していただきますようお願いします。

■修正点１
46行目の
#sCSLContainer .inLeft img
を
body div#sCSLContainer .sCSLBox01 div.inLeft img, body div#sCSLContainer .sCSLBox02 div.inLeft img
に修正してください。

■修正点２
42行目の
#sCSLContainer .inLeft
に
body #sCSLContainer .inLeft
のように「body 」を前に追記していただき、
同規則の width プロパティの値に「 !important」を追記し、
新しく
height: 100% !important;
上記heightプロパティを追記してください。

■修正点３
下記規則を新たに追記してください。
（今回ご変更いただいた規則の直後に挿入していただくと、
　今後の修正時にわかりやすいと思います）

.inLeft:before {
    padding-top: 100%;
    content: " ";
    display: block;
}

Answer

お世話になります。画像大きくなりましたが、画像のように重なってしまいます。
重ならない時もありますが、結構な頻度で重なりますので、重ならないようにする方法はありますでしょうか？###HR######IMG0f1397753697c4902aecccd61ea3004f0.pngIMG0######BR###

Answer

ECマスターズの田中です。

各商品ごとの高さが異なることが原因かと考えられますが、
対策方法も含め、実際のページを確認しながら
検討する必要がございますので、

実際に重なりが発生しているページのURLを、
元質問右下の「投稿内容について報告する」リンクより
お送りいただきますようお願いします。

Answer

ECマスターズの田中です。

お知らせいただき、ありがとうございました。

確認したところ、商品によって
商品名が４行になったり５行になったりすることによって
高さの違いが生まれているようですので、

「sp-category-waku.css」の
#sCSLContainer .inRight .ctgItemNormal
に対する規則に、
height: 75px;
上記プロパティを追記していただきますようお願いします。

Answer

height: 100%;　を　height: 75px;に変更するという解釈で宜しいでしょうか？

Answer

ECマスターズの田中です。

混乱を招く書き方をしてしまい、失礼いたしました。
おっしゃる通り、100% を 75px にご変更いただければ結構です。

Answer

お世話になります！100% を 75px に変更しましたが、やはり重なるときがあります。

Answer

ECマスターズの田中です。

私にて確認したところ、
初回は確かに重なって表示されたのですが、
同ページを再読込したり、他のページを表示したところ
問題なく表示されるようになりました。

デニムダックさんの環境にて、
キャッシュ（一時ファイル）に残った
古いCSSファイルを読み込んでいることが
原因ではないでしょうか。

お手数ですが一度、

・スーパーリロードを行う（PC/Mac向け）
https://liginc.co.jp/web/tool/browser/47339
・ブラウザの設定画面から、キャッシュを削除する
・普段ご利用されているブラウザ以外のブラウザ・PC（またはスマートフォン）で表示

などの方法で、
最新のファイルを読み込んだ状態で
表示をご確認いただきますようお願いします。

それでもやはり重なるときがある場合は、
実際に重なりが起こるページのURLを
改めて「投稿内容について報告する」より
お送りいただきますようお願いいたします。

Answer

ありがとうございます！ちゃんと表示されていました。