SP用カテゴリページが部分的に表示されない

Question

お世話になっております。
以前下記の質問をさせていただきました。
https://forum.ec-masters.net/post_view.php?id=7720

それ以降特にファイルを触った記憶がないのですが、SPのカテゴリページの画像サイズが小さくなっており、更に部分的に価格の部分などが非表示になっておりました。
これは何らかのタイミングでファイルを誤ったものに書き換えてしまったのか、それとも楽天側の問題なのかわからずにおります。

というのも、確か２ヶ月ほど前に楽天側からcabinetの商品画像サイズが崩れる不具合が起きているとのメールがあり、その際に上記の価格部分の表示もおかしいことに気がつきました。
その時点では楽天側の不具合に伴って起きている現象だと思い、画像サイズの不具合が解消されたら元に戻るだろうと思っておりましたが、現時点でも一向に治る気配がないどころか、最近確認したところ今度は画像サイズが全体的に小さくなっておりました。

大変お手数ですが一度ご確認いただけますと幸いです。

Accepted Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

> SPのカテゴリページの画像サイズが小さくなっており

https://forum.ec-masters.net/post_view.php?id=8308
こちらは、上記質問と同様に、
楽天により、カテゴリページのHTMLの構造が変更されたため、
CSSが適用されなくなったことが原因です。

共通説明文にて読み込んでいる「sp_category.css」に対して、
下記の通り修正をお願いします。

■修正点１
87行目の
#sCSLContainer .inLeft img
を
body div#sCSLContainer .sCSLBox01 div.inLeft img, body div#sCSLContainer .sCSLBox02 div.inLeft img
に修正してください。

■修正点２
83行目の
#sCSLContainer .inLeft
に
body #sCSLContainer .inLeft
のように「body 」を前に追記していただき、
同規則の width プロパティの値に「 !important」を追記し、
新しく
height: 100% !important;
上記heightプロパティを追記してください。

■修正点３
下記規則を新たに追記してください。
（今回変更を行った部分の直後に挿入していただくと、
　今後の修正時にわかりやすいと思います）

.inLeft:before {
padding-top: 100%;
content: " ";
display: block;
}

> 更に部分的に価格の部分などが非表示になっておりました。

こちらも、同じ変更が原因で、
価格周りの見た目を修正するはずのスタイルシートが、
思わぬ形に適用されてしまったことが原因のようです。

同じく「sp_category.css」において、
（現在の状態の）119~133行目に記載されている
#sCSLContainer .inRight .ctgItemNormal:before, #sCSLContainer .inRight .ctgItemNormal:after
#sCSLContainer .inRight .ctgItemNormal:before
#sCSLContainer .inRight .ctgItemNormal:after
上記３種のセレクターに対する規則を削除していただくことで
価格が問題なく表示されるようになります。

構造が変更された今では、この部分の正確な目的がわからないので、
削除後、他の部分の見た目が乱れていないかどうか、
一度ご確認いただきますようお願いします。

Answer

お世話になっております。ご回答ありがとうございます。
修正したのですが、画像サイズだけ小さいままでした。
再度ご確認いただけますと幸いでございます。
何卒よろしくお願いいたします。

Answer

ECマスターズの田中です。

同じく「sp_category.css」にて、下記の点の修正をお願いします。

■修正点１
94行目の後方、
img　と　{　の間に
全角スペースが含まれており、
文法エラーとして認識されておりますので、
半角スペースに修正をお願いします。

■修正点２
修正１と同じ規則の中に、
max-width: 100% !important;
max-height: 100% !important;
以上２つのプロパティを加えてください。


ちなみに、sssssさんのショップでは
スタイルシートだけで見た目の変更がされており、
使われている商品画像が小さい（四方90pxに縮小されている）ため、
小さい画像を大きく引き延ばしたようにぼやけた見た目になってしまいます。

たとえば、下記の内容で外部JavaScriptファイルを作って
読み込ませることで、
大きい解像度の商品画像に変更して、きれいに見えるようにすることができます。

jQuery(function($){
$('.noImage').each(function(){
    $(this).attr('src',$(this).attr('src').replace('?fitin=90:90','?fitin=414:414'));
});
});

Answer

お世話になっております。
度々申し訳ございません。
サイズ問題は解決したのですが、jsが読み込まれていないのか、画像が荒いままになってしまいます。
いただいたコードをコピペしてjsファイルを別途制作し、禁止タグを使用して、RMSのカテゴリページ内に貼り付けを行ったのですが、読み込まれていないようです。

jsを読み込ませる記述は下記で問題ないでしょうか？
あるサイトから引用しました。

Answer

ECマスターズの田中です。

いただいた記述に使われているダブルクォーテーションが、
全角になっておりました。

半角の
"
に直していただくことでJavaScriptが動作いたしますので、
そのように直していただきますようお願いします。