商品一覧のサムネイル画像を大きく変更する方法について

Question

お世話になります

https://forum.ec-masters.net/post_view.php?id=6801

を拝見させて頂きましたが、理解力不足で質問です

「　カテゴリ説明文の先頭に


このscriptタグを記載して、外部JavaScriptファイルを読み込み実行することで
実現しております。」

とありますが、「category.js」に記述するタグを教えて頂けますでしょうか？

フォーラムの6801には、記載がなかったので、初心者のため全く見当がつきません


また、以下に付いても教えてください。

「下記styleタグをご記載いただくか、
styleタグの中身を、既存のstyleタグまたは外部スタイルシートファイル内に
追記していただきますようお願いします。


body #risFil .categoryWindowImg {
width: 240px;
height: 240px;
}
　　　」

とありますが、

上記記述を「category.js」に追記するのでしょうか？

それとも新たに上記を記載した　.css　スタイルシートファイルを作ってGOLDにアップすれば良いのでしょうか？


それから、PCを解決後にスマホページに付いても画像改善したいと思っております
他の方のスマホの一覧画像のサイズを変えたいとの質問にありました以下の２店舗の参考ページですが

https://item.rakuten.co.jp/toyamawebshop/c/0000000362/

https://item.rakuten.co.jp/suit-depot/c/0000000160/

布団の店舗様のページの商品は画像が２個づつ並んでいますが
スーツの店舗様は左に１つの画像、右に商品名　となっております

当店の希望は、布団の店舗様のように商品を並びにして画像も大きくしたいのですが
現状はスーツの店舗様のように並んでおります。
これは、画像を大きくする以前になにかRMSの設定の違いがあるのでしょうか？

どのような手順で進めれば良いのかご教授頂きたいです。
初歩的な質問でしたら申し訳ありません。
どうぞよろしくお願い致します。

Answer

ECマスターズの清水です。

技術的なご質問の回答は、休み明けとなりますので、
今しばらくお待ちくださいませ。

宜しくお願いいたします。

Answer

ECマスターズの田中です。

「category.js」の内容は、引用元の店舗様にある
同名ファイルの内容をご記載いただく形になるのですが、
その中から画像サイズ変更の部分だけ抜きだして、
下記ソースをご記載いただく形でも結構です。

= この下の行から ====================
jQuery(function($){
//画像サイズ変更
$('#risFil img').each(function(){
$(this).attr('src', $(this).attr('src').replace(/fitin=\d+:\d+/g,"fitin=240:240"));
});
});
= この上の行まで ====================

> 新たに上記を記載した　.css　スタイルシートファイルを作ってGOLDにアップすれば良いのでしょうか？

はい、GOLDにアップしていただき、
ヘッダー・フッター・レフトナビ、または共通説明文（大）に
タグを書いて読み込んでいただいても結構ですし、

〜までの内容をそのまま
ヘッダー・フッター・レフトナビ、または共通説明文（大）に
ご記載いただいても結構です。

> 当店の希望は、布団の店舗様のように商品を並びにして画像も大きくしたいのですが
> 現状はスーツの店舗様のように並んでおります。
> これは、画像を大きくする以前になにかRMSの設定の違いがあるのでしょうか？

いいえ、基本的には、
RMSの設定にかかわらず、全店舗スーツの店舗様の見た目なのですが、

布団の店舗様では、RMSのバグを利用して、
本来スマートフォン用項目での使用が禁止されている
タグを挿入することで、
スタイルシートを読み込み、見た目を変更しております。

具体的には、スマートフォン用のカテゴリページ共通説明文に



上記のタグを記載し、
https://www.rakuten.ne.jp/gold/toyamawebshop/sp/css/common.css
上記CSSファイルを読み込んでおります。

クロネコさんさんのショップでも、
同様の内容でCSSファイルを作成し、
同様のタグをカテゴリページ共通説明文に記載することで
見た目を変更することができますが、

先述の通り、バグを利用した方法となりますので、
RMSの改善により、今後利用できなくなる可能性がございますことを
予めお含みおきください。

また、上記「common.css」の内容をそのままご利用される場合、
同ファイル内に２箇所、「カテゴリ・商品ページ上看板」の部分に
店舗様のR-CabinetのURLが含まれております。
この部分に表示するための画像をご用意いただくか、
この部分のソースを削除した上でご利用ください。

Answer

お世話になります。
当店のGOLD内を確認しましたが現状は「script」「category.js」ともありませんでした。
その場合、空の「script」フォルダを作り、新規に作った「category.js」に

= この下の行から ====================
jQuery(function($){
//画像サイズ変更
$('#risFil img').each(function(){
$(this).attr('src', $(this).attr('src').replace(/fitin=\d+:\d+/g,"fitin=240:240"));
});
});
= この上の行まで ====================

のみを記述して入れるだけでよいのでしょうか?

タグやcss,、jsなどに詳しくないため教えていただいた内容を咀嚼することに時間がかかっています。
どうぞよろしくお願いいたします。

Answer

ECマスターズの田中です。

> 空の「script」フォルダを作り、新規に作った「category.js」に
> （中略）
> のみを記述して入れるだけでよいのでしょうか?

はい、その手順で結構です。

今後、今回のようなデザイン修正を行われる際の
感覚を掴んでいただくためにも、
クロネコさんさんにて、じっくり操作を行っていただければ幸いです。
不明な点がございましたら、お気軽にフォーラムにお寄せください。

Answer

お世話になります。

おかげさまでPCのカテゴリ画像は大きくする事が出来ました。
ありがとうございます。

スマホのページも同じく最初に質問した事を実行していきたいのですが、
以下にご案内頂いた件で進め方の確認をお願します。

ーー

ご案内頂いた、



のcommon.cssをそのままコピペさせて頂き、当店用のcssファイルを作り、



上記のGOLD内に入れれば良いということで宜しいのでしょうか？

その際ですが、、以下の注意点をうかがいましたが、ソースの詳細を読む能力がないため、
消去するべき2箇所のソースに自信がありませんので確認させて下さい

上下のどこまでを消去するべきか、
また、キャビネット以外にも気になる部分があり、合わせて■4箇所ありました
4箇所以外にも修正するべき部分があれば、具体的に消去する列と書き換える部分をご教授頂ければ助かります

ーー
「また、上記「common.css」の内容をそのままご利用される場合、
同ファイル内に２箇所、「カテゴリ・商品ページ上看板」の部分に
店舗様のR-CabinetのURLが含まれております。
この部分に表示するための画像をご用意いただくか、
この部分のソースを削除した上でご利用ください。」
ーー

■６行目　　日付とお名前を消す　？
■１１３　　店舗様の情報のようなソースがあるように思います　？
■２３０　R-CabinetのURL
■２４４　R-CabinetのURL

どうぞよろしくお願い致します

Answer

ECマスターズの田中です。

「common.css」ファイルは、おっしゃる通りの方法でご用意をお願いします。

> ■６行目　　日付とお名前を消す　？
表示に影響はありませんが、削除していただいて結構です。

> ■１１３　　店舗様の情報のようなソースがあるように思います　？
店舗様ではなく、楽天市場が設置している画像URLのため、
特に修正の必要はございません。

> ■２３０　R-CabinetのURL
> ■２４４　R-CabinetのURL
共に、クロネコさんさんのショップの画像URLにご変更ください。
なお、先述の通り、ページ上部の看板部分となりますので、
必要なければ２２５〜２４７行目ごと削除していただいても結構です。

Answer

お世話になります。
無事、スマホページにもカテゴリ画像が大きく＆看板、
そして、カテゴリを絞り込む部分が始めから表示されました。
ありがとうございます。

変更に伴い、２点ほど、気になる事がありますのでよろしくお願いします。

１、当方のスマホがiphoneSEのためだと思うんですが、PCでECマスターズさんのアプリで楽天ページのスマホビューで見ますと、商品画像は２つづつ並んでおりますが、
こちらのSEでは１点づつの左寄りの画像表示となっています。
これはSEだけがほぼそうであって、他の多数の方のスマホではPCでのスマホビューのように大体２つ並びになると考えて良いでしょうか？
また、どんなスマホでも２つ並びに表示されるよう指定する事は出来ますでしょうか？

一般的に２つ並びに見えていて、こちらのSEなど一部少数派のみが１画像づつになっているとのことでしたら、まだ諦めがつきますが、可能ならば、どのスマホでも同じに見えるように出来れば安心です。

２、カテゴリサムネイル画像の上部分の「カテゴリを絞り込む」部分が以前は隠れていてプルダウンの必要性があったかと思いますが、最初からページに行くと開いて表示されている状態になっています。
そのため、カテゴリ上部に独自でサイズ別のリンク画像を入れていた部分は不要になるので削除しようかと思っていますが、最初から見えている白地に枠のサイズ表示部分は任意に画像などに変更する、または枠やフォントの色や大きさなどを変更する事が出来ますか？

その場合どの部分でどのような修正方法があるかご教授頂ければ有難いです。


以上２点に付いて、どうぞよろしくお願い致します。

Answer

ECマスターズの田中です。

> １、当方のスマホがiphoneSEのためだと思うんですが、PCでECマスターズさんのアプリで楽天ページのスマホビューで見ますと、商品画像は２つづつ並んでおりますが、
> こちらのSEでは１点づつの左寄りの画像表示となっています。

私のiPhone8にて、SEと同じ解像度の設定にした上で
カテゴリページを１つ確認したのですが、
問題なく２つずつ並んでおり、１点ずつの表示を確認することができませんでした。

１点ずつの表示になるのは
横幅の狭さが原因として考えられ、
またiPhoneSE並の横幅の機種のシェアは減りつつありますので、
大体２つ並びになる、と考えていただいて結構です。

どうしても修正が必要な場合は、
原因特定のために、私にて表示を確認する必要がございますので、
クロネコさんさんにて１点ずつ表示を確認できるURLを
元質問右下の「投稿内容について報告する」リンクより
お知らせいただきますようお願いします。


> ２、カテゴリサムネイル画像の上部分の「カテゴリを絞り込む」部分が以前は隠れていてプルダウンの必要性があったかと思いますが、最初からページに行くと開いて表示されている状態になっています。
> そのため、カテゴリ上部に独自でサイズ別のリンク画像を入れていた部分は不要になるので削除しようかと思っていますが、最初から見えている白地に枠のサイズ表示部分は任意に画像などに変更する、または枠やフォントの色や大きさなどを変更する事が出来ますか？

先の「common.css」内に、必要なスタイルシートを
追記していただくことで変更できます。

枠やフォントの色や大きさは、
「.ilistnon li {」と「}」の間の内容をご変更ください。

上記の内容にて、１行ごとにスタイルシートのプロパティが書かれておりますが、
どのような意味なのか、どのように追記すればよいのかは
下記URLのリファレンスをご参照ください。
http://www.htmq.com/style/

たとえば、フォントの大きさを変えたい場合、
リファレンスを見ると「font-size」プロパティを操作する必要があることがわかり、
「.ilistnon li {」と「}」の間の内容を見ると
すでに「font-size:14px;」の記述があるので、
これを「16px」など、数字を上げることで、文字を大きくすることができます。

文字色など、存在しないプロパティは、追記をお願いします。

画像に変更する、というのは、
カテゴリへのリンク１つ１つに別々の画像を設置されたい、ということでしょうか。
その場合は、スタイルシートにて、個別の設定を行っていただく必要がございます。

Answer

お世話になります。その後、作業が中断してしまい、申し訳ありません。

以下の２についてですが

 ２、カテゴリサムネイル画像の上部分の「カテゴリを絞り込む」部分が以前は隠れていてプルダウンの必要性があったかと思いますが、最初からページに行くと開いて表示されている状態になっています。
そのため、カテゴリ上部に独自でサイズ別のリンク画像を入れていた部分は不要になるので削除しようかと思っていますが、最初から見えている白地に枠のサイズ表示部分は任意に画像などに変更する、または枠やフォントの色や大きさなどを変更する事が出来ますか？

　↓

アップした　common.css　　の記述により

「カテゴリを絞り込む」部分が、画像と同様に２列になり、
また以前はプルダウン表示になっていたものが初めから表示されるようになった
と言うことだと思いますが

この部分を以前ままの１列でプルダウン表示に戻すためにはどの部分を残す、または消せばよろしいでしょうか？

画像表示のみが２列で、大きさが変更されることを希望しておりましたので、
「カテゴリを絞り込む」以下が変更されることは望んでおりませんので、ここの部分を以前のものに戻すための方法をご教授お願いいたします

Answer

ECマスターズの田中です。

> この部分を以前ままの１列でプルダウン表示に戻すためにはどの部分を残す、または消せばよろしいでしょうか？

common.cssの37〜120行目、
/*カテゴリ*/ と /*カテゴリ*/ の間が
「カテゴリを絞り込む」部分を変更する役割をもっておりますので、
この部分を削除していただきますようお願いします。

Answer

お世話になります

/*カテゴリ*/ と /*カテゴリ*/ の間

を消去しましたら、プルダウン表示に戻りましたが、

カテゴリを絞り込む　　という赤い文字部分が幅に対して約５０％の半分になってしまいました

どこがいけないのかご教授お願いします

Answer

ECマスターズの田中です。

改めて確認したところ、
さらに削除していただく必要のある部分がございました。

前回削除していただいた /* カテゴリ */ の直後にある、
下記規則を削除していただきますようお願いします。

= この下の行から ====================
 .sCLToggleCont {
display: block !important;
}

#sCLContainer {
	margin-bottom: 10px;
	margin-top: 10px;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
	background: #ffffff;
}
= この上の行まで ====================

また、思わぬトラブルが今後発生することを避けるため、
/* カテゴリ */ と /* カテゴリ */ の間に１つだけ含まれる
}
も、削除していただきますようお願いします。

Answer

ありがとうございました！
無事なおりました。