楽天PC カテゴリーページの商品リストサイズ

Question

お世話になっております。
https://forum.ec-masters.net/post_view.php?id=10574
の内容を見て、画像の表示を大きくしようと思い試した所、画像サイズはそのままで表示されてしまいます。どこを直せばいいでしょうか。

Answer

ECマスターズの伊藤です。

実際のページを確認させていただきたいと思いますので、対応したページのURLを頂けますでしょうか。

お手数おかけいたしますが、よろしくお願いいたします。

Answer

https://item.rakuten.co.jp/yamaguchi-seni/c/0000000228/
これ以外にも全てのカテゴリーに実装済みです。

Answer

ECマスターズの伊藤です。

URLのご連絡ありがとうございました。

確認させていただいたところ、画像サイズを変更するためのJavaScriptの記述が見当たりませんでした。

下記を追加していただき、再度ご確認頂ますよう、お願いいたします。

＝＝＝＝＝＝＝＝
var imgSize = 250;

var j = jQuery.noConflict();
j( document ).ready(function(){
j( 'div#risFil img[src$="fitin=128:128"]' ).each(function(){
var thumImg = j(this);
var replaceSrc = thumImg.attr( 'src' ).replace( '?fitin=128:128' , '?fitin=' + imgSize + ':' + imgSize );
thumImg.attr( 'src' , replaceSrc );
});
});
＝＝＝＝＝＝＝＝
上記のコードをメモ帳などに貼り付け、category_image.jsなどのファイル名にして
GOLDにアップを行ってください。
カテゴリ説明文の先頭に、以下のコードをURLを変更して、貼り付けてください。

Answer

カテゴリーページ設定から下記記述を入れましたがないでしょうか。

jsファイルに上記の記述も入力しています。

Answer

すみません、単純にファイル名を間違っていました。失礼しました！

Answer

ECマスターズの伊藤です。

無事、設置頂けたようで、安心いたしました。

またご不明な点がございましたら、ご質問くださいませ。

Answer

すみません2点質問がございます。

・まず、https://forum.ec-masters.net/post_view.php?id=10574
cssでカテゴリーの見映えを変更しました。
もともと画像にカーソルを合わせるとhoverで白っぽくなるようにしていたのですが、
変更後、マウスオーバー時の反応がなくなってしまいました。
現在の表示のまま有効にさせたいです。

・可能であれば、添付画像のように表示位置を綺麗に揃えたいのですが、可能でしょうか。###HR######IMG042f4b0b8ad7ed17e0439e241378e946e.jpegIMG0######BR###

Answer

ECマスターズの伊藤です。

> もともと画像にカーソルを合わせるとhoverで白っぽくなるようにしていたのですが、
> 変更後、マウスオーバー時の反応がなくなってしまいました。
> 現在の表示のまま有効にさせたいです。

マウスオーバー時に画像の透過度を変更して
白っぽくするような効果を表現していたのかと思います。

下記の通り、CSSの追加していただきますと、
上記の効果を適用していただけます。

修正
＝＝＝＝＝＝＝＝＝＝
#risFil a{
	text-decoration: none;
	word-break:break-all;
	margin: 0;
	display: block;
}
＝＝＝＝＝＝＝＝＝＝

追加
＝＝＝＝＝＝＝＝＝＝
#risFil a:hover{
	opacity:0.5;
}
＝＝＝＝＝＝＝＝＝＝
opacity:【ここの数字を0~1の間でご指定ください。】;
0が透明、1が透過なしになります。


> 可能であれば、添付画像のように表示位置を綺麗に揃えたいのですが、可能でしょうか。

CSSにて、表の1番め(3n+1)と3番め(3n)の、左右の余白を削除することで、
両端を揃えたデザインにすることができます。
1番め、3番め、と指定をしているため、
今後、2列や4列などに、デザインが変わった際に
レイアウトが崩れてしまいますので、ご了承のうえ、設置していただきますよう
お願い致します。

＝＝＝＝＝＝＝＝＝＝
#risFil td:nth-child(3n+1){
    padding: 5px 15px 5px 0!important;
}
#risFil td:nth-child(3n){
    padding: 5px 0px 5px 15px!important;
}
#risFil td:nth-child(3n+1) .categoryWindowImg{
  margin-left: 0;
}
#risFil td:nth-child(3n) .categoryWindowImg{
  margin-right: 0;
}
＝＝＝＝＝＝＝＝＝＝

Answer

ありがとうございました。
無事出来ました。